---
title: Migrate to AG-UI
description: Migration guide for agents streaming through the AG-UI protocol
icon: "lucide/RefreshCw"
---
import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
import {
    TailoredContent,
    TailoredContentOption,
} from "@/components/react/tailored-content.tsx";

AG-UI is the new agent-to-UI protocol used in CopilotKit.
It already integrates with LangChain 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
        import { langGraphPlatformEndpoint, CopilotRuntime } from "@copilotkit/runtime";

        let runtime = new CopilotRuntime({
            remoteEndpoints: [
                langGraphPlatformEndpoint({
                    deploymentUrl: "https://your-deployment-url",
                    langsmithApiKey: '<langsmith API key>', // optional
                    agents: [], // Your previous agents definition
                })
            ],
        })
        ```
        To
        ```typescript
        import { LangGraphAgent, CopilotRuntime } from "@copilotkit/runtime";

        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:
```python
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>
</Steps>
        <Accordions>
            <Accordion title="What about the old LangGraph config parameter which was used to configure the agent?">
                The `langgraph_config` option doesn’t exist on the new agent.
                Configure the agent via the `useCoAgent` hook or with the new `config` parameter on the agent class.
            </Accordion>
        </Accordions>
    </TailoredContentOption>
</TailoredContent>
