feat: Integrate MCP Apps into A2UI

renderers/markdown/markdown-it/package.json

@@ -15,9 +15,12 @@
   "license": "Apache-2.0",
   "author": "Google",
   "type": "module",
+  "main": "dist/src/markdown.js",
   "exports": {
     ".": {
       "types": "./dist/src/markdown.d.ts",
+      "import": "./dist/src/markdown.js",
+      "require": "./dist/src/markdown.js",
       "default": "./dist/src/markdown.js"
     }
   },

samples/agent/adk/contact_multiple_surfaces/README.md

@@ -28,6 +28,12 @@ This sample uses the Agent Development Kit (ADK) along with the A2A protocol to
    uv run .
    ```
 
+4. (Optional) Run the server with standard `WebFrame` instead of the custom `McpAppsCustomComponent`:
+
+   ```bash
+   USE_MCP_SANDBOX=false uv run .
+   ```
+
 
 ## Disclaimer
 

samples/agent/adk/contact_multiple_surfaces/agent.py

@@ -241,16 +241,130 @@ async def stream(self, query, session_id) -> AsyncIterable[dict[str, Any]]:
       if query.startswith("ACTION:") and "view_location" in query:
         logger.info("--- ContactAgent.stream: Detected view_location ACTION ---")
 
-        # Use the predefined example floor plan
-        json_content = load_floor_plan_example().strip()
-        start_idx = json_content.find("[")
-        end_idx = json_content.rfind("]")
-        if start_idx != -1 and end_idx != -1:
-          json_content = json_content[start_idx : end_idx + 1]
+        from mcp import ClientSession
+        from mcp.client.sse import sse_client
+        import os
+
+        sse_url = os.environ.get("FLOOR_PLAN_SERVER_URL", "http://127.0.0.1:8000/sse")
+
+        try:
+          # Connect to the persistent Starlette SSE server
+          async with sse_client(sse_url) as (read, write):
+            async with ClientSession(read, write) as mcp_session:
+              await mcp_session.initialize()
+
+              logger.info(
+                  "--- ContactAgent: Fetching ui://floor-plan-server/map from"
+                  " persistent SSE server ---"
+              )
+              result = await mcp_session.read_resource("ui://floor-plan-server/map")
+
+              if not result.contents or len(result.contents) == 0:
+                raise ValueError("No content returned from floor plan server")
+
+              html_content = result.contents[0].text
+        except ValueError as e:
+          logger.error(f"Invalid floor plan data: {e}")
+          yield {
+              "is_task_complete": True,
+              "content": f"Failed to load floor plan data: {str(e)}",
+          }
+          return
+        except Exception as e:
+          logger.error(f"Failed to fetch floor plan from SSE server: {e}")
+          yield {
+              "is_task_complete": True,
+              "content": f"Failed to connect to floor plan server: {str(e)}",
+          }
+          return
+
+        json_content = [
+            {
+                "beginRendering": {
+                    "surfaceId": "location-surface",
+                    "root": "floor-plan-card",
+                }
+            },
+            {
+                "surfaceUpdate": {
+                    "surfaceId": "location-surface",
+                    "components": [
+                        {
+                            "id": "floor-plan-card",
+                            "component": {"Card": {"child": "floor-plan-col"}},
+                        },
+                        {
+                            "id": "floor-plan-col",
+                            "component": {
+                                "Column": {
+                                    "children": {
+                                        "explicitList": [
+                                            "floor-plan-title",
+                                            "floor-plan-comp",
+                                            "dismiss-fp",
+                                        ]
+                                    }
+                                }
+                            },
+                        },
+                        {
+                            "id": "floor-plan-title",
+                            "component": {
+                                "Text": {
+                                    "usageHint": "h2",
+                                    "text": {"literalString": "Office Floor Plan"},
+                                }
+                            },
+                        },
+                        {
+                            "id": "floor-plan-comp",
+                            "component": {
+                                "McpAppsCustomComponent": {
+                                    "htmlContent": html_content,
+                                    "height": 400,
+                                    "allowedTools": ["chart_node_click"],
+                                }
+                            } if os.environ.get("USE_MCP_SANDBOX", "true").lower() == "true" else {
+                                "WebFrame": {
+                                    "html": html_content,
+                                    "height": 400,
+                                    "interactionMode": "interactive",
+                                    "allowedEvents": ["chart_node_click"],
+                                }
+                            },
+                        },
+                        {
+                            "id": "dismiss-fp-text",
+                            "component": {
+                                "Text": {"text": {"literalString": "Close Map"}}
+                            },
+                        },
+                        {
+                            "id": "dismiss-fp",
+                            "component": {
+                                "Button": {
+                                    "child": "dismiss-fp-text",
+                                    "action": {"name": "close_modal", "context": []},
+                                }
+                            },
+                        },
+                    ],
+                }
+            },
+        ]
 
         logger.info(f"--- ContactAgent.stream: Sending Floor Plan ---")
         final_response_content = (
-            f"Here is the floor plan.\n---a2ui_JSON---\n{json_content}"
+            f"Here is the floor plan.\n---a2ui_JSON---\n{json.dumps(json_content)}"
+        )
+        yield {"is_task_complete": True, "content": final_response_content}
+        return
+
+      if query.startswith("ACTION:") and "close_modal" in query:
+        logger.info("--- ContactAgent.stream: Handling close_modal ACTION ---")
+        json_content = [{"deleteSurface": {"surfaceId": "location-surface"}}]
+        final_response_content = (
+            f"Modal closed.\n---a2ui_JSON---\n{json.dumps(json_content)}"
         )
         yield {"is_task_complete": True, "content": final_response_content}
         return