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
Copy file name to clipboardExpand all lines: docs/content/docs/coagents/chat-ui/chat-with-agent.mdx
+10-3Lines changed: 10 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,16 @@ title: Chat with an agent
4
4
5
5
No need to do anything else -- chat with an agent Just Works!
6
6
7
-
TODO: add gif.
8
-
9
7
If you've followed the quickstarts / getting-started, you should already have Copilot UI integrated in your app connected to a LangGraph agent.
10
8
**Simply write a message and observe the agent responding back! 🎉**
11
9
12
-
You can of course use any of the [built-in Copilot UI components](/guides/custom-look-and-feel/built-in-ui-components), [headless UI](/guides/custom-look-and-feel/headless-ui), etc.
10
+
You can of course use any of the [built-in Copilot UI components](/guides/custom-look-and-feel/built-in-ui-components), [headless UI](/guides/custom-look-and-feel/headless-ui), etc.
On the frontend, you simply create a `useCopilotAction` which takes the same parameters emitted by the LangGraph tool call, with a `renderAndWait` argument.
11
-
When the `handler` block given to `renderAndWait` is called, the result is propagated back to the LangGraph.
12
-
13
-
TODO: add gif.
14
16
15
17
## Agentic Frontend
16
18
17
-
Use `useCopilotAction` with `renderAndWait` to present a custom UI for user approval.
19
+
<Steps>
20
+
21
+
<Step>
22
+
23
+
### Add `useCopilotAction` with `renderAndWait` to a component loaded into the view hierarchy while the agent is executing.
18
24
19
25
```tsx filename="app/Mailer.tsx"
20
26
"use client"; // only necessary if you are using Next.js with the App Router. // [!code highlight]
@@ -48,9 +54,42 @@ export function Mailer() {
48
54
</div>
49
55
);
50
56
}
51
-
52
-
// EmailApprovalComponent is a custom component for approval UI
53
57
```
58
+
</Step>
59
+
60
+
<Step>
61
+
### Return any custom React component from the `renderAndWait` function
62
+
63
+
You can return any custom React component from the `renderAndWait` function.
64
+
The agent will not continue executing until the `handler` function provided via the `renderAndWait` arguments is called.
65
+
66
+
`args` contains the parameters specified shortly above it; the parameters will be streamed as they come in.
67
+
68
+
<Callouttype="warn">
69
+
Please note that while `status` is `executing`, `handler` will be `undefined` <br/>
70
+
You can call it either by checking if it is `undefined`, or by using this format <br/>
71
+
`handler?.(argumentToPassHandler)`.
72
+
</Callout>
73
+
74
+
<Callouttype="info">
75
+
Whatever argument you pass to the `handler` will become available on the agentic backend. This allows you to pass information from the frontend to the agent, enabling seamless communication between the user interface and the backend logic.
76
+
</Callout>
77
+
78
+
</Step>
79
+
80
+
<Step>
81
+
### Record the action **name** and **parameters**.
82
+
Record the action name & parameters. They must match the configuration we will soon setup on the agentic backend.
83
+
84
+
In this case, the action name is `EmailTool`. It has a single parameter `email_draft` of type `string`.
The render function can return any valid React node; you can use your own components to display the agent's state.
52
59
60
+
---
61
+
53
62
## ⚠️ IMPORTANT! Stream & render the intermediate agent state
54
63
By default, the LangGraph agent state will only update *between* LangGraph node transitions --
55
64
which means state updates will be discontinuous and delayed.
56
65
57
66
You likely want to render the agent state as it updates **continuously.** See **[stream intermediate state](/coagents/advanced/intermediate-state-streaming).**
58
67
68
+
---
59
69
60
70
## Developer experience: using typed state with generics
Copy file name to clipboardExpand all lines: docs/content/docs/coagents/index.mdx
+48-6Lines changed: 48 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
-
title: Introduction to CoAgents
3
-
description: Everything you need to deeply integrate LangGraph agents into react applications.
2
+
title: Intro to CoAgents (Public Beta)
3
+
description: Everything you need to build Agent-Native applications powered by CopilotKit & LangGraph. The building blocks for the next generation of AI-native apps.
4
4
5
5
---
6
6
@@ -24,18 +24,60 @@ import { DynamicContentWrapper } from "@/components/react/dynamic-content-wrappe
24
24
/>
25
25
</Frame>
26
26
27
-
CopilotKit's CoAgents provides everything you need to deeply integrate LangGraph agents into react applications.
27
+
28
+
CopilotKit's CoAgents provides everything you need to deeply integrate LangGraph agents into react applications-
CoAgents empowers you to rapidly build powerful AI-native applications, similar to Replit Agent, v0, and OpenAI's Canvas. By combining LangGraph for reliable AI agents with CopilotKit's CoAgents extension for in-app Agent integration, you can create sophisticated AI-driven experiences.
66
+
67
+
### Key Features
68
+
69
+
-**__Shared State:__** Seamlessly synchronize state between agents and your application, enabling real-time interactions and updates. With a single line of code, your application can see everything the agent is doing, and the agent can see everything that happens inside the application.
70
+
71
+
-**__Agentic Generative UI:__** Create dynamic, AI-generated user interfaces that adapt to user needs and agent outputs. Unlike traditional generative UI, agentic generative UI is based on the agent's state, providing users with visibility into what the agent is doing and building trust.
72
+
73
+
-**__Stream Intermediate Agent State:__** Visualize agent thought processes in real-time, providing transparency and engaging user experiences. This is crucial for agent performance and for UX which matches user expectations.
74
+
75
+
-**__Human-in-the-Loop:__** Seamlessly integrate human oversight and intervention into your AI workflows for enhanced accuracy and control. Specify breakpoints in the agent process where human input or approval is required, allowing for greater safety and better agent performance.
76
+
77
+
-**__Realtime Frontend Actions:__** Provide your agent with frontend & backend actions available based on user context and current application state. These tool calls are automatically propagated as needed, with support for generative UI.
78
+
79
+
With CoAgents, you can harness the power of AI to create intelligent, responsive, and user-centric applications that push the boundaries of what's possible in software development.
0 commit comments