Loading...

2024-06-12(水) 15:00

🚀 Vercel AI SDKでOllamaやOpenAIを使用したチャットアプリを作成する

AIOllamaOpenAINext.js
Vercel社が提供しているAI SDKを使って、Ollamaで動かしているLLMやOpenAIとのチャットアプリをNext.jsで作成、動かすまでの手順を解説します。

目次

前提と注意事項

この記事では以下を前提としています。

  • 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でOllamaやOpenAIを使用したチャットアプリを作成する

Vercel AI SDK について

Vercel 社が提供している AI SDK は、AI モデルを簡単に利用できるようにするための SDK です。Vercel AI SDK を使うことで、OpenAI や Ollama で動かしている LLM とのチャットアプリを作成することができます。

Vercel AI SDK

The AI Framework for TypeScript

sdk.vercel.ai

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というプロジェクト名で作成します。

Next.jsの新規プロジェクトを作成する
$ pnpm create next-app@latest my-ai-app

作成したディレクトリに移動し、Vercel AI SDK と Zod をインストールします。

作成したディレクトリに移動してVercel AI SDKとZodをインストールする
$ cd my-ai-app
$ pnpm install ai @ai-sdk/openai @ai-sdk/react zod

zodはバリデーション用のパッケージです。以上では、Vercel AI SDK で OpenAI を使うために@ai-sdk/openaiをインストールしています。Ollama を使うには Ollama 用のパッケージをインストールする必要があります。次に説明します。

Ollama 用のパッケージをインストールする

公式ドキュメントでも紹介されているように、Vercel AI SDK で Ollama を使用するために、ollama-ai-providerを使用します。

以下でインストールします。

ollama-ai-providerをインストールする
$ pnpm install ollama-ai-provider

これで Ollama を使う準備が完了しました。

ルートを作成する

チャットを Ollama に送信して回答を受け取るためのルートを作成します。app/api/chat/route.tsを新しく作成し、内容を以下のようにします。

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を以下のようにします。

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にアクセスして動作確認をしてみてください。

Next.jsを起動する
$ pnpm run dev

OpenAI を使う場合

もし自分で動かしている Olama ではなく、OpenAI と接続したい場合は、まず OpenAI の API キーを環境変数に保存します。 ここでは、env.localを作成して内容を以下のようにします。OpenAI の API キーは管理画面から取得可能です。

.env.local
OPENAI_API_KEY=xxxxxxxxx

あとは以下のようにルートを変更するだけで、UI 部分は変更せず完了です。

app/api/chat/route.ts
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 とのチャットを行うアプリを作成することができます。