👋 Minimal CopilotKit + LangGraph Dojo

Get all AG-UI features betwen langgraph and copilotkit working with minimal cloud/framework dependencies.

Minimal Cloud Dependencies

• CopilitKit React without NextJS (Vite)
• Self Hosted CopilotKit Runtime with Node.js HTTP
• Self Hosted LangGraph Agent with FastAPI (LangGraph)

CopilotKit UI

• NextJS
• Vite

CopilotKit Connection

• Copilot Cloud
• Self-Hosted Copilot Runtime

Self Hosted Copilot Runtime

• Next.js App Router
• Next.js Page Router
• Node.js Express
• Node.js HTTP
• NestJS

LangGraph Language

• Python
• Typescript

LangGraph Agent

• Local (LangGraph Studio)
• Self hosted (FastAPI)
• LangGraph Platform

AG-UI Feature Checklist

Demonstrates:

• 🤖 Agentic Chat

  • Natural Conversation: Chat with your Copilot in a familiar chat interface,
  • Frontend Tool Execution: The Copilot can directly interacts with your UI by calling frontend functions,
  • Seamless Integration: Tools defined in the frontend and automatically discovered and made available to the agent,
  • Tool Based Generative UI - Frontend Rendering of Tool Calls: Backend tool calls are automatically rendered in the UI
  • Pause and Resume Control: Frontend tools can pause agent and agent resumes after user input

• 🚀 Agentic Generative UI

  • Real-time Status Updates: The Copilot provides live feedback as it works through complex tasks
  • Long-running Task Execution: See how agents can handle extended processes with continuous feedback
  • Dynamic UI Generation: The interface updates in real-time to reflect the agent's progress

• 🤝 Human In the Loop

  • Collaborative Planning: The Copilot generates task steps and lets you decide which ones to perform
  • Interactive Decision Making: Select or deselect steps to customize the execution plan
  • Adaptive Responses: The Copilot adapts its execution based on your choices, even handling missing steps

• 🍳 Shared State

  • Frontend → Agent: UI controls update the agent's context in real-time
  • Agent → Frontend: The Copilot's recipe creations instantly update the UI components

• 📝 Predictive State Updates Document Editor

  • Live Document Editing: Watch as your Copilot makes changes to a document in real-time
  • Diff Visualization: See exactly what's being changed as it happens
  • Streaming Updates: Changes are displayed character-by-character as the Copilot works

• 🪶 Tool-Based Generative UI

  • Frontend Rendering of Tool Calls: Backend tool calls are automatically rendered in the UI
  • Dynamic UI Generation: The UI updates in real-time as the agent generates content
  • Elegant Content Presentation: Complex structured data (haikus) are beautifully displayed

Project Structure

This monorepo contains 3 interconnected projects that work together to demonstrate CopilotKit and LangGraph integration:

• react-client: The frontend React application
• copilot-runtime-service: The CopilotKit runtime service
• lang-graph-service: The LangGraph agent service

All projects can be installed and run from the root directory using pnpm workspace commands.

graph TD
    RC[react-client]
    CR[copilot-runtime-service]
    LG[lang-graph-service]
    RC <--> CR
    CR <--> LG

Loading

1. Clone the repo:

   git clone https://github.com/jrhicks/minimal-copilotkit-langgraph.git
   cd lang-graph-copilotkit

2. Copy environment variables:

   cp lang-graph-service/.env.example lang-graph-service/.env
   # Edit lang-graph-service/.env and set your OPENAI_API_KEY and LANGSMITH_API_KEY

3. Install and start all services:

   pnpm install

   pnpm run dev

• React client: http://localhost:5173
• Copilot runtime: http://localhost:4000/copilotkit
• LangGraph agent: http://localhost:8000/copilotkit

---

Contributing

Contributions are welcome! I'm trying to get all the AG-UI features working. You can find many examples at: https://github.com/CopilotKit/CopilotKit/tree/main/examples

---

Environment Variables

• Copy .env.example to .env in lang-graph-service:

  cp lang-graph-service/.env.example lang-graph-service/.env

• Set your OPENAI_API_KEY and LANGSMITH_API_KEY in lang-graph-service/.env.

---

License

MIT