showcase/shell-docs/src/content/docs/integrations/langgraph/troubleshooting/migrate-to-agui.mdx
AG-UI is the new agent-to-UI protocol used in CopilotKit. It already integrates with LangGraph agents.
This guide shows how to make the transition.
<TailoredContent
className="step"
id="deployment"
header={
<div>
<p className="text-xl font-semibold">Choose how your agent is served</p>
</div>
}
>
<TailoredContentOption
id="lgp"
title="LangGraph Platform"
description="I am using LangGraph's Platform to serve my agent (cloud or self hosted)."
>
### Change your current CopilotRuntime instantiation from
```typescript
let runtime = new CopilotRuntime({
remoteEndpoints: [
langGraphPlatformEndpoint({
deploymentUrl: "https://your-deployment-url",
langsmithApiKey: '<langsmith API key>', // optional
agents: [], // Your previous agents definition
})
],
})
```
To
```typescript
let runtime = new CopilotRuntime({
agents: {
'sample_agent': new LangGraphAgent({
deploymentUrl: "https://your-deployment-url",
langsmithApiKey: '<langsmith API key>', // optional
graphId: 'sample_agent', // Identical to what is defined in the `langgraph.json` graphs config.
}),
}
})
```
And that's it! You're all set!
</TailoredContentOption>
<TailoredContentOption
id="fastapi"
title="Self hosted (FastAPI)"
description="I am self hosting my agent, and serving it through FastAPI."
>
Assuming your Python agent setup is as follows:
from fastapi import FastAPI
from copilotkit.integrations.fastapi import add_fastapi_endpoint
from copilotkit import CopilotKitRemoteEndpoint, LangGraphAgent
from .agent import graph
app = FastAPI()
sdk = CopilotKitRemoteEndpoint(
agents=[
LangGraphAgent(
name="sample_agent",
description="my agent",
graph=graph,
),
],
)
add_fastapi_endpoint(app, sdk, "/copilotkit")
To migrate, import and use the new endpoint initializer and agent classes. Everything else (mainly your graph) stays the same.
<Steps> <Step> ### First, migrate your FastAPI endpoint to use the new agent class ```python from fastapi import FastAPI from copilotkit import LangGraphAGUIAgent from ag_ui_langgraph import add_langgraph_fastapi_endpoint from .agent import graph app = FastAPI()
add_langgraph_fastapi_endpoint(
app=app,
agent=LangGraphAGUIAgent(
name="sample_agent",
description="my agent",
graph=graph,
),
path="/agent/sample_agent" # Agent will be served at this path. Use "/" to mount at root.
)
```
</Step>
<Step>
### Then, in your `CopilotRuntime` instantiation, use the new `LangGraphHttpAgent`
```typescript
let runtime = new CopilotRuntime({
agents: {
'sample_agent': new LangGraphHttpAgent({
url: "http://localhost:8000/agent/sample_agent",
}),
}
})
```
</Step>