mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Ben Taylor
478a2aac95
## What
The MCP Apps example widgets report their intrinsic size with
`ui/notifications/size-change`, but both the host and the ext-apps spec
use
`ui/notifications/size-changed`:
- Host: `MCPAppsActivityRenderer` only handles `case
"ui/notifications/size-changed"` and
reads `{ width, height }` from it to size the iframe.
- Spec: `@modelcontextprotocol/ext-apps` defines
`McpUiSizeChangedNotification` with
`method: "ui/notifications/size-changed"` (`App.sendSizeChanged`).
Because the names differ by one letter, the host never receives the size
and the widget
iframe stays at its initial height instead of growing to fit its
content.
## Fix
Rename the notification to the spec name in the affected widgets. The
payload is unchanged
(`{ width, height }`), which is exactly what the host reads, so this is
a one-line change per
widget on the sender side only.
No host change: in JSON-RPC a notification (no `id`) must not be
answered, so the host
silently ignoring the old name is correct behavior; the bug is purely
that the widgets sent
the wrong method name.
## Affected widgets
- `examples/showcases/mcp-apps/mcp-server/apps`: flights, hotels,
kanban, trading
- `examples/showcases/generative-ui-playground/mcp-server/apps`:
calculator, flights, hotels,
kanban, todo, trading
## Testing
Reproduced against a local run of `examples/showcases/mcp-apps` (Next
frontend + MCP server):
before, the widget iframe rendered at its initial height; after the
rename the host receives
`size-changed` and the iframe resizes to the widget content.
## A note from the contributors
From the team at MCP Apps Builders - part of our ongoing series to round
out MCP Apps host
support in CopilotKit. Opening as a draft for review.
Generative UI Demo
https://github.com/user-attachments/assets/79ead351-f63c-4119-9d28-9d604e7f8876
A generative UI playground showcasing the three types for building AI-powered user interfaces with CopilotKit.
Demo Overview
This demo demonstrates how different types of generative UI can be used to create rich, interactive AI experiences:
| Spec | Description | Use Case |
|---|---|---|
| Static GenUI | Pre-built React components rendered by frontend hooks | Weather cards, stock displays, task approvals |
| MCP Apps | HTML/JS apps served by MCP servers in sandboxed iframes | Flight booking, hotel search, trading simulator |
| A2UI | Agent-composed declarative JSON UI rendered dynamically | Restaurant finder, booking forms |
CopilotKit Features Used
- CopilotKitProvider - Main provider with agent switching
- CopilotSidebar - Chat interface component
- useRenderToolCall - Display-only tool rendering (WeatherCard, StockCard)
- useHumanInTheLoop - Interactive approval flows (TaskApprovalCard)
- A2UIRenderer - Renders A2UI declarative JSON from agent responses
- MCPAppsMiddleware - Bridges MCP server tools with UI resources
- BasicAgent - TypeScript agent for Static GenUI + MCP Apps
- HttpAgent - Connects to Python A2A backend for A2UI
Setup
Prerequisites
- Node.js 18+
- Python 3.11+
- OpenAI API key
Installation
# Clone and install dependencies
cd ui-protocols-demo
npm install
# Install MCP server dependencies
cd mcp-server
npm install
cd ..
# Install Python A2A agent
cd a2a-agent
pip install -e .
cd ..
Environment Variables
Create a .env file:
OPENAI_API_KEY=sk-your-key-here
MCP_SERVER_URL=http://localhost:3001/mcp
A2A_AGENT_URL=http://localhost:10002
Running the Demo
Start all three services:
# Terminal 1: MCP Server (port 3001)
cd mcp-server && npm run dev
# Terminal 2: Python A2A Agent (port 10002)
cd a2a-agent && python -m agent
# Terminal 3: Next.js Frontend (port 3000)
npm run dev
Open http://localhost:3000 to see the demo.
Usage
Static + MCP Apps Mode
Click the "Static + MCP Apps" tab to use:
- "What's the weather in Tokyo?" → Weather card
- "Get stock price for AAPL" → Stock card with sparkline
- "Open the calculator" → Interactive calculator app
- "Search for flights to Paris" → Flight booking workflow
A2UI Mode
Click the "A2UI" tab to use:
- "Find Italian restaurants nearby" → Restaurant list with booking
- "Show me Chinese food options" → Filtered results
- "Book a table for 4" → Interactive booking form
Architecture
Frontend (Next.js) ─────────────────────────────────────────────────────
├── Protocol tabs switch between agents
├── Static GenUI: useRenderToolCall, useHumanInTheLoop
├── MCP Apps: Automatic iframe rendering via middleware events
└── A2UI: A2UIRenderer for declarative JSON
│
┌─────────┴─────────┐
▼ ▼
"default" Agent "a2ui" Agent
BasicAgent + MCP HttpAgent → Python
Port 3001 Port 10002
Project Structure
ui-protocols-demo/
├── src/app/ # Next.js frontend
│ ├── page.tsx # Main page with agent switching
│ ├── theme.ts # A2UI theme configuration
│ ├── api/copilotkit/ # CopilotKit API route
│ └── components/ # React components
├── mcp-server/ # MCP Apps server
│ ├── server.ts # Tool registrations
│ └── apps/ # HTML app files
└── a2a-agent/ # Python A2A agent
└── agent/ # Agent modules