Initialize your agent project# If you don't already have a Python project set up, create one using uv:
uv init my-agent cd my-agent Install LangGraph and AG-UI# Add LangGraph and the required AG-UI packages to your project:
uv add langgraph copilotkit langchain-openai langchain-core python-dotenv Expose your agent via AG-UI# If you already have a LangGraph agent written, just reference the following code. In this step
we create a simple LangGraph agent for the sake of demonstration.
LangSmith FastAPI
First, we'll create a simple LangGraph agent:
from dotenv import load_dotenv from langchain_core.messages import SystemMessage from langchain_openai import ChatOpenAI from langgraph.graph import END , START , MessagesState, StateGraph load_dotenv() async def mock_llm (state: MessagesState): model = ChatOpenAI( model = "gpt-4.1-mini" ) system_message = SystemMessage( content = "You are a helpful assistant." ) response = await model.ainvoke( [ system_message, * state[ "messages" ], ] ) return { "messages" : response} graph = StateGraph(MessagesState) graph.add_node(mock_llm) graph.add_edge( START , "mock_llm" ) graph.add_edge( "mock_llm" , END ) graph = graph.compile() Then to test and deploy with LangSmith, we'll also need a langgraph.json
{ "python_version" : "3.12" , "dockerfile_lines" : [], "dependencies" : [ "." ], "package_manager" : "uv" , "graphs" : { "sample_agent" : "./main.py:graph" }, "env" : ".env" } First, add the ag-ui-langgraph package to your project:
uv add ag-ui-langgraph fastapi uvicorn copilotkit Then create a simple LangGraph agent, add a FastAPI app, and build attach our agent as an AG-UI endpoint.
import os from dotenv import load_dotenv from ag_ui_langgraph import add_langgraph_fastapi_endpoint from copilotkit import LangGraphAGUIAgent from fastapi import FastAPI from langgraph.graph import END , START , MessagesState, StateGraph from langchain_core.messages import SystemMessage from langchain_openai import ChatOpenAI from langgraph.checkpoint.memory import MemorySaver import uvicorn load_dotenv() async def mock_llm (state: MessagesState): model = ChatOpenAI( model = "gpt-4.1-mini" ) system_message = SystemMessage( content = "You are a helpful assistant." ) response = await model.ainvoke( [ system_message, * state[ "messages" ], ] ) return { "messages" : response} graph = StateGraph(MessagesState) graph.add_node(mock_llm) graph.add_edge( START , "mock_llm" ) graph.add_edge( "mock_llm" , END ) graph = graph.compile( checkpointer = MemorySaver() ) app = FastAPI() add_langgraph_fastapi_endpoint( app = app, agent = LangGraphAGUIAgent( name = "sample_agent" , description = "An example agent to use as a starting point for your own agent." , graph = graph, ), path = "/" , ) def main (): """Run the uvicorn server.""" uvicorn.run( "main:app" , host = "0.0.0.0" , port = 8123 , reload = True , ) if __name__ == "__main__" : main()
What is AG-UI?
AG-UI is an open protocol for frontend-agent communication.
Create a .env file in your agent directory and add your OpenAI API key:
OPENAI_API_KEY=your_openai_api_key
What about other models?
The starter template is configured to use OpenAI's GPT-4o by default, but you can modify it to use any language model supported by LangGraph.
Create your frontend# CopilotKit works with any React-based frontend. We'll use Next.js for this example.
npx create-next-app@latest frontend cd frontend Install CopilotKit packages# npm install @copilotkit/react-ui @copilotkit/react-core @copilotkit/runtime Setup Copilot Runtime# Create an API route to connect CopilotKit to your LangGraph agent:
mkdir -p app/api/copilotkit && touch app/api/copilotkit/route.ts LangSmith FastAPI
app/api/copilotkit/route.ts import { CopilotRuntime, ExperimentalEmptyAdapter, copilotRuntimeNextJSAppRouterEndpoint, } from "@copilotkit/runtime" ; import { LangGraphAgent } from "@copilotkit/runtime/langgraph" ; import { NextRequest } from "next/server" ; const serviceAdapter = new ExperimentalEmptyAdapter (); const runtime = new CopilotRuntime ({ agents: { sample_agent: new LangGraphAgent ({ deploymentUrl: process.env. LANGGRAPH_DEPLOYMENT_URL || "http://localhost:8123" , graphId: "sample_agent" , langsmithApiKey: process.env. LANGSMITH_API_KEY || "" , }), } }); export const POST = async ( req : NextRequest ) => { const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint ({ runtime, serviceAdapter, endpoint: "/api/copilotkit" , }); return handleRequest (req); }; app/api/copilotkit/route.ts import { CopilotRuntime, ExperimentalEmptyAdapter, copilotRuntimeNextJSAppRouterEndpoint, } from "@copilotkit/runtime" ; import { LangGraphHttpAgent } from "@copilotkit/runtime/langgraph" ; import { NextRequest } from "next/server" ; const serviceAdapter = new ExperimentalEmptyAdapter (); const runtime = new CopilotRuntime ({ agents: { sample_agent: new LangGraphHttpAgent ({ url: process.env. LANGGRAPH_DEPLOYMENT_URL || "http://localhost:8123" , }), } }); export const POST = async ( req : NextRequest ) => { const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint ({ runtime, serviceAdapter, endpoint: "/api/copilotkit" , }); return handleRequest (req); }; Wrap your application with the CopilotKit provider:
import { CopilotKit } from "@copilotkit/react-core/v2" ; import "@copilotkit/react-core/v2/styles.css" ; import './globals.css' ; // ... export default function RootLayout ({ children } : { children : React . ReactNode }) { return ( < html lang = "en" > < body > < CopilotKit runtimeUrl = "/api/copilotkit" agent = "sample_agent" > {children} </ CopilotKit > </ body > </ html > ); } Add the chat interface# Add the CopilotSidebar component to your page:
import { CopilotSidebar } from "@copilotkit/react-core/v2" ; export default function Page () { return ( < main > < h1 >Your App</ h1 > < CopilotSidebar /> </ main > ); } Start your agent# From your agent directory, start the agent server:
LangSmith FastAPI
cd .. npx @langchain/langgraph-cli dev --port 8123 --no-browser Your agent will be available at http://localhost:8123.
Start your UI# In a separate terminal, navigate to your frontend directory and start the development server: