CopilotKit 開源 Open Generative UI：Claude Artifacts 跨 Agent 框架實作

開源 AI Agent 前端框架 CopilotKit 5 月 7 日宣布推出 Open Generative UI、是 Anthropic Claude Artifacts 功能的開源實作。akshay_pachaar 整理說明、CopilotKit 的版本讓 Agent 在執行時動態生成 HTML/SVG、以 token-by-token 串流方式顯示在 sandboxed iframe、用戶能即時看到介面組裝過程、不必等完整回應。在 Anthropic Claude Artifacts 之前、生成式 UI 能力只存在於 Anthropic 自家產品內；CopilotKit 把同樣模式對外開源、可整合到任何 app。

核心機制：Agent 即時生成 HTML/SVG、串流到 sandboxed 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。