OpenGenerativeUI - AIベースの生成UIフレームワークをオープンソース化

 (github.com/CopilotKit)
35 ポイント 投稿者 xguru 2026-03-17 | 3件のコメント | WhatsAppで共有
  • Claudeが公開した インタラクティブな視覚資料生成 機能をそのまま実装
  • 単純なテキスト応答ではなく、チャート、ダイアグラム、可視化などの資料を自動生成する Generative UI
    • アルゴリズム可視化: 二分探索、BFS/DFS、ソートなど
    • 3Dアニメーション: WebGL/CSS3Dベースのインタラクティブなシーン
    • チャートおよびダイアグラム: 円グラフ、棒グラフ、ネットワークダイアグラムなど
    • ウィジェットおよびシミュレーション: フォーム、数学グラフ、対話型ツールなど
  • すべての視覚要素は サンドボックス iframe 内でレンダリングされ、安全性と独立性を確保
    • 自動 ライト/ダークテーマ、段階的アニメーション、レスポンシブなサイズ調整 をサポート
  • CopilotKit と LangGraph をベースに、対話型の視覚コンテンツをリアルタイム生成
    • Turborepo ベースの モノレポ構成
    • apps/app: Next.js 16、React 19、Tailwind 4 ベースのフロントエンド
    • apps/agent: LangGraph と CopilotKit ミドルウェア を使う Python エージェント
  • 動作方式
    • ユーザーが CopilotKit チャット UI を通じてプロンプトを入力
    • エージェントがテキスト、ツール呼び出し、または視覚コンポーネントのうち適切な応答形式を決定
    • フロントエンドの widgetRenderer フックが HTML を受け取り、iframe にレンダリング
    • Skeleton ローディング 後、滑らかなフェードイン処理と 自動高さ調整 を実行
  • 可視化決定マトリクス を提供
    • リクエストの種類に応じて SVG、HTML、Chart.js、Three.js、D3.js など適切な技術を自動選択
    • 例: プロセス説明には Flowchart、データ比較には Bar chart、3D表現には Three.js を活用
  • MITライセンス

関連記事

3件のコメント

 
beoks 2026-03-17

生成したHTMLをiframe内でレンダリングする方式なんですね
 
xguru 2026-03-17

クロードがこの機能をリリースしてまだそれほど経っていないのに、もうオープンソースで実装したんですね。

コントリビューターにクロードがいるのも面白いですね（笑）
クロードがリリースした機能をそのまま実装するのを手伝うクロード…
 
kissdesty 2026-03-17

Claude Codeを使ってcommitすると、デフォルト設定では自動的にコントリビューターとして付いて表示されるらしいです。