1
// 传统方式：前端各种手动处理
2
const [messages, setMessages] = useState([]);
3
const [isLoading, setIsLoading] = useState(false);
4

5
async function sendMessage(text) {
6
  setIsLoading(true);
7

8
  // 手动管理聊天历史
9
  const newMessages = [...messages, { role: 'user', content: text }];
10
  setMessages(newMessages);
11

12
  // 手动调用后端 API
13
  const res = await fetch('/api/chat', {
14
    method: 'POST',
15
    body: JSON.stringify({ messages: newMessages })
16
  });
17

18
  // 手动处理流式响应
19
  const reader = res.body.getReader();
20
  // ... 一大堆处理流式数据的代码
21

22
  setIsLoading(false);
23
}

1
import { CopilotKit } from "@copilotkit/react-core";
2
import { CopilotSidebar } from "@copilotkit/react-ui";
3
import "@copilotkit/react-ui/styles.css";
4

5
function App() {
6
  return (
7
    <CopilotKit runtimeUrl="/api/copilotkit">
8
      <YourApp />
9
      <CopilotSidebar
10
        defaultOpen={true}
11
        // Agent 能直接操作前端组件状态！
12
        labels={{
13
          title: "AI 助手",
14
          initial: "你好！我是晨哥博客的 AI 助手，有什么想问的吗？"
15
        }}
16
      />
17
    </CopilotKit>
18
  );
19
}

1
import { useCoAgent, useCoAction } from "@copilotkit/react-core";
2

3
function BlogEditor() {
4
  const [posts, setPosts] = useState<Post[]>([]);
5
  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
6

7
  // 注册一个"前端工具"：AI 可以调用这个来编辑文章
8
  useCoAction({
9
    name: "editPost",
10
    description: "编辑指定的博客文章",
11
    parameters: [
12
      { name: "postId", type: "string", description: "文章 ID" },
13
      { name: "title", type: "string", description: "新标题（可选）" },
14
      { name: "content", type: "string", description: "新内容（可选）" }
15
    ],
16
    handler: async ({ postId, title, content }) => {
17
      setPosts(prev => prev.map(p =>
18
        p.id === postId
19
          ? { ...p, ...(title && { title }), ...(content && { content }) }
20
          : p
21
      ));
22
      return { success: true, message: "文章已更新" };
23
    }
24
  });
25

26
  // 注册"前端查询"：AI 可以从界面上读取数据
27
  useCoAction({
28
    name: "getPostStats",
29
    description: "获取博客统计数据",
30
    handler: async () => {
31
      return {
32
        totalPosts: posts.length,
33
        publishedPosts: posts.filter(p => !p.draft).length,
34
        draftPosts: posts.filter(p => p.draft).length,
35
        latestPost: posts.sort((a, b) =>
36
          new Date(b.published).getTime() - new Date(a.published).getTime()
37
        )[0]
38
      };
39
    }
40
  });
41

42
  return (
43
    <div>
44
      {/* 博客文章列表 */}
45
      <div className="grid gap-4">
46
        {posts.map(post => (
47
          <PostCard key={post.id} post={post} />
48
        ))}
49
      </div>
50
      {/* CopilotKit 嵌入的 AI 助手 */}
51
      <CopilotSidebar />
52
    </div>
53
  );
54
}

1
// Angular 版 CopilotKit
2
import { CopilotKitModule } from '@copilotkit/angular';
3

4
@Component({
5
  standalone: true,
6
  imports: [CopilotKitModule],
7
  template: `
8
    <copilotkit-root runtimeUrl="/api/copilotkit">
9
      <app-main />
10
      <copilotkit-chat />
11
    </copilotkit-root>
12
  `
13
})
14
export class AppComponent {}

1
// Slack 集成
2
import { CopilotKitSlack } from '@copilotkit/slack';
3

4
const slackApp = new CopilotKitSlack({
5
  runtimeUrl: "https://api.myapp.com/copilotkit",
6
  botName: "博客助手",
7
  // Slack 中的 Agent 可以直接查询和操作你的应用
8
});
9

10
// 在 Slack 中 @博客助手 "帮我查一下上周的热门文章"

1
// AG-UI Protocol 的组件能力声明
2
{
3
  "agent:component": {
4
    "id": "blog-editor",
5
    "capabilities": [
6
      {
7
        "action": "searchPosts",
8
        "description": "搜索博客文章",
9
        "parameters": {
10
          "query": "string",
11
          "tags": "string[]",
12
          "page": "number"
13
        },
14
        "returns": {
15
          "type": "Post[]",
16
          "description": "匹配的文章列表"
17
        }
18
      },
19
      {
20
        "action": "createDraft",
21
        "description": "创建新草稿"
22
      }
23
    ]
24
  }
25
}