assistant-ui/tool-ui

何を解決するか

ほとんどのAIチャットインターフェースは、ツール呼び出しを生のJSONとして表示するため、ユーザーにとって読み取りや操作が困難です。Tool UIは、これらの生のツールペイロードを、チャート、フォーム、マップなどの直感的でインタラクティブな視覚的要素に変換するReactコンポーネントのライブラリを提供します。

仕組み

shadcn/uiスタイルのアプローチに従い、これらのコンポーネントは依存関係としてインストールするのではなく、プロジェクトのコードベースに直接コピー＆ペーストして使用するように設計されています。各コンポーネントは、ツールの出力を検証するためのZodスキーマとペアになっています。ペイロードが有効な場合にのみUIがレンダリングされるため、アプリが安全に失敗するように保証されます。

対象者

特定のデザインシステムに縛られることなく、ツール呼び出しモデルに対して、より洗練されたインタラクティブな体験を提供したいAIチャットインターフェースを構築している開発者。

ハイライト

• コピー＆ペースト・アーキテクチャ: コンポーネントはあなたのコードベース内に存在するため、依存関係によるロックインを回避できます。
• スキーマ検証済み: Zodスキーマを使用して、ツールの出力が正しく解析され、レンダリングされることを保証します。
• インタラクティブなレシート: コンポーネント内で行われたユーザーの選択は、アシスタントに送り返され、レシートとして保持されます。
• shadcn/uiをベースに構築: Radix primitivesとTailwind CSSを活用しており、スタイリングやテーマの統合が容易です。
• 広範なコンポーネントライブラリ: プログレス・トラッカーやデータテーブルから、地理マップやソーシャルメディアの投稿プレビューまで、あらゆるものを含んでいます。