vercel-ai-elements

Vercel AI Elements スキル

概要

このスキルでは、Vercel AI SDK を使って会話型 AI インターフェースを構築するための包括的な UI コンポーネントライブラリ、Vercel AI Elements のドキュメントを網羅しています。基本的なメッセージ表示から、ウェブプレビューやツール実行といった高度な機能まで、6 つの機能カテゴリに整理された、本番環境ですぐに使える 23 個の React コンポーネントを取り上げています。

以下のような場合に、このスキルを使用してください。

• 特定の AI Elements コンポーネントのドキュメントを確認したい
• インストール方法や使い方を知りたい
• Props や API のリファレンスを確認したい
• AI SDK との統合例を知りたい
• ユースケースに適したコンポーネントを選びたい
• よく使われるパターンでコンポーネントを組み合わせる方法を知りたい

主な機能

Vercel AI Elements ライブラリは、6 つの機能カテゴリにわたるコンポーネントを提供します。

1. メッセージコンポーネント

バリエーション（コンテインド／フラット）、自動配置、アバター、Markdown サポートを備えたチャットメッセージを表示します。会話型インターフェースでユーザーメッセージやアシスタントのメッセージを表示するのに最適です。

コンポーネント： Message, MessageContent, MessageAvatar

リファレンス： references/vercel-ai-elements-message-components.md

2. 会話管理

自動スクロール、最下部へのスクロールボタン、空の状態を備えたメッセージリストをラップして管理します。複数のメッセージからなる会話のコンテナーとレイアウトを処理します。

コンポーネント： Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton

リファレンス： references/vercel-ai-elements-conversation-management.md

3. 入力と操作

ファイル添付、モデル選択、候補、タスクリストを使って、ユーザー入力を可能にします。メッセージの送信やワークフロー管理に関する、あらゆるユーザー操作パターンを扱います。

コンポーネント： Actions, Prompt Input（サブコンポーネントを含む）, Suggestion, Task

リファレンス： references/vercel-ai-elements-input-interaction.md

4. コンテンツ表示

コード、画像、Markdown の応答、構造化されたアーティファクトなど、生成されたコンテンツを表示します。AI モデルから出力されるあらゆる種類のコンテンツを扱います。

コンポーネント： Artifact, CodeBlock, Image, Response

リファレンス： references/vercel-ai-elements-content-display.md

5. AI 処理 UI

分岐した会話、推論の連鎖、読み込み状態、実行計画、シマー効果など、AI の処理ステップを視覚化します。「思考」プロセスを表示します。

コンポーネント： Branch, Chain of Thought, Loader, Plan, Reasoning, Shimmer

リファレンス： references/vercel-ai-elements-ai-processing.md

6. 高度な機能

コンテキストの追跡、引用、ツールの実行、情報源の帰属表示、ウェブプレビュー、クロスプラットフォーム共有に対応する、専用のコンポーネントです。

コンポーネント： Context, Inline Citation, Open In Chat, Queue, Sources, Tool, Web Preview

リファレンス： references/vercel-ai-elements-advanced-features.md

このスキルの使い方

コンポーネントのドキュメントを探す

ユーザーから特定のコンポーネントについて質問された場合：

1. コンポーネント名を特定する - 例：「Message コンポーネントの使い方を教えてください」
2. カテゴリを確認する - 6 つのカテゴリのうち、どれに属するかを判断します
3. 適切なファイルを参照する - references/ から該当カテゴリのリファレンスファイルを読み込みます
4. コンポーネントの詳細を提示する - インストール方法、基本的な使い方、機能、Props を説明します

よく使われるパターン

パターン 1：シンプルなチャットインターフェース

Message + Conversation + PromptInput + Response を組み合わせて、基本的なチャットボット UI を構築します。

パターン 2：操作機能を備えたチャット

Message コンポーネントに Actions コンポーネントを追加し、再試行、コピー、再生成の機能を実装します。

パターン 3：AI 処理の視覚化

Reasoning、ChainOfThought、または Plan を使って、ストリーミング中の AI の思考プロセスを表示します。

パターン 4：高度なドキュメント生成

Artifact、CodeBlock、Image、Response を組み合わせて、複雑なマルチメディアコンテンツを生成します。

