Vercel AI SDK

概要

VercelはNext.jsを開発した会社で、開発者がLLM（大規模言語モデル）をウェブサイトに簡単に統合できるよう支援するAI SDKを提供しています。このSDKは別途のNode.jsサーバーを使用するほとんどのフロントエンドフレームワークで適用可能であり、特にサーバーを標準で提供するNext.jsと一緒に使用する際に非常に便利です。

このガイドではVercel AI SDKを使用してウェブサイトにLLMベースの会話機能を追加する方法を説明します。

すでにNode.jsとパッケージマネージャーのpnpm（またはnpm）がインストールされていることを前提として説明します。

プロジェクト作成

まずNext.jsプロジェクトを作成し、AI SDKを追加します。

npx create-next-app@latest my-ai-app
cd my-ai-app

npm install ai

AI SDKを使用するにはLLMモデルを提供するproviderが必要です。この例ではFriendliAIを使用して設定を進めます。他のAI providerを使用したい場合はVercel AI SDK providers ドキュメントを参照してください。

FriendliAI設定

1. FriendliAIアカウント作成とAPIトークン発行

まずFriendliAIサイトでアカウントを作成し、Personal Access Tokens発行方法に従ってAPIトークンを発行します。発行されたトークンはflp_xxxxxx形式です。

2. 環境変数設定

プロジェクトルートに.envファイルを作成し、発行したトークンを環境変数として設定します。

.env

# .env
FRIENDLI_TOKEN=flp_xxxxx

これでFriendliAIのLlama 3.1 70bモデルを$5クレジット分無料で使用できます。 Llama 3.1モデルはMetaの最新LLMで優れた性能を誇ります。

3. FriendliAI providerパッケージインストール

npm install @friendliai/ai-provider

これでFriendliAIとVercel AI SDKを使用する準備が整いました。

会話機能の追加

AI SDKを使用してシンプルな会話機能を実装してみましょう。2つのファイルを修正する必要があります。

1. app/page.tsx

ユーザーとAI間の会話を管理するReactコンポーネントです。

"use client";

import { useChat } from "ai/react";

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, error } =
    useChat();

  const isWaiting =
    isLoading && messages[messages.length - 1]?.role !== "assistant";

  return (
    <>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === "user" ? "User: " : "AI: "}
          {message.content}
        </div>
      ))}

      {(isWaiting || error) &&
        (isWaiting
          ? "AI is thinking..."
          : error && "An error has occurred. Please try again later.")}

      <form onSubmit={handleSubmit}>
        <input name="prompt" value={input} onChange={handleInputChange} />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

このコードはユーザーのメッセージとAIの応答をUIに出力し、ユーザーがテキストを入力できるフォームを提供します。

2. app/api/chat/route.ts

AIの応答を処理するAPIルートです。FriendliAIのLlama 3.1 70bモデルを使用して会話を処理します。

import { friendli } from "@friendliai/ai-provider";
import { convertToCoreMessages, 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();

  const result = await streamText({
    model: friendli("meta-llama-3.1-70b-instruct"),
    system: "You are a helpful assistant.",
    messages: convertToCoreMessages(messages),
  });

  return result.toDataStreamResponse();
}

このAPIはPOSTリクエストで送信されたメッセージデータを処理し、AIの応答をストリーミングで返します。FriendliAIのmeta-llama-3.1-70b-instructモデルを使用して会話型の応答を生成します。

まとめ

これでVercel AI SDKとFriendliAIを使用してシンプルなLLMベースの会話機能を実装できます。より多くの機能を追加したり、他のproviderを使用したい場合はVercelとFriendliAIのドキュメントを参照してください。

Next.jsと一緒にVercel AI SDKを使用すれば、強力なLLMベースの機能をウェブサイトに簡単に統合できます。

前の記事 / 次の記事