AI UI Demos

What it does

AI UI Demos is a Next.js showcase application that teaches five distinct approaches to building AI-powered user interfaces — from high-level frameworks down to raw MCP protocol. Each demo is a working application with its own UI pattern, making it ideal for developers evaluating AI UI architectures.

Key features

• Demo 1 — Trip Planner (CopilotKit): Bidirectional AI state sync via useCopilotReadable and useCopilotAction; natural language itinerary editing
• Demo 2 — Recipe Explorer (Vercel AI SDK): Streaming generative UI — the AI renders rich React recipe cards inline in the chat
• Demo 3 — Story Builder (AG-UI Protocol): Raw SSE event stream with a live debug panel showing all 17 typed AG-UI event types in real time
• Demo 4 — Interactive Story (Declarative A2UI): Separates business logic (handler) from UI rendering (render) using the declarative A2UI pattern
• Demo 5 — MCP Apps System Monitor: True MCP Apps pattern — an HTTP MCP server exposes a ui:// resource rendered in a sandboxed iframe with live CPU/memory polling every 2 seconds

Installation

Self-hosted — clone and run locally:

git clone https://github.com/rondagdag/ai-ui-demos
cd ai-ui-demos
npm install
cd mcp-server && npm install && npm run build && npm run build:ui && cd ..
cp .env.example .env.local
# Add OPENAI_API_KEY to .env.local
npm run dev

Visit http://localhost:3000. The MCP HTTP server starts automatically on port 3001.

There is no hosted version or Claude Desktop config — this is a local dev/educational project.

Supported hosts

Self-hosted Next.js app. Demo 5 uses the MCP Apps protocol (HTTP transport) with CopilotKit as the client. No standard MCP client config applies.