パターン 5：複数プラットフォームでのチャット共有

OpenInChat を追加して、ユーザーが会話を ChatGPT、Claude などにコピーできるようにします。

AI SDK との統合

すべてのコンポーネントは、次のような @ai-sdk/react フックと連携するように設計されています。

• useChat() - メッセージ管理用
• useCompletion() - テキストのストリーミング用
• experimental_useObject() - 構造化出力用

リファレンスファイルには、各コンポーネントカテゴリの AI SDK との統合例がすべて含まれています。

コンポーネントのクイックリファレンス

インストールパターン

すべてのコンポーネントで同じインストールパターンを使用します。

npx ai-elements@latest add [component-name]

コンポーネント名は小文字とハイフンで構成されます。例：prompt-input、code-block、chain-of-thought。

Props のドキュメント

各コンポーネントのリファレンスファイルには、次の項目を含む包括的な props の表があります。

• Prop 名と型
• 機能の説明
• Prop が省略可能かどうか
• 該当する場合はデフォルト値

ストリーミングのサポート

多くのコンポーネントには、ストリーミングのサポートが組み込まれています。

• Response：parseIncompleteMarkdown がストリーミング中の Markdown を解析します
• Plan：isStreaming prop により、シマーアニメーションが有効になります
• Reasoning：isStreaming によってパネルが自動で開閉します
• Shimmer：アニメーションで読み込み状態を表示します

コンポーネント共通の主な機能

TypeScript のサポート

すべてのコンポーネントに、TypeScript プロジェクト向けの完全な型定義があります。

アクセシビリティ

コンポーネントには、適切な ARIA ラベル、キーボードナビゲーション、セマンティック HTML が含まれています。

レスポンシブデザイン

すべてのコンポーネントは、モバイルに適した操作性を備え、さまざまな画面サイズに対応します。

テーマとの統合

コンポーネントは CSS カスタムプロパティと currentColor を使用して、テーマに自動的に対応します。

複合コンポーネント

ほとんどのコンポーネントでは、柔軟に構成できる複合コンポーネントパターン（親コンポーネント＋子コンポーネント）を使用します。

検索方法

リファレンスファイルでは、次の方法で検索できます。

• コンポーネント名から検索：ファイル内でコンポーネント名を完全一致で検索します（例：「Message」）
• 機能から検索：機能を検索します（例：「streaming」、「copy button」、「citations」）
• ユースケースから検索：パターンを検索します（例：「loading」、「error」、「completed」）
• Props から検索：ユーザーからカスタマイズについて質問された場合は、特定の prop 名を検索します

重要な注意事項

CSS の設定

Response コンポーネントには、次の CSS の追加が必要です。

@source "../node_modules/streamdown/dist/index.js";

AI SDK のセットアップ

ほとんどのコンポーネントは、適切なバックエンドルートで AI SDK を使用することを前提としています。リファレンスファイルには、バックエンドのサンプルコードが含まれています。

コンポーネントの依存関係

多くのコンポーネントは、shadcn/ui のプリミティブと lucide-react のアイコンに依存しています。ユーザーはこれらの依存関係をインストールする必要があります。

分岐の実装

Branch コンポーネントは複数のメッセージ分岐の UI を管理しますが、AI SDK での分岐機能は実装しません。分岐機能にはカスタムのバックエンドロジックが必要です。

リソースの構成

リファレンスファイル（カテゴリ別）

• vercel-ai-elements-message-components.md - メッセージ表示
• vercel-ai-elements-conversation-management.md - 会話コンテナー
• vercel-ai-elements-input-interaction.md - ユーザー入力とアクション
• vercel-ai-elements-content-display.md - コンテンツのレンダリング
• vercel-ai-elements-ai-processing.md - 処理 UI と可視化
• vercel-ai-elements-advanced-features.md - 特殊なコンポーネント

各リファレンスファイルには、次の内容が含まれています。

• コンポーネントの説明とインストール手順
• 基本的な使用例
• props の完全なリファレンス
• 主な機能と性能
• AI SDK との統合パターン

すべてのリファレンスファイルはカテゴリ別に整理されているため、ユーザーから特定のコンポーネントや機能について質問されたときに、すばやく検索できます。