VercelがリリースしたAIチャットを開発できるVercel/AIとは

先日行われたVercelの年次カンファレンス、Vercel Ship 2024にて発表されたのがVercel/AIです。LLMを使ったAIチャットボットを簡単に開発できるJavaScript API、そしてUIコンポーネントになります。

今回はこのVercel/AIの使い方を通じて、どんな使い方ができそうか解説します。

Vercelとは

Vercelは、Next.jsの開発元であるVercel Inc.が提供するサーバーレスプラットフォームです。Vercelは、静的サイトのホスティングやAPIエンドポイント（FaaS）の作成、デプロイなどを簡単に行うことができます。他にもVercel Postgresなど、静的サイトホスティングに加えて動的サイトにも利用できる機能を多数提供しています。

Vercel/AIについて

Vercel/AIは以下の3つのパッケージで構成されています。

AI SDK Core
AI SDK RSC
AI SDK UI

AI SDK Core

AI SDK Coreは、Vercel/AIの基礎的機能を提供するAPIです。OpenAIなどのLLMを利用して、プロンプトを呼び出したり、画像を送ったりできます。

AI SDK RSC

RSCはReact Server Componentsの略で、チャットボット用サーバーコンポーネントです。ストリーミングでの表示更新にも対応しています。

AI SDK UI

AI SDK UIはクライアントサイドのUIです。以下の3つのフックが用意されています。

useChat
useCompletion
useAssistant

Vercel/AIの使い方

プロンプトを実行する処理です。 generateText 関数を呼び出すだけで使えます。

import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"
const { text } = await generateText({
    model: openai("gpt-4-turbo")
    prompt: "What is love?"
})

OpenAIの他、以下のプロバイダーが利用できます。

OpenAI Provider (@ai-sdk/openai)
Anthropic Provider (@ai-sdk/anthropic)
Google Generative AI Provider (@ai-sdk/google)
Google Vertex Provider (@ai-sdk/google-vertex)
Mistral Provider (@ai-sdk/mistral)

画像の場合はURL、またはBlobを指定します。

const result = await generateText({
  model: yourModel,
  messages: [
    {
      role: "user",
      content: [
        { type: "text", text: "Describe the image in detail." },
        {
          type: "image",
          image: new URL(
            "https://github.com/vercel/ai/blob/main/examples/ai-core/data/comic-cat.png?raw=true",
          ),
        },
      ],
    },
  ],
});

UI側です。 useChat を使うのがポイントです。入力中や送信処理などがすべて任せられます。

"use client";

import { useChat } from "ai/react";

export default function Page() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "api/chat",
  });

  return (
    <>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === "user" ? "User: " : "AI: "}
          {message.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          name="prompt"
          value={input}
          onChange={handleInputChange}
          id="input"
        />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}