CopilotKit 开源 Open Generative UI：Claude Artifacts 跨代理框架实现

开源 AI Agent 前端框架 CopilotKit 5 月 7 日宣布推出 Open Generative UI、是 Anthropic Claude Artifacts 功能的开源实现。akshay_pachaar 整理说明、CopilotKit 的版本让 Agent 在执行时动态生成 HTML/SVG、以 token-by-token 的串流方式显示在带沙盒隔离的 iframe 中，用户能即时看到界面组装过程、不必等到完整回应。在 Anthropic Claude Artifacts 之前、生成式 UI 能力只存在于 Anthropic 自家产品内；CopilotKit 把同样模式对外开源、可整合到任何 app。

核心机制：Agent 即时生成 HTML/SVG、串流到带沙盒隔离的 iframe

Open Generative UI 的技术设计：

Agent 不从预先建好的元件选用、而是每次从零生成任意视觉内容

输出以 HTML/SVG 形式以 token-by-token 的方式串流到沙盒化 iframe

iframe 完全隔离、无法存取父 app、DOM、或用户资料

即使 Agent 产生破损标记或意外 JavaScript、也不会泄漏到 iframe 外

开发者可通过「skill prompts」引导 Agent 产出特定视觉格式（如 Chart.js dashboard 含坐标轴标签、3D 模型含旋转控制等）

沙盒设计是处理「Agent 任意生成代码」风险的标准作法——让 Agent 自由产出但限制其执行范围、不破坏主应用安全边界。

相容范围：LangGraph／CrewAI／Mastra／Google ADK／AWS Strands

Open Generative UI 建立在 AG-UI 协议之上、开箱即用相容多个 Agent 框架：

LangGraph

CrewAI

Mastra

Google ADK

AWS Strands

同时提供独立 MCP（Model Context Protocol）服务器、可插入 Claude Code、Cursor、或任何相容 MCP 的客户端使用。整套方案建立在 CopilotKit 的开源前端框架上、CopilotKit 在 GitHub 已累积超过 30,000 颗星、提供 React、Next.js、Angular、Vue 的 SDK。

对 AI Agent 开发者意义：跨框架、跨模型的 GenUI 标准

本次发布对 AI Agent 应用层的意义：

过去开发者要在自家 app 中加入「Claude Artifacts 风格的动态 UI」需要自行从零实现

Open Generative UI 提供一个开源、跨框架、跨模型的选择

通过 MCP 服务器、Claude Code 与 Cursor 用户可直接接入

后续可追踪的具体事件：CopilotKit Open Generative UI 在 LangChain／CrewAI 社群的采用率、Anthropic 对「Claude Artifacts 被开源实现」的官方反应、以及其他 Agent 框架是否提供类似 GenUI 能力。

这篇文章 CopilotKit 开源 Open Generative UI：Claude Artifacts 跨 Agent 框架实现 最早出现在 链新闻 ABMedia。