Generative UI Playground
Interact with all three types of generative UI, all in one interface
What is Generative UI Playground?
Generative UI Playground is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to interact with all three types of generative ui, all in one interface
Interact with all three types of generative UI, all in one interface
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Interact with all three types of generative UI, all in one i
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx generative-ui-playgroundConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Generative UI Playground
Generative UI Playground is a demonstration project by CopilotKit that showcases all three emerging patterns for AI-generated user interfaces — Static GenUI, MCP Apps (sandboxed iframes), and A2UI (agent-composed JSON UI) — within a single Next.js application. It provides a working reference implementation using CopilotKit, React, and an A2A agent so developers can explore and compare the different approaches to building AI-powered dynamic interfaces. The project is a learning and prototyping tool rather than a standalone MCP server you deploy in production.
Prerequisites
- Node.js 18 or later and npm installed
- Python 3.9 or later with pip (for the A2A agent component)
- An OpenAI API key (OPENAI_API_KEY) for the AI backend
- Basic familiarity with Next.js and React
Clone the repository
Clone the CopilotKit generative-ui-playground repository to your local machine and navigate into it.
git clone https://github.com/CopilotKit/generative-ui-playground.git
cd generative-ui-playgroundInstall frontend dependencies
Install the Next.js frontend dependencies from the project root.
npm installInstall MCP server dependencies
Install dependencies for the built-in MCP server that powers the MCP Apps iframe UI pattern.
cd mcp-server
npm install
cd ..Install A2A agent dependencies
Install the Python dependencies for the A2A agent that powers the A2UI pattern.
cd a2a-agent
pip install -e .
cd ..Set environment variables
Create a .env.local file (or export variables) with your OpenAI key and the local service URLs for the MCP server and A2A agent.
OPENAI_API_KEY=your-openai-api-key
MCP_SERVER_URL=http://localhost:3001/mcp
A2A_AGENT_URL=http://localhost:10002Start all three services
Run each service in a separate terminal. The MCP server listens on port 3001, the A2A agent on port 10002, and the Next.js frontend on port 3000.
# Terminal 1 - MCP server
cd mcp-server && npm run dev
# Terminal 2 - A2A agent
cd a2a-agent && python -m agent
# Terminal 3 - Next.js frontend
npm run devGenerative UI Playground Examples
Client configuration
Environment variables needed to run the playground locally.
{
"env": {
"OPENAI_API_KEY": "your-openai-api-key",
"MCP_SERVER_URL": "http://localhost:3001/mcp",
"A2A_AGENT_URL": "http://localhost:10002"
}
}Prompts to try
Example prompts to explore the three generative UI patterns in the playground.
- "What's the weather in Tokyo?" (triggers Static GenUI weather card component)
- "Get the stock price for AAPL" (triggers Static GenUI stock display component)
- "Search for flights to Paris next Friday" (triggers MCP App flight booking iframe)
- "Find Italian restaurants near downtown Seattle" (triggers A2UI restaurant finder)
- "Book a table for 4 people at 7pm" (triggers A2UI booking form with human-in-the-loop approval)Troubleshooting Generative UI Playground
MCP App iframes fail to load or show blank content
Ensure the mcp-server is running on port 3001 and MCP_SERVER_URL is set correctly. Check the browser console for CORS errors — the MCP server must be running before starting the Next.js frontend.
A2UI responses return errors about the A2A agent
Verify the A2A agent Python service is running: cd a2a-agent && python -m agent. Confirm A2A_AGENT_URL=http://localhost:10002 is set in your environment. The agent must be healthy before queries that trigger A2UI will work.
OpenAI API errors or empty AI responses
Check that OPENAI_API_KEY is set and valid. The key must have access to the models used by CopilotKit. Verify with: echo $OPENAI_API_KEY in your terminal before starting the services.
Frequently Asked Questions about Generative UI Playground
What is Generative UI Playground?
Generative UI Playground is a Model Context Protocol (MCP) server that interact with all three types of generative ui, all in one interface It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Generative UI Playground?
Follow the installation instructions on the Generative UI Playground GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Generative UI Playground?
Generative UI Playground works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Generative UI Playground free to use?
Yes, Generative UI Playground is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Generative UI Playground Alternatives — Similar Developer Tools Servers
Looking for alternatives to Generative UI Playground? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Generative UI Playground in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Generative UI Playground?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.