4d4bd19
CopilotKitDocs
  • Docs
  • Integrations
  • Reference
  • Free Developer Access
Get Started
QuickstartCoding Agents
Concepts
ArchitectureGenerative UI OverviewOSS vs Enterprise
Agentic Protocols
OverviewAG-UIAG-UI MiddlewareMCPA2A
Build Chat UIs
Prebuilt Components
CopilotChatCopilotSidebarCopilotPopup
Custom Look and Feel
CSS CustomizationSlots (Subcomponents)Fully Headless UIReasoning Messages
Multimodal AttachmentsVoice
Build Generative UI
Controlled
Tool-based Generative UITool RenderingState RenderingReasoning
Your Components
Display ComponentsInteractive Components
Declarative
A2UIDynamic Schema A2UIFixed Schema A2UI
Open-Ended
MCP Apps
Adding Agent Powers
Frontend ToolsShared State
Human-in-the-Loop
HITL OverviewPausing the Agent for InputHeadless Interrupts
Sub-AgentsAgent ConfigProgrammatic Control
Agents & Backends
Built-in Agent
Backend
Copilot RuntimeFactory ModeAG-UI
Runtime Server AdapterAuthentication
LangGraph (Python)
Your Components
Display-onlyInteractiveInterrupt-based
Shared state
Reading agent stateWriting agent stateInput/Output SchemasState streaming
ReadablesInterruptsConfigurableSubgraphsDeep Agents
Advanced
Disabling state streamingManually emitting messagesExiting the agent loop
Persistence
Loading Agent StateThreadsMessage Persistence
Videos
Video: Research Canvas
Error Debugging & ObservabilityCommon LangGraph issues
Troubleshooting Copilots
Migrate to AG-UI
Observe & Operate
InspectorVS Code Extension
Troubleshooting
Common Copilot IssuesError Debugging & ObservabilityDebug ModeAG-UI Event InspectorHook ExplorerError Observability Connectors
Enterprise
CopilotKit PremiumHow the Enterprise Intelligence Platform WorksHow Threads & Persistence WorkObservabilitySelf-Hosting IntelligenceThreads
Deploy
AWS AgentCore
What's New
Full MCP Apps SupportLangGraph Deep Agents in CopilotKitA2UI Launches with full AG-UI SupportCopilotKit v1.50Generative UI Spec SupportA2A and MCP Handshake
Migrate
Migrate to V2Migrate to 1.8.2
Other
Contributing
Code ContributionsDocumentation Contributions
Anonymous Telemetry
LangGraph (Python)Quickstart

Quickstart

Turn your LangGraph agent into an agent-native application in 10 minutes.

Prerequisites#

Before you begin, you'll need the following:

  • An OpenAI API key
  • Node.js 20+
  • Your favorite package manager
  • (Optional) A LangSmith API key - only required if using an existing LangGraph agent

Getting started#

Create a free account#

Sign up for a free developer account on our Enterprise Intelligence Platform to get a license key. You'll use it later to enable persistent threads, observability, and the inspector.

Choose your starting point#

You can either start fresh with our starter template or integrate CopilotKit into your existing LangGraph agent.

🎉 Start chatting!#

Your AI agent is now ready to use! Try asking it some questions:

Can you tell me a joke?

Can you help me understand AI?

What do you think about React?
Troubleshooting
  • If you're having connection issues, try using 0.0.0.0 or 127.0.0.1 instead of localhost
  • Make sure your agent folder contains a langgraph.json file
  • In the langgraph.json file, reference the path to a .env file
  • Check that your OpenAI API key is correctly set in the .env file
  • If using an existing agent, ensure your LangSmith API key is also configured
  • Make sure you're in the same folder as your langgraph.json file when running the langgraph dev command
  • "graph is nullish" error (JavaScript starters): This means the LangGraph CLI couldn't load your graph. Ensure the export name in your langgraph.json matches your code (e.g., "starterAgent": "./src/agent.ts:graph" requires export const graph = ... in agent.ts). Also verify all dependencies are installed with npm install in your agent directory.
  • Make sure the runtime endpoint path matches the runtimeUrl in your CopilotKit provider

Deploying to AWS?#

If you're planning to deploy your LangGraph agent to AWS Bedrock AgentCore, see the AgentCore deploy guide.

What's next?#

Now that you have your basic agent setup, explore these advanced features:

👤
Implement Human in the Loop
Allow your users and agents to collaborate together on tasks.
🔄
Utilize Shared State
Learn how to synchronize your agent's state with your UI's state, and vice versa.
🎨
Add some generative UI
Render your agent's progress and output in the UI.
🔧
Setup frontend actions
Give your agent the ability to call frontend tools, directly updating your application.