feat: Integrate MCP Apps into A2UI

samples/agent/adk/contact_multiple_surfaces/agent.py

@@ -231,16 +231,131 @@ 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
+
+        try:
+            # Connect to the persistent Starlette SSE server
+            async with sse_client("http://127.0.0.1:8000/sse") 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 Exception as e:
+            logger.error(f"Failed to fetch floor plan from SSE server: {e}")
+            yield {
+                "is_task_complete": True,
+                "content": f"Failed to load floor plan: {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"
+                      ]
+                    }
+                  }
+                },
+                {
+                  "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