CopilotKit オープンソースの Open Generative UI：Claude Artifacts 跨アジェント フレームワーク実装

CopilotKit はオープンソースの AI Agent フロントエンドフレームワークで、5月7日に Open Generative UI の提供を発表しました。これは Anthropic の Claude Artifacts 機能のオープンソース実装です。akshay_pachaar が整理して説明しているように、CopilotKit のバージョンでは、Agent が実行時に動的に HTML/SVG を生成し、token-by-token でサンドボックス化された iframe 内にストリーミング表示されます。ユーザーはインターフェースが組み立てられていく過程をリアルタイムで見ることができ、完全な応答を待つ必要がありません。Anthropic の Claude Artifacts 以前は、生成式 UI の能力は Anthropic 自社の製品内にしか存在していませんでした。CopilotKit は同様の仕組みを対外にオープンソース化し、あらゆるアプリに統合できるようにしました。

コアとなる仕組み：Agent がリアルタイムに HTML/SVG を生成し、サンドボックス化された iframe にストリーミング

Open Generative UI の技術設計：

Agent は事前に用意された部品を選んで使うのではなく、毎回ゼロから任意のビジュアル内容を生成します

出力は HTML/SVG 形式で、token-by-token によりサンドボックス化された iframe へストリーミングされます

iframe は完全に隔離されており、親アプリ、DOM、またはユーザーデータへアクセスできません

たとえ Agent が破損したタグや意図しない JavaScript を生成しても、iframe の外へ漏れません

開発者は「skill prompts」を通じて、Agent に特定の視覚フォーマット（たとえば Chart.js のダッシュボードで座標軸のラベルを含む、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 のアプリケーション層にもたらす意味：

これまで開発者は自社アプリに「Claude Artifacts 風の動的 UI」を組み込むには、自分でゼロから実装する必要がありました

Open Generative UI は、オープンソースで、フレームワーク横断・モデル横断で使える選択肢を提供します

MCP サーバー、Claude Code、Cursor を通じてユーザーが直接接続できます

今後追跡可能な具体的な出来事：LangChain／CrewAI コミュニティにおける CopilotKit Open Generative UI の採用率、 「Claude Artifacts がオープンソース実装された」ことに対する Anthropic の公式な反応、そして他の Agent フレームワークが同様の GenUI 能力を提供するかどうか。

この記事 CopilotKit がオープンソースで Open Generative UI：Claude Artifacts をクロス Agent フレームワーク実装 を最初に掲載したのは 鏈新聞 ABMedia です。