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 ..