MCP Apps
Render interactive UI components from MCP servers directly in your chat interface.
This feature (mcp-apps) hasn't been tagged in any LangGraph (TypeScript) cell yet. Try LangGraph (Python) instead, or browse the framework-agnostic version.
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.
langgraph-typescript::mcp-apps. Known demos are bundled from manifest demos[i]; check the cell id and framework slug.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.
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.
langgraph-typescript::mcp-apps. Known demos are bundled from manifest demos[i]; check the cell id and framework slug.Transport types
The middleware supports two transport types:
HTTP
{
type: "http",
url: "http://localhost:3101/mcp",
serverId: "my-http-server"
}
SSE
{
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