Skip to main content
CopilotKit provides a rich set of examples demonstrating real-world use cases and best practices. Each example includes complete source code, setup instructions, and detailed explanations of key concepts.

Travel Planner

AI-powered travel planner with multi-agent coordination, human-in-the-loop workflows, and real-time map visualization

Chat with Your Data

Interactive dashboard assistant that answers questions about data using natural language

State Machine Copilot

Multi-stage conversational flows with state management for complex user journeys

Form Filling Assistant

Transform tedious form-filling into natural conversations with AI assistance

​
Example Categories

​
Multi-Agent Systems

Learn how to build sophisticated AI applications with multiple coordinating agents:
  • Travel Planner - Multi-agent system with LangGraph integration, Google Maps API, and human-in-the-loop workflows

​
Generative UI

Build dynamic, AI-generated user interfaces:

​
Human-in-the-Loop

Implement approval workflows and user confirmation patterns:
  • Form Filling - AI assistant that helps users complete forms through conversation
  • Travel Planner - Review and approve AI-suggested trip changes

​
Shared State Management

Synchronize state between your UI and AI agents:

​
Chat Applications

Build conversational interfaces for various use cases:

​
Quick Start

All examples are available in the CopilotKit GitHub repository: 
# Clone the repository
git clone https://github.com/CopilotKit/CopilotKit.git
cd CopilotKit/examples

# Navigate to an example
cd v1/travel

# Install dependencies
pnpm install

# Set up environment variables
cp .env.example .env
# Edit .env with your API keys

# Run the example
pnpm dev

​
Example Structure

Most examples follow a consistent structure: 
example-name/
├── app/                  # Next.js app directory
│   ├── api/
│   │   └── copilotkit/  # CopilotKit runtime endpoint
│   ├── layout.tsx       # CopilotKit provider setup
│   └── page.tsx         # Main application page
├── components/          # React components
│   ├── generative-ui/   # Custom generative UI components
│   └── ui/             # UI components
├── lib/                # Utilities and hooks
│   ├── hooks/          # Custom CopilotKit hooks
│   └── types/          # TypeScript types
├── agent/              # Agent code (if applicable)
│   └── src/           # LangGraph agent implementation
└── README.md          # Setup and usage instructions

​
Prerequisites

Most examples require:
  • Node.js 18+ for the frontend
  • npm, yarn, or pnpm package manager
  • OpenAI API Key for LLM access
  • Python 3.11+ (for examples with LangGraph agents)
Some examples may require additional API keys (Google Maps, Tavily, etc.).

​
Live Demos

Try the examples online without any setup:

​
What You’ll Learn

Each example demonstrates different CopilotKit capabilities:

​
Core Concepts

  • Setting up CopilotKit provider
  • Configuring the runtime endpoint
  • Using useAgentContext for context
  • Implementing useFrontendTool for agent actions

​
Advanced Features

  • Building multi-agent systems with LangGraph
  • Implementing human-in-the-loop workflows
  • Creating generative UI components
  • Managing shared state between UI and agents
  • Streaming intermediate agent state
  • Custom chat suggestions

​
Integration Patterns

  • Next.js App Router integration
  • Backend actions with secure API calls
  • Custom LLM providers (OpenAI, Anthropic)
  • Third-party API integration (Google Maps, Tavily)
  • Vector databases (Pinecone, MongoDB Atlas)

​
Getting Help

If you run into issues with any example:
  1. Check the example’s README for troubleshooting tips
  2. Visit the CopilotKit Documentation
  3. Join the CopilotKit Discord
  4. Open an issue on GitHub

​
Contributing

Examples are a great way to contribute to CopilotKit! If you’ve built something interesting:
  1. Fork the repository
  2. Create your example following the standard structure
  3. Add comprehensive documentation
  4. Submit a pull request
See the Contributing Guide for more details.