CopilotKit v1.50 + LangGraph Integration
December 11, 2025 · View on GitHub
Disclaimer: This project was vibe-coded. It works, it demos well, but it hasn't been battle-tested in production. Use at your own risk and expect rough edges.
Working demo with 3 integration patterns for CopilotKit v1.50-beta with Python LangGraph backends.
Version Compatibility
| Package | Version |
|---|---|
@copilotkit/react-core | ^1.50.0-beta.8 |
@copilotkit/react-ui | ^1.50.0-beta.8 |
@copilotkit/runtime | ^1.50.0-beta.8 |
@ag-ui/client | ^0.0.42 |
copilotkit (Python) | >=0.1.72 |
langgraph | >=1.0.3 |
See demo/frontend/package.json for exact versions.
Architecture
Frontend (Next.js) Backend (Python)
┌─────────────────────┐ ┌─────────────────────┐
│ CopilotKitProvider │ │ FastAPI │
│ └─ CopilotChat │──AG-UI/SSE──▶│ └─ LangGraph │
│ └─ useAgent() │ │ └─ ChatOpenAI│
└─────────────────────┘ └─────────────────────┘
Patterns
| Pattern | Use Case | File |
|---|---|---|
| Pattern 1 | Development - Direct AG-UI | demo/frontend/.../pattern1/page.tsx |
| Pattern 2 | Production - Next.js Proxy | demo/frontend/.../pattern2/page.tsx |
| Pattern 3 | Minimal - useSingleEndpoint | demo/frontend/.../pattern3/page.tsx |
Demo Source
All working code lives in demo/:
demo/
├── backend/
│ ├── main.py # FastAPI app
│ ├── graph.py # LangGraph workflow
│ ├── state.py # AgentState definition
│ └── copilotkit_v2.py # v2 single endpoint handler
└── frontend/
└── src/app/
├── lib/constants.ts # Config
├── pattern1/page.tsx # Direct AG-UI (self-contained)
├── pattern2/page.tsx # Next.js Proxy (self-contained)
├── pattern3/page.tsx # useSingleEndpoint (self-contained)
├── api/copilotkit/ # Proxy route (Pattern 2)
├── hooks/useThreadManager.ts # Thread persistence hook
└── components/PatternPage.tsx # Shared UI with tabs
Setup
-
Install dependencies:
cd demo/backend && uv sync cd demo/frontend && npm install -
Configure environment:
cp demo/backend/.env.example demo/backend/.env # Edit .env and add your OpenAI API key -
Run the demo:
cd demo && npx pm2 start ecosystem.config.js -
Open
http://localhost:3001
Stop with npx pm2 stop all. Logs with npx pm2 logs.