作業の進め方
AI Elementsは、既存のNext.jsアプリケーションにチャット専用のコンポーネントを追加する手順をエージェントに示します。会話ビュー、メッセージの内容、ツール表示、プロンプト入力を扱います。コンポーネントは自分のリポジトリ内に配置されるため、製品独自のスタイルや操作要件に合わせてインターフェースを調整できます。
ソースは、これらのコンポーネントをAI SDKやshadcn/uiの設計慣習に結び付けています。例では、アシスタントの応答を内部構造が見えない一つのウィジェットとして扱わず、テキスト部分を中心にメッセージの基本コンポーネントを組み合わせています。モデルとの連携がすでにあり、ユーザーが一貫した画面で応答を読んで返信できるようにしたい場面に適しています。
想定される成果物
- プロジェクトで設定したコンポーネントディレクトリに追加される、選択したコンポーネントのソースファイル。
- メッセージと応答の基本コンポーネントを組み合わせたReactの会話ビュー。
- プロジェクトに合わせたスタイルと、連携に関して未解決の問題の説明。
ブリーフからレビューまで
- 01既存アプリケーションを確認する
パッケージ実行ツール、Next.jsの構成、AI SDKの依存関係、shadcnの設定を調べます。コンポーネントを追加する前に、インポートのエイリアスとグローバルスタイルを確認します。
- 02必要なUI部品を追加する
プロジェクトのパッケージ実行ツールで、対応するコンポーネントインストーラーを使います。会話に必要な部品を選び、リポジトリに追加されたファイルを確認します。
- 03接続してカスタマイズする
ソースの例に従い、各メッセージのロールをMessageに対応付け、MessageContentをネストし、テキスト部分をMessageResponseで表示します。ツールの実行結果には、その形式に対応した別の表示が必要です。このテキスト専用の例でそのまま表示できるとは限りません。ローカルのTailwindクラスを調整し、会話の各状態を確認します。