前提と注意事項
この記事では以下を前提としています。
- Ollama によって LLM がサーバとして動作していること
- Next.js の新規プロジェクトを作成できる環境であること
- 本記事では pnpm を使用します。yarn や npm でも代替可能ですが、その場合は適宜読み替えてください
もし Ollama をサーバとして動かす環境が末構築の場合は以下に構築手順を解説していますので必要な方は見てみてください。
🤖 Ollamaを使ってLlama3やPhi3をサーバとして動かしてAPIで操作する
Ollamaを使ってLlamaやPhi3をUbuneu上でサーバとして動かし、curlコマンドを使ってHTTPリクエストで質問を送信し、その結果を確認するまでの手順を解説します。
ritaiz.com
この記事のゴール
以下のように Next.js で Vercel AI SDK を使って Ollama や OpenAI に質問を送って回答を表示するだけのアプリを作成することをゴールとします。
Vercel AI SDK について
Vercel 社が提供している AI SDK は、AI モデルを簡単に利用できるようにするための SDK です。Vercel AI SDK を使うことで、OpenAI や Ollama で動かしている LLM とのチャットアプリを作成することができます。
AI SDK はコードも公開されており、以下が GitHub リポジトリになります。
vercel / ai
The Vercel AI SDK is a library for building AI-powered streaming text and chat UIs.
github.com
本記事では、Vercel AI SDK と Next.js を使って、自前で構築してある Ollama サーバや OpenAI とのチャットアプリを作成して動かすまでの手順を解説します。 なお、以下の公式ドキュメントに従った内容になります。
Next.js App Router Quickstart
In this quick start tutorial, you’ll build a simple AI-chatbot with a streaming user interface.
sdk.vercel.ai
Next.js の新規プロジェクトを作成する
pnpmを使用して Next.js の新規プロジェクトを作成します。ここでは、my-ai-appというプロジェクト名で作成します。
$ pnpm create next-app@latest my-ai-app作成したディレクトリに移動し、Vercel AI SDK と Zod をインストールします。
$ cd my-ai-app
$ pnpm install ai @ai-sdk/openai @ai-sdk/react zodzodはバリデーション用のパッケージです。以上では、Vercel AI SDK で OpenAI を使うために@ai-sdk/openaiをインストールしています。Ollama を使うには Ollama 用のパッケージをインストールする必要があります。次に説明します。
Ollama 用のパッケージをインストールする
公式ドキュメントでも紹介されているように、Vercel AI SDK で Ollama を使用するために、ollama-ai-providerを使用します。
以下でインストールします。
$ pnpm install ollama-ai-providerこれで Ollama を使う準備が完了しました。
ルートを作成する
チャットを Ollama に送信して回答を受け取るためのルートを作成します。app/api/chat/route.tsを新しく作成し、内容を以下のようにします。
import { streamText } from 'ai';
import { createOllama } from 'ollama-ai-provider';
// Allow streaming responses up to 30 seconds
export const maxDuration = 30;
const ollama = createOllama({
// OllamaのURLを指定
baseURL: 'http://192.168.100.163:11434/api',
});
export async function POST(req: Request) {
const { messages } = await req.json();
// ollamaに質問を送信し、回答をストリームで受け取る。
// 以下ではモデルとしてllama3:latestを指定していますが、適宜変更してください。
const result = await streamText({
maxRetries: 5,
maxTokens: 512,
model: ollama('llama3:latest'),
messages: messages,
temperature: 0.3,
});
return result.toAIStreamResponse();
}チャットの送信と回答表示のコンポーネントを作成する
チャットを入力して送信するための UI と、Ollama からの回答を表示するための UI を作成します。
app/page.tsxを以下のようにします。
'use client';
import { useChat } from 'ai/react';
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div className='flex flex-col w-full max-w-md py-24 mx-auto stretch'>
{messages.map((m) => (
<div key={m.id} className='whitespace-pre-wrap'>
{m.role === 'user' ? 'User: ' : 'AI: '}
{m.content}
</div>
))}
<form onSubmit={handleSubmit}>
<input
className='fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl text-black'
value={input}
placeholder='Say something...'
onChange={handleInputChange}
/>
</form>
</div>
);
}これで冒頭に載せた画像のようなチャット入力と回答を表示するコンポーネントになります。
あとは以下で Next.js を起動し、ブラウザでlocalhost:3000にアクセスして動作確認をしてみてください。
$ pnpm run devOpenAI を使う場合
もし自分で動かしている Olama ではなく、OpenAI と接続したい場合は、まず OpenAI の API キーを環境変数に保存します。
ここでは、env.localを作成して内容を以下のようにします。OpenAI の API キーは管理画面から取得可能です。
OPENAI_API_KEY=xxxxxxxxxあとは以下のようにルートを変更するだけで、UI 部分は変更せず完了です。
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
// Allow streaming responses up to 30 seconds
export const maxDuration = 30;
export async function POST(req: Request) {
const { messages } = await req.json();
// gpt-4oを指定していますが、適宜変更してください。
const result = await streamText({
model: openai('gpt-4o'),
messages,
});
return result.toAIStreamResponse();
}まとめ
以上で、Vercel AI SDK を使って Ollama や OpenAI とのチャットアプリを作成する手順を解説しました。 Vercel AI SDK を使うことで簡単に Ollama や OpenAI とのチャットを行うアプリを作成することができます。