@copilotkit/react-ui 1.9.3-next.3 → 1.9.3-next.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/README.md +124 -29
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# ui
|
|
2
2
|
|
|
3
|
+
## 1.9.3-next.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [f83bda0]
|
|
8
|
+
- @copilotkit/react-core@1.9.3-next.4
|
|
9
|
+
- @copilotkit/runtime-client-gql@1.9.3-next.4
|
|
10
|
+
- @copilotkit/shared@1.9.3-next.4
|
|
11
|
+
|
|
3
12
|
## 1.9.3-next.3
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -1,46 +1,141 @@
|
|
|
1
|
-
|
|
2
|
-
<a href="https://copilotkit.ai" target="_blank">
|
|
3
|
-
<img src="https://github.com/copilotkit/copilotkit/raw/main/assets/banner.png" alt="CopilotKit Logo">
|
|
4
|
-
</a>
|
|
5
|
-
|
|
6
|
-
<br/>
|
|
7
|
-
|
|
8
|
-
<strong>
|
|
9
|
-
CopilotKit is the open-source framework for integrating powerful AI Copilots into any application. Easily implement custom AI Chatbots, AI Agents, AI Textareas, and more.
|
|
10
|
-
</strong>
|
|
11
|
-
</div>
|
|
1
|
+
# CopilotKit - React UI
|
|
12
2
|
|
|
13
|
-
<
|
|
3
|
+
<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />
|
|
14
4
|
|
|
15
|
-
<
|
|
5
|
+
<br>
|
|
6
|
+
<div align="center" style="display:flex;justify-content:center;gap:16px;height:20px;margin: 0;">
|
|
16
7
|
<a href="https://www.npmjs.com/package/@copilotkit/react-core" target="_blank">
|
|
17
|
-
<img src="https://img.shields.io/npm/v/%40copilotkit%2Freact-
|
|
8
|
+
<img src="https://img.shields.io/npm/v/%40copilotkit%2Freact-ui?logo=npm&logoColor=%23FFFFFF&label=Version&color=%236963ff" alt="NPM">
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://github.com/copilotkit/copilotkit/blob/main/LICENSE" target="_blank">
|
|
11
|
+
<img src="https://img.shields.io/github/license/copilotkit/copilotkit?color=%236963ff&label=License" alt="MIT">
|
|
18
12
|
</a>
|
|
19
|
-
<img src="https://img.shields.io/github/license/copilotkit/copilotkit?color=%236963ff&label=License" alt="MIT">
|
|
20
13
|
<a href="https://discord.gg/6dffbvGU3D" target="_blank">
|
|
21
14
|
<img src="https://img.shields.io/discord/1122926057641742418?logo=discord&logoColor=%23FFFFFF&label=Discord&color=%236963ff" alt="Discord">
|
|
22
15
|
</a>
|
|
23
16
|
</div>
|
|
24
17
|
<br/>
|
|
25
|
-
|
|
26
18
|
<div align="center">
|
|
27
|
-
<a href="https://
|
|
28
|
-
<img src="https://
|
|
29
|
-
</a>
|
|
30
|
-
<a href="https://docs.copilotkit.ai?ref=github_readme" target="_blank">
|
|
31
|
-
<img src="https://github.com/copilotkit/copilotkit/raw/main/assets/btn_docs.png" alt="CopilotKit GitHub" height="40px">
|
|
32
|
-
</a>
|
|
33
|
-
<a href="https://cloud.copilotkit.ai?ref=github_readme" target="_blank">
|
|
34
|
-
<img src="https://github.com/copilotkit/copilotkit/raw/main/assets/btn_cloud.png" alt="CopilotKit GitHub" height="40px">
|
|
19
|
+
<a href="https://www.producthunt.com/posts/copilotkit" target="_blank">
|
|
20
|
+
<img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=428778&theme=light&period=daily">
|
|
35
21
|
</a>
|
|
36
22
|
</div>
|
|
37
23
|
|
|
38
|
-
|
|
24
|
+
## ✨ Why CopilotKit?
|
|
39
25
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
26
|
+
- Minutes to integrate - Get started quickly with our CLI
|
|
27
|
+
- Framework agnostic - Works with React, Next.js, AGUI and more
|
|
28
|
+
- Production-ready UI - Use customizable components or build with headless UI
|
|
29
|
+
- Built-in security - Prompt injection protection
|
|
30
|
+
- Open source - Full transparency and community-driven
|
|
31
|
+
|
|
32
|
+
<img src="https://github.com/user-attachments/assets/6cb425f8-ffcb-49d2-9bbb-87cab5995b78" alt="class-support-ecosystem" style="border-radius: 12px; border: 2px solid #d6d4fa;">
|
|
33
|
+
|
|
34
|
+
## 🧑💻 Real life use cases
|
|
35
|
+
|
|
36
|
+
<span>Deploy deeply-integrated AI assistants & agents that work alongside your users inside your applications.</span>
|
|
37
|
+
|
|
38
|
+
<img src="https://github.com/user-attachments/assets/3b810240-e9f8-43ae-acec-31a58095e223" alt="headless-ui" style="border-radius: 12px; border: 2px solid #d6d4fa;">
|
|
39
|
+
|
|
40
|
+
## 🖥️ Code Samples
|
|
41
|
+
|
|
42
|
+
<span>Drop in these building blocks and tailor them to your needs.</span>
|
|
43
|
+
|
|
44
|
+
<h3>Build with Headless APIs and Pre-Built Components</h3>
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
// Headless UI with full control
|
|
48
|
+
const { visibleMessages, appendMessage, setMessages, ... } = useCopilotChat();
|
|
49
|
+
|
|
50
|
+
// Pre-built components with deep customization options (CSS + pass custom sub-components)
|
|
51
|
+
<CopilotPopup
|
|
52
|
+
instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
|
|
53
|
+
labels={{ title: "Popup Assistant", initial: "Need any help?" }}
|
|
54
|
+
/>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
// Frontend actions + generative UI, with full streaming support
|
|
59
|
+
useCopilotAction({
|
|
60
|
+
name: "appendToSpreadsheet",
|
|
61
|
+
description: "Append rows to the current spreadsheet",
|
|
62
|
+
parameters: [
|
|
63
|
+
{ name: "rows", type: "object[]", attributes: [{ name: "cells", type: "object[]", attributes: [{ name: "value", type: "string" }] }] }
|
|
64
|
+
],
|
|
65
|
+
render: ({ status, args }) => <Spreadsheet data={canonicalSpreadsheetData(args.rows)} />,
|
|
66
|
+
handler: ({ rows }) => setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] }),
|
|
67
|
+
});
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
<h3>Integrate In-App CoAgents with LangGraph</h3>
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
// Share state between app and agent
|
|
74
|
+
const { agentState } = useCoAgent({
|
|
75
|
+
name: "basic_agent",
|
|
76
|
+
initialState: { input: "NYC" }
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
// agentic generative UI
|
|
80
|
+
useCoAgentStateRender({
|
|
81
|
+
name: "basic_agent",
|
|
82
|
+
render: ({ state }) => <WeatherDisplay {...state.final_response} />,
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
// Human in the Loop (Approval)
|
|
86
|
+
useCopilotAction({
|
|
87
|
+
name: "email_tool",
|
|
88
|
+
parameters: [
|
|
89
|
+
{
|
|
90
|
+
name: "email_draft",
|
|
91
|
+
type: "string",
|
|
92
|
+
description: "The email content",
|
|
93
|
+
required: true,
|
|
94
|
+
},
|
|
95
|
+
],
|
|
96
|
+
renderAndWaitForResponse: ({ args, status, respond }) => {
|
|
97
|
+
return (
|
|
98
|
+
<EmailConfirmation
|
|
99
|
+
emailContent={args.email_draft || ""}
|
|
100
|
+
isExecuting={status === "executing"}
|
|
101
|
+
onCancel={() => respond?.({ approved: false })}
|
|
102
|
+
onSend={() =>
|
|
103
|
+
respond?.({
|
|
104
|
+
approved: true,
|
|
105
|
+
metadata: { sentAt: new Date().toISOString() },
|
|
106
|
+
})
|
|
107
|
+
}
|
|
108
|
+
/>
|
|
109
|
+
);
|
|
110
|
+
},
|
|
111
|
+
});
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
```ts
|
|
115
|
+
// intermediate agent state streaming (supports both LangGraph.js + LangGraph python)
|
|
116
|
+
const modifiedConfig = copilotKitCustomizeConfig(config, {
|
|
117
|
+
emitIntermediateState: [{
|
|
118
|
+
stateKey: "outline",
|
|
119
|
+
tool: "set_outline",
|
|
120
|
+
toolArgument: "outline"
|
|
121
|
+
}],
|
|
122
|
+
});
|
|
123
|
+
const response = await ChatOpenAI({ model: "gpt-4o" }).invoke(messages, modifiedConfig);
|
|
124
|
+
```
|
|
125
|
+
## 🏆 Featured Examples
|
|
126
|
+
|
|
127
|
+
<p align="center">
|
|
128
|
+
<a href="https://www.copilotkit.ai/examples/form-filling-copilot">
|
|
129
|
+
<img src="https://github.com/user-attachments/assets/874da84a-67ff-47fa-a6b4-cbc3c65eb704" width="300" style="border-radius: 16px;" />
|
|
130
|
+
</a>
|
|
131
|
+
<a href="https://www.copilotkit.ai/examples/state-machine-copilot">
|
|
132
|
+
<img src="https://github.com/user-attachments/assets/0b5e45b3-2704-4678-82dc-2f3e1c58e2dd" width="300" style="border-radius: 16px;" />
|
|
133
|
+
</a>
|
|
134
|
+
<a href="https://www.copilotkit.ai/examples/chat-with-your-data">
|
|
135
|
+
<img src="https://github.com/user-attachments/assets/0fed66be-a4c2-4093-8eab-75c0b27a62f6" width="300" style="border-radius: 16px;" />
|
|
136
|
+
</a>
|
|
137
|
+
</p>
|
|
43
138
|
|
|
44
|
-
|
|
139
|
+
## Documentation
|
|
45
140
|
|
|
46
141
|
To get started with CopilotKit, please check out the [documentation](https://docs.copilotkit.ai).
|
package/package.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"publishConfig": {
|
|
10
10
|
"access": "public"
|
|
11
11
|
},
|
|
12
|
-
"version": "1.9.3-next.
|
|
12
|
+
"version": "1.9.3-next.4",
|
|
13
13
|
"sideEffects": [
|
|
14
14
|
"**/*.css"
|
|
15
15
|
],
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"rehype-raw": "^7.0.0",
|
|
52
52
|
"remark-gfm": "^4.0.1",
|
|
53
53
|
"remark-math": "^6.0.0",
|
|
54
|
-
"@copilotkit/
|
|
55
|
-
"@copilotkit/runtime-client-gql": "1.9.3-next.
|
|
56
|
-
"@copilotkit/
|
|
54
|
+
"@copilotkit/shared": "1.9.3-next.4",
|
|
55
|
+
"@copilotkit/runtime-client-gql": "1.9.3-next.4",
|
|
56
|
+
"@copilotkit/react-core": "1.9.3-next.4"
|
|
57
57
|
},
|
|
58
58
|
"keywords": [
|
|
59
59
|
"copilotkit",
|