Fullstack Agents & Generative UI with AG-UI

An interactive conference talk, built as a web app. The slides are a React application with live, working agentic demos embedded directly in the deck — covering the AG-UI protocol and the full generative UI spectrum:

• Controlled generative UI — developer-defined components (pie chart, bar chart) the agent calls with data
• Declarative generative UI (A2UI) — the agent composes dashboards on the fly from a catalog of building blocks
• MCP Apps — third-party apps (e.g. Excalidraw) rendered inside your chat
• Open generative UI — the agent builds arbitrary UI from scratch in a sandbox
• Plus human-in-the-loop, frontend tools, and shared agent/user state

Everything runs locally: a Vite slide deck, a Next.js app with the CopilotKit runtime, and a Python LangGraph agent.

Prerequisites

You need three tools installed. Each line below checks if you have it, and the link installs it:

Tool	Check	Install
Node.js 20.9+	node --version	nodejs.org (LTS)
pnpm 9+	pnpm --version	npm install -g pnpm
uv (Python package manager)	uv --version	curl -LsSf https://astral.sh/uv/install.sh | sh

You do not need to install Python yourself — uv downloads the right Python version automatically.

You also need an OpenAI API key (platform.openai.com/api-keys).

Quick start

git clone https://github.com/CopilotKit/fullstack-agents-generative-ui-talk.git
cd fullstack-agents-generative-ui-talk

# 1. Install everything (JS packages + Python agent, in one step)
pnpm install

# 2. Add your OpenAI API key
cp .env.example .env
# ...then open .env and paste your key: OPENAI_API_KEY=sk-...

# 3. Run everything
pnpm dev

Wait until the terminal shows all three servers are up (~30 seconds), then open:

URL	What it is
http://localhost:5173	🎤 The talk — slide deck with embedded live demos
http://localhost:3000	The standalone demo app (same demos, full screen)
http://localhost:8123	The LangGraph agent API (backend, no UI)

Presenting the deck

• → / ← or click: next / previous slide
• The demo slides are live — type into the embedded chat and the agent responds for real
• Suggested prompts to try in the demos:
  • "Show me a pie chart of sales by region" (controlled generative UI)
  • "Show me a sales dashboard for the quarter" (declarative / A2UI)
  • "Create a diagram of a simple neural network" (MCP app — Excalidraw)
  • "Build me a calculator" (open generative UI)

How it fits together

apps/
├── slides/   Vite + React slide deck          → localhost:5173
├── app/      Next.js + CopilotKit runtime      → localhost:3000
└── agent/    LangGraph agent (Python, via uv)  → localhost:8123

The slides and the app both talk to the CopilotKit runtime (in the Next.js app), which connects to the LangGraph agent. MCP app demos use the hosted Excalidraw MCP server (https://mcp.excalidraw.com).

Troubleshooting

• WARN Issues with peer dependencies found during install — expected, safe to ignore.
• A port is already in use — free ports 3000, 5173, and 8123, then rerun pnpm dev (e.g. lsof -ti :3000 | xargs kill).
• Demos don't respond / errors in chat — almost always the API key. Make sure .env exists at the repo root and contains a valid OPENAI_API_KEY, then restart pnpm dev.
• uv: command not found during pnpm install — install uv (see Prerequisites), open a new terminal, and rerun pnpm install.
• Want to run pieces individually? — pnpm dev:slides, pnpm dev:app, pnpm dev:agent.

License

MIT