How to use Agent Framework (Python) AG-UI Server with MCP Apps and render UI back to frontend

[jamesmkfoo23]

Is it possible to use MCP Apps with AG-UI Server?

I currently have an AG UI Server with MS Foundry Agent having MCP App tool

Agent Framework AG UI Server:

mcpapp_tool = HostedMCPTool(
    name="MCPAppTool to get current time",
    description="MCP App UI Integration Tool for getting current time",
    url="https://<host>/mcpapp01/mcp",

    approval_mode="never_require"

)


async def create_agent() -> None:
    """create Microsoft Foundry agent from Azure AI Project."""

    # For authentication, run `az login` command in terminal or replace AzureCliCredential with preferred
    # authentication option.
    async with (
        AzureCliCredential() as credential,  # Use DebugAzureCliCredential
        AzureAIProjectAgentProvider(credential=credential) as provider,
    ):
        agent = await provider.create_agent(
            name="TempAgentWithMCPTool",
            instructions="""You are a helpful  Agent.
            
            """,
            description="Temporary Agent with MCP App Tool",
            tools=[           
                mcpapp_tool,           
            ]      
        )

        return agent


agent = asyncio.run(create_agent())
add_agent_framework_fastapi_endpoint(app, agent, "/")
if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="localhost", port=8001)

The MCP App is taken from this code https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-react.

The FrontEnd is using CopilotKit HttpAgent to call the AG UI Server

import {
  CopilotRuntime,
  ExperimentalEmptyAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";

import { HttpAgent,  } from "@ag-ui/client";
import { NextRequest } from "next/server";

// 1. You can use any service adapter here for multi-agent support. We use
//    the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();
 
// 2. Create the CopilotRuntime instance and utilize the Microsoft Agent Framework
//    AG-UI integration to set up the connection.

const agent = new HttpAgent({url: "http://localhost:8001/"}).use(
)
// 1. Create your agent and add the MCP Apps middleware

const runtime = new CopilotRuntime({ agents: { "my_agent": agent } });

// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime, 
    serviceAdapter,
    endpoint: "/api/copilotkit",
  });
 
  return handleRequest(req);
};

The tool call works fine, however the UI is not returned successfully to frontend.

Output from CopilotKit Frontend using AG UI MS Agent Framework Foundry Agent

When using CopilotKit Built-In Agent (https://docs.copilotkit.ai/generative-ui/specs/mcp-apps) together with the MCP App, the output renders the UI successfully

Output from CopilotKit Frontend using AG UI Built In Agent

How do I get MCP App to work with Agent Framework?