Agentic Generative UI with CopilotKit + LangGraph

A Next.js application demonstrating agentic generative UI using CopilotKit and LangGraph. The agent generates task plans and streams real-time progress updates to the frontend via the AG-UI protocol.

Based on this example.

📘 Read My Take

I wrote more about my thoughts for this work on my blog. Check it out and let me know what you think.

Features

• Real-time task progress streaming with visual step-by-step updates
• Self-hosted LangGraph agent (no external agent hosting service required)
• Custom, composable chat UI components

Prerequisites

• Node.js 18+
• Python 3.8+
• OpenAI API Key

Getting Started

1. Install dependencies:

pnpm install

1. Set up your OpenAI API key:

echo 'OPENAI_API_KEY=your-key-here' > agent/.env

1. Start the development server:

pnpm dev

This starts both the Next.js UI (port 3000) and the LangGraph agent server (port 8123).

Project Structure

├── src/app/           # Next.js frontend
│   ├── page.tsx       # Main chat interface
│   └── api/copilotkit # CopilotKit runtime endpoint
├── src/components/    # React components
│   └── chat/          # Chat UI components
└── agent/             # Python LangGraph agent
    ├── main.py        # FastAPI server
    └── src/agent.py   # Agent graph definition

Available Scripts

• pnpm dev - Start both UI and agent servers
• pnpm dev:ui - Start only the Next.js server
• pnpm dev:agent - Start only the LangGraph agent
• pnpm build - Build for production
• pnpm lint - Run ESLint

Documentation

• CopilotKit Docs
• LangGraph Docs

Troubleshooting

Agent connection issues: Ensure the agent is running on port 8123 and your OpenAI API key is set correctly in agent/.env.

Python dependency issues: Run pnpm install:agent to reinstall the agent's Python dependencies.