はじめに
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>
);
}
実践的なユースケース
1. 社内向けAIアシスタント
社内ドキュメントを検索するRAGチャットボットとか作るとき、sourcesコンポーネントで参照元を表示したり、inline-citationで引用を明示したりできます。これ、意外と大事なんですよね。
2. AIコーディングアシスタント
code-blockとartifactを組み合わせれば、Cursor的なコード生成UIが作れます。web-previewでライブプレビューも可能。
3. AIエージェントダッシュボード
canvasとnodeを使えば、エージェントの実行フローを可視化できます。ReactFlowベースなので、ノード間の接続とかも表現できる。
4. ツール呼び出しの可視化
toolコンポーネントでFunction Callingの実行状況を表示。confirmationコンポーネントで実行前の確認UIも作れます。
まとめ
AI Elementsは、AIアプリのUI実装で「あると嬉しい」コンポーネントが一通り揃っているライブラリです。
良い点:
- Vercel製で信頼性がある
- shadcn/uiベースでカスタマイズしやすい
- AI SDK連携が楽
- TypeScriptサポートが充実
注意点:
- Next.js前提の設計
- shadcn/uiの初期設定が必要
- コンポーネント数が多いので最初は迷うかも
個人的には、AIチャットアプリを作るなら第一選択肢になるレベルだと思います。特にVercel AI SDKを使っている人には一択ですね。
30代になってから「車輪の再発明」をしなくなった気がするんですが、こういうライブラリをサクッと使えるのは本当にQOL上がります。
公式ドキュメントも充実しているので、興味がある方はぜひ試してみてください。
