OpenUI

OpenUIとは？

OpenUIは、AIアプリケーションがプレーンテキストではなく、カード、テーブル、フォーム、チャートなどのインタラクティブなUIコンポーネントで応答できるようにする、オープンソースの標準規格およびツールキットです。AIモデルに生のJSONやMarkdownを出力させる代わりに、OpenUIは軽量でストリーミングネイティブな言語（OpenUI Lang）を定義し、あらゆるLLMがそれを生成できます。クライアント側のレンダラーがその言語を解析し、実際のインタラクティブなReactコンポーネントに変換します。その結果、トークン効率の高いパイプラインが実現し、GPT、Claude、Gemini、Mistral、DeepSeekなど主要なAIモデルと連携し、Vercel AI SDK、LangChain、CrewAI、OpenAI Agents SDKなどのエージェントフレームワークと統合できます。

対象者

• AI搭載アプリを構築するフロントエンド開発者 – カスタムパーサーを作成したりJSONレンダリングに苦労することなく、AIが洗練されたインタラクティブなUI（カルーセル、ダッシュボード、予約カードなど）を返すようにしたい方。
• 会話型インターフェースを提供するプロダクトチーム – チャットボット、コパイロット、エージェントが、デザインシステムにネイティブなリッチでリアクティブなコンポーネントで応答するための標準的な方法を必要としている方。
• 生成UIを実験するAI/MLエンジニア – 異なるモデルが構造化UI生成をどのように処理するかをテストし、任意のコード実行を回避する安全でストリーミング対応のフォーマットを必要としている方。

主な機能

独自のコンポーネントライブラリを定義

@openuidev/react-lang の defineComponent と createLibrary を使用してコンポーネントを登録します。各コンポーネントにはprops用のZodスキーマが設定されるため、AIは提供すべきデータを正確に把握できます。ゼロからライブラリを構築することも、ShadCN、Material Design、DaisyUI、Base UIなどの既存のUIライブラリをラップすることもできます。

OpenUIがシステムプロンプトを自動生成

ライブラリを定義すると、OpenUIはLLMにOpenUI Langで応答する方法を指示するシステムプロンプトを自動的に構築します。手動でのプロンプトエンジニアリングは不要で、コンポーネントを登録するだけでツールキットが残りを処理します。

LLMがOpenUI Langで応答

モデルは、UI構造を記述するコンパクトでトークン効率の高い言語を出力します。このフォーマットは、同等のJSONレンダリングと比較して最大67.1%少ないトークンを使用するため、応答が高速化され、コストが削減されます。

レンダラーがリアルタイムでUIを解析・レンダリング

クライアント側のレンダラーがOpenUI Langのストリームを解釈し、到着した順に対応するReactコンポーネントをレンダリングします。レンダリングはJSONベースの代替手段と比較して3倍高速で、ネイティブストリーミングをサポートし、リアクティブな状態、入力、ツールに接続されたアクションによりUIをインタラクティブに保ちます。

特筆すべき点

OpenUIは、JSONの肥大化やカスタムパーサーなしで、AIの出力を実際のインタラクティブなUIコンポーネントに変換します。

ほとんどの生成UIアプローチでは、LLMに冗長なJSONを出力させる必要があり、低速でトークン消費が多く、ストリーミングが困難です。OpenUIはこれを、ストリーミングネイティブでトークン効率の高い、目的に特化した言語に置き換えます。同じパイプラインがReact、React Native、Vueで動作し、ツールやMCPサーバーを介してライブデータソースと統合できます。安全性も組み込まれており、任意のコード実行はなく、構造化されたコンポーネント呼び出しのみです。

こんな方におすすめ

テキスト応答を超えたAI搭載アプリを構築している方。チャットボットに予約ボタン付きのホテルカルーセル、ライブデータを表示するリアルタイムダッシュボード、ユーザーの操作に応じて更新されるマルチステップフォームなどを表示させたい場合、OpenUIはそれを実現する標準的な方法を提供します。特に、Vercel AI SDKやLangChainなどのフレームワークをすでに使用しており、車輪の再発明をせずにリッチなUI出力を追加したい場合に役立ちます。