ai-elements-chatbot

AI Elements チャットボットコンポーネント

ステータス：本番環境で利用可能 ✅ | 最終確認日：2025-11-18

---

AI Elements とは？

AI アプリケーション向けの、本番環境で利用可能なチャット UI コンポーネントです。

• shadcn/ui をベースに構築
• 30 種類以上のコンポーネント（Message、Conversation、Response など）
• Vercel AI SDK v5 に対応
• ストリーミングに対応
• ツール／関数呼び出しの表示
• 推論の可視化

---

クイックスタート（15 分）

前提条件

• Next.js 15+（App Router）
• shadcn/ui の初期化が完了していること
• Tailwind v4
• AI SDK v5+

1. 初期化

pnpm dlx ai-elements@latest init

2. コンポーネントを追加

pnpm dlx ai-elements@latest add message conversation response prompt-input

3. チャットインターフェースを作成

'use client';

import { useChat } from 'ai/react';
import { Conversation } from '@/components/ui/ai/conversation';
import { Message } from '@/components/ui/ai/message';
import { Response } from '@/components/ui/ai/response';
import { PromptInput } from '@/components/ui/ai/prompt-input';

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat'
  });

  return (
    <div className="flex h-screen flex-col">
      <Conversation>
        {messages.map((msg) => (
          <Message key={msg.id} role={msg.role}>
            <Response markdown={msg.content} />
          </Message>
        ))}
      </Conversation>

      <PromptInput
        value={input}
        onChange={handleInputChange}
        onSubmit={handleSubmit}
      />
    </div>
  );
}

セットアップ手順の全容は references/setup-guide.md を読み込んでください。

---

コアコンポーネント

Message と Conversation

import { Conversation } from '@/components/ui/ai/conversation';
import { Message } from '@/components/ui/ai/message';

<Conversation>
  {messages.map((msg) => (
    <Message key={msg.id} role={msg.role}>
      {msg.content}
    </Message>
  ))}
</Conversation>

Response（Markdown）

import { Response } from '@/components/ui/ai/response';

<Response markdown={content} />

PromptInput

import { PromptInput } from '@/components/ui/ai/prompt-input';

<PromptInput
  value={input}
  onChange={handleInputChange}
  onSubmit={handleSubmit}
/>

CodeBlock

import { CodeBlock } from '@/components/ui/ai/code-block';

<CodeBlock code={code} language="typescript" />

Reasoning（思考）

import { Reasoning } from '@/components/ui/ai/reasoning';

<Reasoning content={thinking} />

Tool（関数呼び出し）

import { Tool } from '@/components/ui/ai/tool';

<Tool name="search" args={{ query: "..." }} result={result} />

---

重要なルール

必ず行うこと ✅

1. 最初に shadcn/ui をインストールする（AI Elements に必要です）
2. Next.js App Router を使用する（Pages Router はサポートされていません）
3. AI SDK v5 を使用する（v4 からの破壊的変更があります）
4. CLI 経由でインストールする（pnpm dlx ai-elements@latest）
5. レジストリを components.json に追加する
6. クライアントコンポーネントを使用する（'use client' ディレクティブ）
7. UX 向上のため、レスポンスをストリーミングする
8. 読み込み状態を処理する
9. エラーバウンダリを追加する
10. モバイルでテストする

絶対に行わないこと ❌

1. npm パッケージとしてインストールしない（コンポーネントはコピーされます）
2. Pages Router を使用しない（App Router のみ対応）
3. AI SDK v4 を使用しない（破壊的変更があります）
4. 前提条件を省略しない（shadcn/ui、Tailwind）
5. コアの型を変更しない（shadcn の型を拡張します）
6. ストリーミングなしで使用しない（本来の目的を損ないます）
7. アクセシビリティ対応を省略しない（ARIA ラベル）
8. スタイルをハードコードしない（Tailwind を使用）
9. エラー処理を省略しない（API の失敗に備えます）
10. モバイル対応を無視しない（レスポンシブ対応が必要です）

---

利用可能なコンポーネント（30 種類以上）

コア：

• Message
• Conversation
• Response
• PromptInput

コンテンツ：

• CodeBlock
• Markdown
• Tool
• Reasoning
• Sources

アクション：

• Actions
• CopyButton
• ShareButton
• RegenerateButton

高度なコンポーネント：

• BranchNavigation
• ThinkingDisplay
• WebPreview

---

よくあるユースケース

ユースケース 1：基本的なチャット

const { messages, input, handleInputChange, handleSubmit } = useChat();

return (
  <>
    <Conversation>
      {messages.map(m => (
        <Message key={m.id} role={m.role}>
          <Response markdown={m.content} />
        </Message>
      ))}
    </Conversation>
    <PromptInput value={input} onChange={handleInputChange} onSubmit={handleSubmit} />
  </>
);

ユースケース 2：ツール呼び出しを使用

{messages.map(m => (
  <Message key={m.id} role={m.role}>
    {m.toolInvocations?.map(tool => (
      <Tool key={tool.toolCallId} name={tool.toolName} args={tool.args} result={tool.result} />
    ))}
    <Response markdown={m.content} />
  </Message>
))}

ユースケース 3：推論を使用

<Message role="assistant">
  {reasoning && <Reasoning content={reasoning} />}
  <Response markdown={content} />
</Message>

ユースケース 4：コードブロックを使用

<Response markdown={content}>
  {(node) => node.type === 'code' ? (
    <CodeBlock code={node.value} language={node.lang} />
  ) : null}
</Response>

ユースケース 5：ソースを使用

<Message role="assistant">
  <Response markdown={content} />
  <Sources sources={sources} />
</Message>

---

API ルート

基本的なストリーミング

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai('gpt-4'),
    messages
  });

  return result.toDataStreamResponse();
}

ツールを使用

const result = streamText({
  model: openai('gpt-4'),
  messages,
  tools: {
    search: {
      description: 'Search the web',
      parameters: z.object({ query: z.string() }),
      execute: async ({ query }) => {
        return await search(query);
      }
    }
  }
});

---

AI Elements を使用する場面

次の場合に使用します：

• ChatGPT 形式のインターフェースを構築する
• 本番環境で利用可能なコンポーネントが必要
• Vercel AI SDK を使用する
• ストリーミングレスポンスが必要
• ツール／関数の表示が必要
• 推論を可視化したい

次の場合は使用しないでください：

• Next.js App Router を使用していない
• shadcn/ui を導入していない
• Pages Router が必要
• 独自のデザインシステムを構築する

---

リソース

リファレンス（references/）：

• component-catalog.md - 8 種類すべての AI Elements コンポーネントと使用例
• example-reference.md - 完全な統合例とパターン
• setup-guide.md - Next.js 15 と shadcn/ui を使った手順ごとのセットアップ

テンプレート（templates/）：

• コンポーネントの使用例はリファレンスファイルにあります

---

公式ドキュメント

• AI Elements：https://ai-elements.vercel.app
• コンポーネント：https://ai-elements.vercel.app/docs/components
• 使用例：https://github.com/ai-elements/ai-elements/tree/main/examples

---

質問や問題がある場合：

1. セットアップ手順の全容は references/setup-guide.md を確認してください
2. 前提条件（Next.js 15+、shadcn/ui、AI SDK v5）を確認してください
3. 公式の使用例を参照してください