You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
These docs assume you’ve been introduced to CopilotKit’s core concepts and components. If you’re new to CopilotKit, take a minute to go through the quickstart and [learn how to integrate CopilotKit into a React app](/quickstart).
13
+
At the moment CoAgents integrates with LangGraph-powered agents using **LangGraph-Python**. <br/>
14
+
(Support for LangGraph.js and LangGraph Cloud is coming soon!)
12
15
13
-
Also, at the moment CoAgents integrates with LangGraph-powered agents using their Python SDK. (Support for LangGraph JS and LangGraph Cloud are coming soon!)
14
16
15
-
This guide assumes you’re familiar with using LangGraph to build agent workflows. If you need a quick introduction, check out [this brief example from the LangGraph docs](https://docs.langgraph.ai/quickstart).
17
+
**For orientation, here's how CoAgents are wired:**
16
18
17
-
<Steps>
19
+
<CoAgentsDiagram />
18
20
19
21
22
+
<Callouttype="info">
23
+
This guide assumes you’re familiar with using LangGraph to build agent workflows. If you need a quick introduction, check out [this brief example from the LangGraph docs](https://docs.langgraph.ai/quickstart).
24
+
</Callout>
20
25
21
-
<Step>
22
26
23
-
## Setup a remote endpoint in Python + FastAPI
24
27
25
-
CoAgents require you to use a remote endpoint using Python, FastAPI, and the CopilotKit Python SDK; here's a basic example to get you started.
26
28
27
-
<Callout>
28
-
If you're starting from scratch or need more information, check out our [remote endpoint docs](/guides/backend-actions/remote-backend-endpoint) for a complete walkthrough.
29
-
</Callout>
30
29
31
-
In your Python project, install the CopilotKit SDK:
Then set up or update your FastAPI server to initialize our SDK and connect it to your LangGraph agent. In this example, we’re assuming a basic agent workflow is being exported from `agent.py` in the same directory as this server script.
32
+
<Steps>
38
33
39
-
```python filename="server.py" showLineNumbers
40
-
from fastapi import FastAPI
41
-
app = FastAPI()
42
-
43
-
# Import CopilotKit SDK and integrations
44
-
from copilotkit.integrations.fastapi import add_fastapi_endpoint
45
-
from copilotkit import CopilotKitSDK, LangGraphAgent
46
-
47
-
# Import your LangGraph agent; in this example, it's the variable
48
-
# named `basic_agent_graph` in ./agent.py
49
-
from .agent import basic_agent_graph
50
-
51
-
# Initialize the agent for use by CopilotKit; we'll name it "basic_agent"
52
-
basic_agent = LangGraphAgent(
53
-
name="basic_agent",
54
-
description="Agent that asks about the weather",
55
-
agent=basic_agent_graph,
56
-
)
57
-
58
-
# Next, initialize the SDK, passing in the agent
59
-
sdk = CopilotKitSDK(
60
-
agents=[
61
-
basic_agent
62
-
],
63
-
)
64
-
65
-
# Finally, add the remote actions endpoint to this API
Remember the name `basic_agent` as well as our API endpoint URL (`http://localhost:8000/copilotkit_remote`), we'll need them as we move on to integrating this agent into the frontend.
36
+
First, take a minute to **[go through the CopilotKit quickstart](/quickstart), and integrate CopilotKit into your React app.**
37
+
This should only take a minute.
70
38
71
39
</Step>
72
40
73
-
74
41
<Step>
75
-
## Self-host the Copilot Runtime
42
+
Then, setup a CopilotKit Remote-Endpoint using FastAPI. This endpoint will serve your LangGraph agent.
43
+
Follow the [Remote Endpoint quickstart](/guides/backend-actions/remote-backend-endpoint).
44
+
</Step>
76
45
77
-
To use your remote agent service, you’ll also need to self-host the CopilotRuntime service. (Support for CopilotCloud is coming soon.)
78
46
79
-
### Configure an AI service adapter
47
+
<Step>
80
48
81
-
First, we’ll create a new module file to initialize a runtime adapter for our LLM of choice, which we’ll put at `src/lib/serviceAdapter.ts`.
82
49
50
+
## Connect your FastAPI Remote Endpoint to a LangGraph agent
Remember the name `basic_agent` as well as our API endpoint URL (`http://localhost:8000/copilotkit_remote`), we'll need them as we move on to integrating this agent into the frontend.
122
90
123
-
Then create a new file called `src/lib/llmAdapter.ts`:
To use a different LLM provider, you can follow the `OpenAI` instructions, but adapt them to use one of the other available LLM adapters listed below:
141
-
142
-
<LLMAdapters />
143
-
</Tab>
144
-
145
-
</Tabs>
146
-
147
-
### Add a CopilotRuntime endpoint to your app
148
-
149
-
Next, you'll use the service adapter you created above to initialize a `CopilotRuntime` instance and add a new route to your app. Here are some examples for the most common Node server frameworks:
Next, create a new server route which will make the `CopilotRuntime` available at `/api/copilotkit` and ready to work with remote actions provided by our Python app.
156
-
157
-
Create a new file at `src/app/api/copilotkit/route.ts` and add this code:
Next, create a new server route which will make the `CopilotRuntime` available at `/api/copilotkit` and ready to work with remote actions provided by our Python app.
190
-
191
-
Create a new file at `src/pages/api/copilotkit.ts` and add this code:
Next, create a new route handler which will make the `CopilotRuntime` available at `/copilotkit` and ready to work with remote actions provided by our Python app:
227
-
228
-
```ts filename="server.ts" showLineNumbers
229
-
importexpressfrom'express';
230
-
import {
231
-
CopilotRuntime,
232
-
copilotRuntimeNodeHttpEndpoint,
233
-
} from'@copilotkit/runtime';
234
-
importllmAdapterfrom'@/lib/llmAdapter';
235
-
236
-
const app =express();
237
-
238
-
app.use('/copilotkit', (req, res, next) => {
239
-
240
-
const runtime =newCopilotRuntime({
241
-
remoteActions: [
242
-
{
243
-
url: `http://localhost:8000/copilotkit_remote`,
244
-
}
245
-
]
246
-
});
247
-
248
-
const handler =copilotRuntimeNodeHttpEndpoint({
249
-
endpoint: '/copilotkit',
250
-
runtime,
251
-
serviceAdapter: llmAdapter,
252
-
});
253
-
254
-
returnhandler(req, res, next);
255
-
});
256
-
257
-
app.listen(4000, () => {
258
-
console.log('Listening at http://localhost:4000/copilotkit');
259
-
});
260
-
```
261
-
</Tab>
262
-
</Tabs>
263
93
264
94
265
-
</Step>
95
+
<Step>
266
96
97
+
## Agent-lock your Copilot to the `base_agent` agent.
267
98
268
-
<Step>
99
+
CopilotKit supports router-mode as well as agent-lock mode. For more detail see [router-mode / agent-mode](/coagents/advanced/router-mode-agent-lock).
269
100
270
-
## Integrate agents into your CopilotKit frontend app
101
+
For simplicity, wel'll use agent-lock mode in these tutorials, but in production use-cases you will likely want to use router-mode.
271
102
272
-
Once you've set up your agents, registered them with CopilotKit on the Python side, and mounted the CopilotRuntime within your app, all that's left is to hook this up to your frontend using the `<CopilotKit />` component.
103
+
Lock the Copilot to the `basic_agent` setup earlier. This means every single interaction with the Copilot will be forwarded to the locked agent.
273
104
274
105
```tsx filename="src/page.tsx"
275
106
// This UI will now invoke our AI agent, not just the LLM
@@ -283,13 +114,11 @@ Once you've set up your agents, registered them with CopilotKit on the Python si
283
114
</CopilotKit>
284
115
```
285
116
286
-
By passing in the `agent` prop, we're telling CopilotKit to go into "agent lock" mode, and only use the `basic_agent` we set up earlier. To customize this behavior, see our docs about [router mode](/coagents/advanced/router-mode-agent-lock).
287
-
288
-
Any of CopilotKit's pre-built components can be used to interact with CoAgents, and you can also use agent-specific hooks in your custom UI components to enable powerful new workflows.
289
-
290
117
</Step>
291
118
</Steps>
292
119
120
+
🎉 Congrats! You've successfully integrated a LangGraph agent chatbot to your application! Give it a try now and see it in action.
0 commit comments