どう、これ？
あれっぽいでしょ？
これはどう？
これも、っぽいでしょ？
ソースコードはこちら
これ、AI Elements で作れます！
AI Elements？？
AI ElementsはVercel製のUIライブラリーです！
もちろんストリーミングにも対応してますし、RAGの情報源や思考過程を表示するコンポーネントも用意されているので、超便利です。
Next.jsとAI SDKとAI Elementsを使うと簡単におしゃれチャットアプリが作れます！
全部Vercel製ってのがすごいですね
手順
Next.jsプロジェクトの作成とライブラリーの追加
-
Next.jsプロジェクトを新規作成します
npx create-next-app@latest chat-app✔ Would you like to use TypeScript? … No / Yes ✔ Which linter would you like to use? › ESLint ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like your code inside a `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Yes ✔ Would you like to use Turbopack? (recommended) … No / Yes ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yesディレクトリ移動しておきます
cd chat-app/ -
AI Elementsを追加します
npx ai-elements@latest✔ You need to create a components.json file to add components. Proceed? … yes ✔ Which color would you like to use as the base color? › Neutral ✔ Writing components.json. -
AI SDKを追加します
npm install ai @ai-sdk/react zod -
AI SDKのBedrockプロバイダーを追加します
LLMはAWSのAmazon Bedrockで提供されているgpt-ossを使うことにします。（Reasoningの動作を見たかったので。）
npm install @ai-sdk/amazon-bedrock @aws-sdk/credential-providers
サーバー側のAPIを実装
app/api/chat/route.tsを実装します。
画面側の実装
app/api/chat/route.tsを実装します。ここでいよいよAI Elementsの登場です。
まず、会話のやり取りが表示されるエリアは、<Conversation></Conversation>です。
の中に色々含めています。
- ConversationContent ・・・ 会話のやり取り
- ConversationScrollButton ・・・ 会話の最下部までスクロールするボタン
- Sources ・・・ RAGの情報源など
- Reasoning ・・・ 思考の過程
次に、プロンプト入力欄は<PromptInput></PromptInput>です。
テキストの入力だけでなく、モデルを選択するボタンなど、各種用意されています。
動作確認
devサーバーを起動します
npm run dev
> ai-elements-sample@0.1.0 dev
> next dev --turbopack
▲ Next.js 15.5.2 (Turbopack)
- Local: http://localhost:3000
- Network: http://172.17.0.2:3000
できました！
自分が作ったとは思えない出来栄え！！
ChatGPT＆Claude.aiっぽくする
追加でUIコンポーネントを追加します。説明してませんでしたが、AI Elementsはshadcn/uiを内部で利用しているので、shadcn/uiのコンポーネントも組み合わせて使用できます。
２つ追加します。
npx shadcn@latest add sonner dropdown-menu
ChatGPTの場合
Claude.aiの場合
exampleから拝借して一部改変してます。
まとめ
ChatGPTクローンを作りたいときに便利！