導入

今日の AI の進歩により、コンピューター上で生成 AI モデルをセットアップしてチャットボットを作成するのは簡単です。

この記事では、Ollama と Next.js を使用してシステムにチャットボットをセットアップする方法を説明します

オラマのセットアップ

システムに Ollama をセットアップすることから始めましょう。 ollama.com にアクセスし、お使いの OS に合わせてダウンロードしてください。これにより、ターミナル/コマンド プロンプトで ollam コマンドを使用できるようになります。

コマンド ollam -v
を使用して Ollama のバージョンを確認します Ollama ライブラリ ページでモデルのリストを確認してください。

モデルをダウンロードして実行する

モデルをダウンロードして実行するには、コマンド ollama run
を実行します。 例: ollam run llama3.1 または ollam run gemma2

ターミナル内でモデルと直接チャットできるようになります。

Web アプリケーションのセットアップ

Next.js の基本セットアップ

• 最新バージョンの Node.js をダウンロードしてインストールします
• 目的のフォルダーに移動し、npx create-next-app@latest を実行して Next.js プロジェクトを生成します。
• 定型コードを生成するためにいくつかの質問が行われます。このチュートリアルでは、すべてをデフォルトのままにします。
• 選択したコード エディターで新しく作成したプロジェクトを開きます。 VS Code を使用します。

依存関係のインストール

ollam を使用するには、インストールする必要がある npm パッケージがいくつかあります。

1. ヴェルセルのai。
2. ollama Ollama JavaScript ライブラリは、JavaScript プロジェクトを Ollama と統合する最も簡単な方法を提供します。
3. ollama-ai-provider は、ai と ollama を接続するのに役立ちます。
4. チャットの結果はマークダウン スタイルでフォーマットされ、マークダウンを解析するには、react-markdown パッケージを使用します。

これらの依存関係をインストールするには、npm i ai ollama ollama-ai-provider を実行します。

チャットページを作成する

app/src の下に、page.tsx という名前のファイルがあります。

その中のすべてを削除して、基本的な機能コンポーネントから始めましょう:

src/app/page.tsx

export default function Home() {
  return (
    

        {/* Code here... */}
    
  );
}

まず、ai/react と React-Markdown から useChat フックをインポートしてみましょう

"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

フックを使用しているため、このページをクライアント コンポーネントに変換する必要があります。

ヒント: チャット用に別のコンポーネントを作成し、それを page.tsx で呼び出して、クライアント コンポーネントの使用を制限できます。

コンポーネントでは、useChat フックからメッセージ、入力、handleInputChange、および handleSubmit を取得します。

    const { messages, input, handleInputChange, handleSubmit } = useChat();

JSX で、会話を開始するためにユーザー入力を取得する入力フォームを作成します。

これについてよく考えてみると、ハンドラーを修正したり、入力値の状態を維持したりする必要がなく、useChat フックがそれを提供してくれるということです。

メッセージ配列をループすることでメッセージを表示できます。

    messages.map((m, i) => (
{m}
)

送信者の役割に基づいてスタイル設定されたバージョンは次のようになります:

  

    

      {messages.length ? (
        messages.map((m, i) => {
          return m.role === "user" ? (
            

              You
              

                {m.content}
            
          ) : (
            

              AI
              

                {m.content}
            
          );
        })
      ) : (
        

          
Local AI Chat
        
      )}
    
  

ファイル全体を見てみましょう
src/app/page.tsx

"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

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

              

                
            
        
    );
}

これでフロントエンド部分は完成です。次に、API を処理しましょう。

APIの処理

まず、app/api/chat 内に Route.ts を作成しましょう。
Next.js の命名規則に基づいて、localhost:3000/api/chat エンドポイントでリクエストを処理できるようになります。

src/app/api/chat/route.ts

import { createOllama } from "ollama-ai-provider";
import { streamText } from "ai";

const ollama = createOllama();

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: ollama("llama3.1"),
    messages,
  });
  return result.toDataStreamResponse();
}

上記のコードは基本的に ollam と vercel ai を使用して、データを応答としてストリーミングバックしています。

• createOllama は、システムにインストールされているモデルと通信する ollam のインスタンスを作成します。
• POST 関数は、post メソッドを備えた /api/chat エンドポイントのルート ハンドラーです。
• リクエスト本文には、以前のすべてのメッセージのリストが含まれています。したがって、制限することをお勧めします。制限しないと、時間の経過とともにパフォーマンスが低下します。 この例では、ollam 関数は「llama3.1」をモデルとして受け取り、メッセージ配列に基づいて応答を生成します。

システム上の生成 AI

npm run dev を実行して、開発モードでサーバーを起動します。
ブラウザを開いて localhost:3000 に移動し、結果を確認します。
すべてが正しく設定されていれば、独自のチャットボットと会話できるようになります。

ソースコードはここで見つけることができます: https://github.com/parasbansal/ai-chat

ご質問がございましたら、コメント欄でお知らせください。お答えできるよう努めます。