首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >33.6K Star!2026 做 Agentic App,这套基础设施绝了!

33.6K Star!2026 做 Agentic App,这套基础设施绝了!

作者头像
开源星探
发布2026-06-08 15:09:44
发布2026-06-08 15:09:44
290
举报
文章被收录于专栏:翩翩白衣少年翩翩白衣少年

今天介绍一款 GitHub 热榜项目 CopilotKit

狂揽 33.6K 星,Product Hunt 高分项目,它是直接把 Anthropic 闭源灵魂给端了出来。

过去两三年,我们见证了 AI Agent 从概念到落地的全过程。但实际操作中,大多数 Agent 还只能在聊天框里"画饼"——说能帮你做事,但真正要动手时,要么跳转到另一个页面,要么需要你手动去执行。

AI 说得天花乱坠,最后干活的还是你自己。

而这一切,正在被 CopilotKit 彻底改变。

项目背景

CopilotKit 背后的团队,同时也是 AG-UI 协议 的缔造者——这个协议已经被 Google、Microsoft、Amazon、Oracle、LangChain、Mastra、Pydantic AI 等巨头采用,成为 Agent 与用户界面交互的事实标准。

它定义了 AI Agent 如何与用户界面进行实时对话。过去,Agent 只能"说话",现在,Agent 可以直接"动手"生成界面。

这就是为什么 CopilotKit 能让你的 Agent 不再停留在聊天框,而是直接在你的应用里实时生成交互界面。

三条最实用路径

CopilotKit 提供了三种 Generative UI 模式,覆盖了从严格控制到完全开放的所有场景:

1、Controlled 受控模式

这是最稳妥的模式,也是生产环境的首选。

你先写好 React 组件,Agent 只负责"挑选"组件和"填充"数据,完全不会偏离你的品牌风格。

这种模式的好处是:

  • 完全可控:UI 组件都是你写的,不会出现奇奇怪怪的样式
  • 品牌一致:所有生成的界面都符合你的设计系统
  • 性能最优:组件都是预定义的,渲染速度极快

对于核心业务流程,这绝对是你的首选。

2、Declarative 声明式(A2UI)

这是 Google 官方也在推的模式。Agent 吐出 JSON,前端自动映射成组件。

这种模式适合什么场景?长尾功能。

比如你做一个项目管理工具,核心功能(任务、看板、日历)你用受控模式做好了,但还有 100 个小功能(发票生成、假期申请、设备预订),这些功能不常用,但做起来又很麻烦。

这时候 A2UI 就派上用场了:你只需要定义好组件库和数据 schema,Agent 会根据用户需求,自动生成对应的界面。不用你写一行组件代码。

这就是为什么 Google 也在推 A2UI——它能让你用最低的成本,覆盖最多的长尾场景。

3、Open-ended 开放式

最后是完全开放的模式。Agent 直接生成 HTML 或驱动 Excalidraw 等工具。

这种模式适合什么?一次性的、探索性的可视化。

当然,这种模式可控性最低,但灵活性最高。对于数据分析、架构设计、创意探索等场景,这是绝佳的选择。


CopilotKit 的强大,远不止 Generative UI。它是一套完整的全栈方案:

  • 双向状态同步:Agent 不仅能读取应用状态,还能直接修改。
  • Human-in-the-Loop:Agent 可以暂停执行,请求你的确认。
  • 持久 Threads:所有对话、状态、UI 都会被保存下来。用户下次打开应用,可以直接从上次中断的地方继续。
  • AG-UI 协议全栈打通:这是最关键的。因为 AG-UI 是行业标准。

也就是说,你写一套 Agent 逻辑,就能在 Web、Mobile、Slack 上同时跑通——这就是基础设施的力量。

快速上手

新项目:
代码语言:javascript
复制
npx copilotkit@latest create -f <framework>
现有项目:
代码语言:javascript
复制
npx copilotkit@latest init

这会帮你:

  • • 安装 CopilotKit 核心包
  • • 配置 Provider
  • • 连接 Agent 和 UI
  • • 让你的应用立即可部署

然后,你就可以用 useAgent hook 来控制你的 Agent:

代码语言:javascript
复制
const { agent } = useAgent({ agentId: "my_agent" });

return (
  <div>
    <h1>{agent.state.city}</h1>
    <button onClick={() => agent.setState({ city: "NYC" })}>
      Set City
    </button>
  </div>
);

就这么简单。当然,这只是冰山一角。你可以去看官方文档,里面有更详细的示例和教程。

写在最后

很多独立开发者、AI 产品玩家、程序员,都在观望 Agentic 应用。你可能觉得:

  • • "这个太复杂了,我搞不定"
  • • "大厂才有资源做这个"
  • • "等等再说吧"

但 CopilotKit 告诉你:不用等了。

33k+ Star、4M+ 周下载、财富 500 强都在用的基础设施,现在完全开源。

从受控到声明式到开放式,三种模式覆盖所有场景。协议全栈打通。一次集成,多端全通。

2026 年,是 Agentic 应用爆发的一年。而 CopilotKit,就是让你站在巨人肩膀上的那套基础设施。

GitHub:https://github.com/CopilotKit/CopilotKit

官方文档:https://docs.copilotkit.ai

如果本文对您有帮助,也请帮忙点个 赞👍 + 在看 哈!❤️

在看你就赞赞我!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2026-06-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 开源星探 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 项目背景
  • 三条最实用路径
    • 1、Controlled 受控模式
    • 2、Declarative 声明式(A2UI)
    • 3、Open-ended 开放式
  • 快速上手
    • 新项目:
    • 现有项目:
    • 写在最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档