MCP Apps - Copilotkit

What is this?

MCP Apps are MCP servers that expose tools with associated UI resources. When the agent calls one of these tools, CopilotKit automatically fetches the resource and renders the UI component in the chat; no additional frontend code required.

Key benefits:

Zero frontend code — UI components are served by the MCP server
Full interactivity — components can use HTML, CSS, and JavaScript
Secure sandboxing — content runs in isolated iframes
Thread persistence — MCP Apps are stored in conversation history and restored on reconnect

Wire the runtime to your MCP server(s)

A single mcpApps.servers entry on the runtime is all it takes. The runtime auto-applies the MCP Apps middleware to every registered agent: each time an agent calls a tool backed by an MCP UI resource, the middleware fetches the resource and emits an activity event that the built-in MCPAppsActivityRenderer renders inline in the chat as a sandboxed iframe.

<Snippet region="runtime-mcpapps-config" /> <Callout type="info" title="Always pin a serverId"> In production, always provide a stable `serverId`. Without it, CopilotKit hashes the server URL, and a URL change (for example between environments) silently breaks restoration of MCP Apps persisted in earlier conversation threads. </Callout>

No frontend renderer needed

Unlike custom activity types, the MCP Apps renderer is already registered by CopilotKitProvider out of the box. A plain <CopilotChat /> is enough; no renderActivityMessages prop, no manual useRenderActivityMessage wiring.

Transport types

The middleware supports two transport types:

HTTP

Use this format to connect to an MCP server that accepts standard HTTP requests:

typescript

{
  type: "http",
  url: "http://localhost:3101/mcp",
  serverId: "my-http-server"
}

SSE

Use this format to connect to an MCP server that streams events over a persistent connection:

typescript

{
  type: "sse",
  url: "https://mcp.example.com/sse",
  headers: {
    "Authorization": "Bearer token"
  },
  serverId: "my-sse-server"
}

Example MCP servers

Try these open-source MCP Apps servers to get started:

Excalidraw — collaborative whiteboard rendered in-chat
modelcontextprotocol/ext-apps — canonical reference implementations