CopilotKit、ChatGPT風の動的UIを自作アプリに組み込める「Open Intelligent UI」をOSS公開

Open Intelligent UIは、ChatGPTの「Intelligent UI」のような動的インターフェース生成機能を自社アプリに直接組み込めるオープンソースのフレームワークです。

OpenAIがChatGPTに導入した動的UIは、対話に応じてグラフや地図、ミニツールをその場で生成してくれますが、完全に閉じた環境でありAPIも提供されていません。CopilotKitが公開したOpen Intelligent UIは、既存のコンポーネントやデザインシステムをそのまま活かしながら、同様の機能を自社プロダクト上で実現します。

どのような仕組みで動くのか

このシステムは、タスクの性質に応じてUIの柔軟性をコントロールする設計になっています。

シンプルな表や定型データには、GoogleのA2UI仕様などを通じて自社アプリに既存のネイティブUIコンポーネントを呼び出します。これにより、ブランドのフォントや配色が崩れる心配がありません。

より複雑なツールやカスタムUIが必要な場合は、generateSandboxedUiが呼び出され、HTML、CSS、JavaScriptをリアルタイムにストリーミング出力します。コードは安全に隔離されたiframeのサンドボックス内で実行され、生成されながら即座に画面に描画されます。

生成されたインターフェース上での操作は、そのまま次の会話ターンとしてエージェントへフィードバックされます。また、生成されたUI全体を単体のHTMLファイルとしてダウンロードすることも可能です。

プロトコル連携とセットアップ

内部実装にはCopilotKitのOpen Generative UIとLangChain Deep Agentsが採用されています。テキスト生成にはOpenAI、出力形式（テキスト、ネイティブ部品、サンドボックスUI）の判定にはTypeSafeのJevが割り振られています。

最大の特徴はAG-UIプロトコルへの準拠です。MCP Appsにも対応しており、フロントエンドを一切変更することなく、バックエンドのエージェントをMastraやGoogle ADK、マイクロソフトのAgent Frameworkに差し替えることができます。

リポジトリはGitHubのCopilotKit/OpenIntelligentUIで公開されています。ローカル環境で動かすには、リポジトリをクローンした後にmake setupとmake devを実行するだけです。チャット画面のヘッダーからOpenAIとTypeSafeのAPIキーを入力すればすぐに利用できます。

なぜ重要か

私たちは、このプロジェクトが大手プラットフォームの独占的UI機能を、現実的な開発者ツールへと引き戻した点を高く評価しています。

OpenAIのデザイナーであるAndrew Chen氏が指摘するように、生成UIの本質的な難しさはUIを作ること自体ではなく「自社プロダクトの一部に見えるように馴染ませること」にあります。自前のデザイン資産を活かしたままエージェントに画面を作らせたい開発者にとって、すぐに検証する価値のある選択肢です。

サンドボックスによる自由生成はモデルのコード生成精度に依存するため、実務ではまず既存コンポーネントを呼び出す制御モードを中心に導入していくのが確実でしょう。