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-playgroundGuides for using ai agents skills like generative-ui-playground.
Last scanned: 5/30/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-05-30T16:32:25.116Z",
"npmAuditRan": false,
"pipAuditRan": true
}generative-ui-playground is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by CopilotKit. Interact with all three types of generative UI, all in one interface. It has 120 GitHub stars.
Yes. generative-ui-playground passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
Clone the repository with "git clone https://github.com/CopilotKit/generative-ui-playground" and add it to your Claude Code skills directory (see the Installation section above).
generative-ui-playground is primarily written in HTML. It is open-source under CopilotKit on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh generative-ui-playground against similar tools.
No comments yet. Be the first to share your thoughts!
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.
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 ..
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.