Anthropicが一昨日、Claudeに生成UIベースの新しいインタラクションを導入しました。チャット内で直接、可視化チャートやインタラクティブなウィジェットを生成できます。

Code Pilotの作者は2日間でこの機能を再現し、しかもより汎用的に作りました：Kimi K2.5、Minimax M2.5などの中国製モデルに対応しています。

何ができるのか？

1. データ可視化

AIに「米国とイランの紛争の1日あたりコスト見積もり」のチャートを描かせてみます。以前のAIなら長々とした文章を返してきて、数字の関係はさっぱり分かりませんでした。今はチャートが直接出て、各部分の金額が一目で分かります。

2. インタラクティブなウィジェット

複利計算機を作らせてみます。スライダーをドラッグして初期金額や運用年数を変えると、下のチャートと数字がリアルタイムに変化します。これは静的な画像ではなく、本当に操作できるウィジェットです。

3. アーキテクチャ図とフロー図

APIからJWT認証までの完全なフローを描かせます。機能比較、フロー図、階層構造がすべて図示され、文章の説明を読むよりずっと速くアーキテクチャを理解できます。

4. オンラインデータの分析

GitHubリポジトリのリンクをそのまま投げれば、自分でデータを取得して可視化分析してくれます。スター数、fork数、技術スタック、アーキテクチャ設計、コアモジュール、すべてチャートに描かれます。

5. 深いインタラクションと説明

生成された図とやり取りして、より詳しい説明をさせることができます。例えばモンスーンと海流の関係を説明させているとき、「海流のメカニズム」ボタンをクリックすると、自動的にモデルへ指示が送られ、海流のメカニズムを示す図が続けて生成されます。

物理や数学の公式の可視化では、各パラメータをスライダーと入力で操作でき、アニメーションが即座に変化します。学生には非常に使い勝手が良いです。

技術的な実装方式

Claude公式のやり方

Claude.aiはtool_useメカニズムを使っています：モデルが専用のtoolを呼び出して構造化されたwidgetコンテンツを出力し、フロントエンドがtool呼び出しのinputパラメータを解析してレンダリングします。

しかし、この方式には3つの問題があります：

1. SDKの制限：Claude Agent SDKのpreset: 'claude_code'モードではカスタムtoolを登録できない
2. ストリーミング体験：tool_useの結果はinput_json_deltaの連結が完了するまでレンダリングできず、HTMLの増分レンダリングに非対応
3. レンダリングの分離：スタイルリークとスクリプト脱出の問題への対処が必要

Code Pilotの方式

トリガー：コードフェンス

モデルが特殊なMarkdownコードフェンスを出力することでレンダリングをトリガーします：

show-widget
{"title":"training_flow","widget_code":"<svg width=..."}

このフォーマットはCode Pilotがすでに持つコードフェンスの仕組みを再利用したもので、フロントエンドのparserチェーンが自然にサポートします。

レンダリング：sandbox iframe

各widgetはsandbox="allow-scripts"のiframe内にレンダリングされます。

• CSPポリシーは4つのCDNドメインの外部スクリプトのみ許可
• connect-src 'none'ですべてのネットワークリクエストを禁止
• postMessageでコンテンツ更新を受信
• ストリーミングプレビュー段階ではwidget:updateを送り、スクリプトは実行しない
• 最終レンダリングではwidget:finalizeを送り、スクリプトを実行
• ResizeObserverがコンテンツの高さの変化を監視し、postMessageで親ページに報告

CSS変数のブリッジ

これがwidgetをアプリの見た目に溶け込ませるための鍵です。

Code PilotはOKLCHカラースペースのCSS変数を使っています。ブリッジ層はiframeの初期化時に、Code Pilotの変数値をiframeの:rootに注入します。ガイドに従ってモデルが書いたCSSは、現在のテーマの色をそのまま使えます。

ダークモード切り替え時は、親ページがclassの変化を検出し、変数値を再計算してiframeにプッシュします。

ストリーミングレンダリング

これが実装全体で最も複雑な部分です。モデルはトークンごとに生成するため、任意の時点で受け取るwidgetコードは、不完全なJSON、不完全なHTMLである可能性があります。

Code Pilotの解決策：

• 不完全なJSONとHTMLをリアルタイムに解析
• 生成しながらiframeへレンダリング
• 最終的に完成した時点でスクリプトを実行

中国製モデルのサポート

Code Pilotの実装により、Claudeだけで使えるものではなくなりました。Kimi K2.5、Minimax M2.5、Anthropic純正モデルのすべてが動きます。

作者が特に言及しているのは、K2.5が描く図形はSonnet 4.6よりもむしろ見栄えが良く、アーキテクチャ分析も詳細だということです。この機能を使うなら、まずK2.5を試すのがおすすめです。

使い方

Code Pilotを直接インストール：https://github.com/op7418/CodePilot

インストール後はそのまま使えて、追加の設定は不要です。

Toolinのレビュー

これは「良いものを見たら再現する」という典型的なオープンソース精神の表れです。さらに重要なのは、Code Pilotの実装方式はClaude公式より汎用的で、複数のモデルに対応し、しかもオープンソースだという点です。

生成UIの核心的な価値は：AIの出力がテキストに限定されなくなり、操作可能なインターフェースを直接生成できることです。これはデータ分析、教育、技術ドキュメントなどのシーンに大きな価値をもたらします。

こんな人に向いている？

• データ可視化が必要なアナリスト
• 複雑な概念の理解が必要な学生
• インタラクティブなデモを素早く作りたい開発者

こんな人には向かない？

• 純粋なテキストチャットだけでよいシーン
• 視覚的な演出にこだわりのないユーザー

料金：オープンソースで無料