AI Elements - Vercel製のAIネイティブUIコンポーネントが想像以上に使える件

はじめに

AIアプリを作っていると、チャットUIとか推論プロセスの表示とか、地味に面倒なUI実装が多いですよね。

「ChatGPTみたいなUI作りたいけど、一から組むのは大変...」

そう思っていたところに見つけたのが、Vercel製のAI Elementsというライブラリ。shadcn/uiをベースにしたAI特化のコンポーネント集で、これが個人的にかなり良かったので紹介します。

AI Elementsとは

AI Elementsは、Vercelが開発しているオープンソースのReactコンポーネントライブラリです。

GitHubでスター1,200超え、41人以上のコントリビューターがいる、それなりに活発なプロジェクトですね。

正直なところ、「AIアプリ向けUIライブラリ」は他にもあるんですが、これはshadcn/uiベースなのが強みなんですよ。既存のshadcn/uiプロジェクトにそのまま組み込めるし、カスタマイズも自由にできる。

特徴・メリット

1. コンポーネントが豊富

チャットボット関連だけで22種類、ワークフロー関連で7種類のコンポーネントが用意されています。

主なものを挙げると：

Conversation / Message - チャット会話のコンテナとメッセージ表示
chain-of-thought / reasoning - AI推論プロセスの可視化
code-block - シンタックスハイライト付きコード表示
tool - ツール使用状況の可視化
canvas / node - ReactFlowベースのワークフロー表示

特に推論プロセスの表示は、Claude Code的なUIを作りたい人には刺さると思います。

2. Vercel AI SDKとの親和性が高い

@ai-sdk/reactのuseChatフックとシームレスに連携できるのがポイント。状態管理とかを自前で書く必要がないので、かなり時短になる。

3. カスタマイズ性

shadcn/uiと同じく、コンポーネントのソースコードが直接プロジェクトにコピーされる方式。ブラックボックスじゃないから、好きなようにいじれます。

4. TypeScriptフレンドリー

コードベースの85%がTypeScript。型定義がしっかりしているので、開発体験が良いですね。

インストール方法

前提条件

Node.js 18以上
Next.jsプロジェクト
shadcn/uiが初期化済み
Tailwind CSS（CSS Variablesモード）

全コンポーネント一括インストール

npx ai-elements@latest

これ一発で全部入ります。依存関係も自動で追加してくれるので楽。

個別インストール

必要なものだけ入れたい場合はこちら：

npx ai-elements@latest add message
npx ai-elements@latest add conversation
npx ai-elements@latest add code-block

shadcn CLI経由

既存のshadcn CLIを使っている場合：

npx shadcn@latest add https://registry.ai-sdk.dev/all.json

コンポーネントは@/components/ai-elements/配下にインストールされます。

基本的な使い方

シンプルなチャットUIの実装例：

'use client';

import { useChat } from '@ai-sdk/react';
import {
  Conversation,
  ConversationContent,
} from '@/components/ai-elements/conversation';
import {
  Message,
  MessageContent,
  MessageResponse,
} from '@/components/ai-elements/message';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <Conversation>
      <ConversationContent>
        {messages.map((message, index) => (
          <Message key={index} from={message.role}>
            <MessageContent>
              <MessageResponse>{message.content}</MessageResponse>
            </MessageContent>
          </Message>
        ))}
      </ConversationContent>

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="メッセージを入力..."
        />
        <button type="submit">送信</button>
      </form>
    </Conversation>
  );
}

useChatフックがメッセージの状態管理を全部やってくれるので、UIの実装に集中できるのが良いですね。

コードブロック付きの応答表示

AIがコードを返してきた場合の表示：

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

function CodeResponse({ code, language }: { code: string; language: string }) {
  return (
    <CodeBlock language={language}>
      {code}
    </CodeBlock>
  );
}

シンタックスハイライトとコピーボタンが標準で付いてきます。

推論プロセスの表示

Claude的な「考え中...」の表示を実装する場合：

import { Reasoning } from '@/components/ai-elements/reasoning';
import { ChainOfThought } from '@/components/ai-elements/chain-of-thought';

function ThinkingProcess({ steps }: { steps: string[] }) {
  return (
    <Reasoning>
      {steps.map((step, i) => (
        <ChainOfThought key={i}>{step}</ChainOfThought>
      ))}
    </Reasoning>
  );
}