by CopilotKit
Interact with all three types of generative UI, all in one interface
# Add to your Claude Code skills
git clone https://github.com/CopilotKit/generative-ui-playgroundhttps://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.
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 |
# 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 ..
No comments yet. Be the first to share your thoughts!
Create a .env file:
OPENAI_API_KEY=sk-your-key-here
MCP_SERVER_URL=http://localhost:3001/mcp
A2A_AGENT_URL=http://localhost:10002
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.
Click the "Static + MCP Apps" tab to use:
Click the "A2UI" tab to use:
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
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
Note: This project has been consolidated into the CopilotKit monorepo. The latest version lives at
examples/showcases/generative-ui-playground. Please open issues and pull requests in the main CopilotKit repository.