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

On May 7, open-source AI Agent frontend framework CopilotKit announced the release of Open Generative UI, an open-source implementation of Anthropic Claude Artifacts. akshay_pachaar compiled and explained that CopilotKit’s version allows an Agent to dynamically generate HTML/SVG at runtime, streaming and displaying it token-by-token inside a sandboxed iframe, so users can immediately see the interface being assembled without waiting for the full response.

Before Anthropic Claude Artifacts, generative UI capabilities only existed within Anthropic’s own products; with CopilotKit, the same pattern is open-sourced and can be integrated into any app.

Core mechanism: The Agent generates HTML/SVG in real time and streams it into a sandboxed iframe

Technical design of Open Generative UI:

The Agent doesn’t select from pre-built components; instead, each time it generates any visual content from scratch

Outputs are streamed token-by-token in HTML/SVG form into a sandboxed iframe

The iframe is fully isolated, unable to access the parent app, the DOM, or user data

Even if the Agent produces broken markup or unexpected JavaScript, it won’t leak outside the iframe

Developers can guide the Agent to produce specific visual formats via “skill prompts” (e.g., a Chart.js dashboard with axis labels, 3D models with rotation controls, etc.)

The sandbox design is a standard approach to handle the risk of “agents generating arbitrary code”—letting the Agent generate freely while restricting its execution scope, without breaking the main app’s security boundary.

Compatible scope: LangGraph / CrewAI / Mastra / Google ADK / AWS Strands

Open Generative UI is built on the AG-UI protocol and is compatible out of the box with multiple Agent frameworks:

LangGraph

CrewAI

Mastra

Google ADK

AWS Strands

It also provides a standalone MCP (Model Context Protocol) server, which can be plugged into Claude Code, Cursor, or any MCP-compatible client for use. The whole solution is built on CopilotKit’s open-source frontend framework. On GitHub, CopilotKit has accumulated over 30,000 stars, and it provides SDKs for React, Next.js, Angular, and Vue.

Significance for AI Agent developers: A GenUI standard across frameworks and across models

The release is meaningful for the AI Agent application layer in these ways:

In the past, developers had to implement “Claude Artifacts-style dynamic UI” from scratch inside their own apps

Open Generative UI provides an open-source, cross-framework, cross-model option

Users can connect directly via the MCP server, Claude Code, and Cursor

Specific events to watch next: CopilotKit Open Generative UI adoption rate in the LangChain / CrewAI community, Anthropic’s official response to the “Claude Artifacts being open-sourced” implementation, and whether other Agent frameworks will provide similar GenUI capabilities.

This article CopilotKit open-sources Open Generative UI: Claude Artifacts cross-Agent framework implementation first appeared on 链新闻 ABMedia.