先日行われた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>
    </>
  );
}

使いどころ

Vercel/AIは、外部のLLMを呼び出しますので、サーバー側での処理が基本です（APIキーが漏洩すると大変なことになるので）。そのため、Monacaアプリで利用する際にも、サーバー側の仕組みが必要になります。

Monacaアプリであれば、アプリの中で動作するアシスタントとして利用できそうです。業務アプリであれば、自社データと合わせた質問を行うことで、より高品質な回答が得られるでしょう。

ファイルも送信できるので写真をアップロードして情報を得たり、指定したPDFの質問をするといったこともできます。

なお、APIの呼び出しには課金がかかりますので、一般利用可能にする場合には注意が必要です。

まとめ

チャットボットやLLMを使ったチャット機能の実装はとてもホットな話題です。多くのサービスが同様のUIを用意しています。Vercel/AIを使えば、Next.jsアプリケーションの中に、簡単にチャットボットが組み込めます。

また、Vercel/AIは多くのAIプロバイダーを選択できるのも強みです。一番良いと思うサービスを使うことで、品質の高いチャットボット機能が実現できるでしょう。

Introduction