工具推荐
1780713208更新
0
不知道你有没有注意过,Claude 刚出来的时候,什么功能最让你觉得最不一样?
不是它会聊天,是 Claude Artifacts。

Artifacts 让 AI 在聊天的响应里,直接给你渲染出一个实时的 UI 组件。代码、图表、仪表盘、交互元素,AI 说生成就生成,用户可以直接在对话里操作这些东西。
当时所有人都惊了,原来 AI 还能这么玩。
然后呢?每个主要 AI 产品都试图复制这个效果。Google 做了,OpenAI 做了,国内的大厂也跟进了。
但问题来了——
不像推理能力、规划能力、工具调用这些功能,可以直接通过升级模型获得。渲染 UI 这件事,需要自己从零开发这套接口层,主流 Agent 开发框架本身都不自带这个能力。
LangGraph 没有,CrewAI 没有,Google ADK 也没有。
所以每个想复刻 Artifacts 效果的产品团队,都得从零开始自己造这套"接口层"。
你以为渲染 UI 就是 AI 返回一段代码然后显示出来?
真实情况是,还需要:实时流式传输让 AI 说话的时候你能看到打字效果,状态同步让 AI 和 UI 保持信息一致,跨会话持久化让下次打开还能接着聊,以及断点重连让用户刷新页面的时候不丢进度。
这整套东西,从零搭一遍,工作量巨大。
所以大多数团队最后的选择就是——算了,不整那么复杂了,AI 做个后端 API,前端就留个聊天框完事。
Claude 原生拥有的接口能力,就这么变成了只有少数团队才能拥有的定制化功能。
直到 CopilotKit 出现了。

CopilotKit 做的事很简单——它把这整套接口层做成了一个标准化的东西,你不用从零开始造轮子了。
你想让 AI 渲染 UI?CopilotKit 帮你接好了。想让 AI 和 UI 保持状态同步?接好了。想让对话历史跨会话持久化?也接好了。
而且它不只是自己做,它还拉了一帮人一起推动这件事成为行业标准——这就是 AG-UI 协议。

全称是 Agent-User Interaction Protocol,就是"Agent 和用户交互的协议"。这个协议已经被 Google、LangChain、AWS、Microsoft、Mastra、PydanticAI 这些大厂和项目采纳了。
作为标准协议,前端永远不需要知道后台跑的是 LangGraph 还是 CrewAI。你随时可以换后端,UI 完全感知不到。
等于 CopilotKit 帮你把"AI 能力"和"界面表现"彻底解耦了。你专注于做你的 AI 应用,接口的事交给 CopilotKit。
CopilotKit 给了 AI 五个核心能力。
Chat UI。
就是一个可以聊天的界面,但这个界面不普通。它支持流式输出,AI 说一句话你就能看到一句话,不用等它全部说完。它还支持工具调用,AI 可以"呼叫"工具来帮你做事。
Backend Tool Rendering。
这个就有点意思了。
什么意思呢,就是你跟 AI 说"帮我查一下明天北京的天气",AI 不会给你返回一段文字,它直接在你屏幕上渲染出一个天气卡片,有图标有温度有穿衣建议,你可以直接在这个卡片上操作。
你不需要自己写代码去解析 AI 返回的文本再渲染成 UI,CopilotKit 帮你搞定了。
Generative UI。
这是更激进的一步。
不只是工具调用的结果能渲染成 UI,AI 本身就可以动态生成界面组件。
就是你跟 AI 说"我需要一个控制面板来监控服务器",AI 不是给你一段描述,而是直接在你屏幕上生成一个完整的控制面板,你可以操作上面的每一个按钮和指标。
科幻电影里那种"AI 给你整出来一个操作界面"的感觉。
Shared State。
这是一个状态同步的机制。
什么意思呢,就是 AI 和你的 UI 组件共享同一个"状态池"。你在界面上点了哪个按钮,AI 知道。你在问什么问题,UI 也能实时更新。
不是那种"你说你的我做我的"的割裂状态,而是真正在协同工作。
我之前用过一个没有这套机制的 AI 应用,AI 说"我已经帮你修改好了",但界面上还是显示旧数据,你得手动刷新一下才能看到最新状态。那种感觉就像你在跟一个不太靠谱的同事合作,他说搞定了但你得自己确认一遍。
CopilotKit 解决的就是这个问题。
Human-in-the-Loop。
翻译成人话就是"人类随时可以介入"。
AI 在执行任务的过程中,可以随时暂停,问你"这个地方我想这么做,你觉得行不行"。你可以点头让它继续,也可以说"不对不对,我想那样"。
AI 不会自作主张一路跑到黑,它会跟你确认关键决策。
这五个能力组合在一起,AI 应用就不再是一个只会回答问题的聊天机器人,而是一个真正能帮你做事的智能助手。
你可能觉得,这么复杂的东西,集成起来肯定很麻烦吧。
说实话,我一开始也是这么想的。
但 CopilotKit 给了两个超级简单的启动方式。
新项目:
npx copilotkit@latest create -f <framework>已有项目:
npx copilotkit@latest init一条命令,CopilotKit 就帮你把核心包装好了,Provider 也配好了,Agent 和 UI 的连接也打通了。
CopilotKit 还给了一个很有用的 Hook,叫 useAgent。这个 Hook 让你可以直接在代码里操控 AI Agent:
const { agent } = useAgent({ agentId: "my_agent" });return ( <div> <h1>{agent.state.city}</h1> <button onClick={() => agent.setState({ city: "NYC" })}> Set City </button> </div>);你可以读取 Agent 的状态,也可以修改它。Agent 的状态变了,UI 自动更新。就像你在操控一个带状态的遥控器,而不是在跟一个黑盒子对话。
说真的,我第一次看到 CopilotKit 的时候,脑子里冒出来的第一个想法是——
这不就是钢铁侠的贾维斯吗?
贾维斯能帮托尼·斯塔克处理各种事务,能在界面上展示各种数据,能跟他对话,能在他授权下执行各种操作。CopilotKit 可能还没那么科幻,但本质上做的事是一样的——让 AI 不只是能说话,还能真的动手做事。
AI 的上半场,大家都在卷"说话"这件事,ChatGPT、Claude、各种国产大模型,比的是谁更会聊天。
AI 的下半场,可能比的就不只是"说"了,而是"做"。
谁能真正把 AI 从聊天框里拽出来,让它能够操作界面、执行任务、与真实世界交互,谁可能就拿到了下一场的入场券。
CopilotKit 这个项目,至少在这个方向上,给出了一种可能的答案。
项目地址:
https://github.com/CopilotKit/CopilotKit
豫公网安备41010702003375号