OpenUI

OpenUIとは？

OpenUIは「生成UIのオープン標準」として紹介されています。サイトでは、プレーンテキストのみではなくユーザーインターフェースで応答できるAIアプリケーションを構築するためのオープンソースアプローチとして位置づけられています。

実践的なレベルでは、OpenUIは開発者向けCLIと、React指向のプリミティブセットを含み、コンポーネントを定義・登録してAIアプリがUIのビルディングブロックとして使用できるライブラリを作成します。

主な機能

• 生成UIのためのオープンソースツール: ページでは、OpenUIをAIアプリの応答をUI形式にすることを目的としたオープン標準として位置づけています。
• プロジェクト作成CLI: 例では、npx @openuidev/cli@latest createを使用して新しいアプリ/ワークフローをスキャフォールドします。
• コンポーネント定義API: ページでは、defineComponentを使用してコンポーネントに名前を付け、入力プロップ（スキーマ定義を含む）を記述しています。
• UIビルディングブロックのためのライブラリ登録: 例では、createLibraryを使用し、libraryをエクスポートして、コンポーネントを再利用可能なセットとして登録する方法を示しています。
• スキーマベースのプロップ（zod）: 例では、zodをインポートし、コンポーネントプロップをz.object(...)で定義、z.string().url()でURL検証を含みます。

OpenUIの使い方

ページに示された典型的なセットアップは、npx @openuidev/cli@latest createでCLIを使用してプロジェクトを作成することから始まります。スキャフォールド後、defineComponentでUIコンポーネントを定義し、各コンポーネントが期待するプロップスキーマを含みます。

次に、createLibraryを使用してそれらのコンポーネントをライブラリオブジェクト（libraryとしてエクスポート）に登録します。そのライブラリはAIアプリで参照可能で、応答を登録コンポーネントを使った構造化UIとしてレンダリングできます。

ユースケース

• AI生成UIセクション（例: カルーセル）: CarouselコンポーネントとCarouselCardコンポーネントを明示的なプロップスキーマ（タイトル、画像、CTAラベル）で定義し、AIが一貫した構造のUIカルーセルを出力できるようにします。
• AIからの構造化リスト: コンポーネントプロップ（カード定義の配列、説明などのオプション字段、検証済みURL）を使用して、AI生成UI要素が期待されるデータ形状に一致することを保証します。
• AIアプリ向け再利用可能UIコンポーネントライブラリの構築: 複数のUIコンポーネントを単一のエクスポートlibraryに集約し、チームが共有「UI語彙」を時間とともに成長させられます。
• UIレンダリングのための型付きインターフェース: zodでスキーマ検証を適用（例: imageUrlがURL文字列であることを保証）し、AI出力によるUIレンダリングエラーの可能性を低減します。

FAQ

• OpenUIはReact専用ですか？ 提供例では@openuidev/react-langを使用し、Reactスタイルのコンポーネント使用を示しています。サイトの例はReact指向ですが、ソースはより広範なフレームワークサポートを明示的に主張していません。

• OpenUIで構築を始めるには？ ページでは、npx @openuidev/cli@latest createでCLIから始め、defineComponentでコンポーネントを定義し、libraryに登録する方法を示しています。

• この文脈での「生成UI」とは？ サイトでは、OpenUIをAIアプリが「あなたのUIで応答」できるものと記述し、AI出力が登録コンポーネントから構築されたUI構造としてレンダリング可能であることを示唆しています。

• コンポーネント入力はどのように指定しますか？ 例では、zodスキーマ（例: z.object({ ... })やz.string().url()）を使用してコンポーネントプロップを定義しています。

• コンポーネントを使用前に登録が必要ですか？ 例ではcreateLibraryを含みlibraryをエクスポートしており、コンポーネントをライブラリに組み立て登録してAIアプリが使用できることを示唆しています。

代替案

• 独自UIスキーマ + レンダラーの構築: オープン標準を採用せず、独自のJSON/UIスキーマと、構造化AI出力をコンポーネントに変換するレンダラーを設計できます。これにより、エンドツーエンドのプロトコルを自分で定義する必要があります。
• 「オープン標準」なしのUIコンポーネントスキーマライブラリ: AI出力を検証しUIコンポーネントにマッピングするアプローチがありますが、同じ「生成UI標準」の枠組みや専用CLI/ワークフローを提供しない場合があります。
• 非標準化汎用UI生成フレームワーク: プロンプトから直接UIを生成するツールは、型付きライブラリとしてUIコンポーネントを登録することより、コードやレイアウト生成に重点を置き、「コンポーネントライブラリ」から「プロンプト-to-レイアウト/コード」へワークフローを変更します。