Vercel AI SDKでAIチャットアプリが10分で完成！実験・開発レポート

2023年6月16日 18:02

昨日6月15日にVercelが発表した「Vercel AI SDK」とは何者なのか。

公式のブログ記事にはこのように書かれている。

Vercel AI SDKは、開発者がJavaScriptとTypeScriptで会話、ストリーミング、チャットのユーザーインターフェースを構築できるように設計されたオープンソースのライブラリです。SDKはReact/Next.js、Svelte/SvelteKitをサポートしており、Nuxt/Vueのサポートは近日中に開始されます。

なるほど。要するに簡単にAI搭載アプリを作れるようになると。

さらにこうある。

VercelのAI SDKは相互運用性を重視しており、OpenAI、LangChain、Hugging Face Inferenceのファーストクラスサポートを含んでいます。つまり、好みのAIモデルプロバイダに関係なく、Vercel AI SDKを活用して最先端のストリーミングUI体験を作成することができるのです。

ワクワクしますね。開発がさらに楽しくなります。

本日早速デモを作ってみました。マジで爆速で構築できます。サンプルのソースコードに多少アレンジを加えても、AIチャットアプリが10分程度で完成しました。

Vercel AI SDKを使ってみたところ、AIチャットアプリが10分で作れました。これなら誰でも簡単にChatGPTライクなAI搭載チャットを構築できますね。因みにフレームワークはNext.jsを使いました。 pic.twitter.com/3YhgwM6x0n
— komz (@komzweb) June 16, 2023

APIのモデルは新しい「gpt-3.5-turbo-0613」を使用しました。やっぱり速いですねー。レンダリングも非常にスムーズです。

gpt-3.5-turbo-0613 については、こちらで書いてます。

Next.jsとOpenAI APIを使用して簡単なチャットアプリを構築する手順は以下の通りです。

Next.jsアプリを作成する

npx create-next-app@latest

OpenAI APIキーを追加する

ルートディレクトリに .env.local ファイルを作成して、OPENAI_API_KEY にシークレットキーをセットします。

OPENAI_API_KEY=sk-****

モジュールをインストールする

npm install ai
npm install openai-edge

コードを書く

app ディレクトリ内に api/chat/route.ts ファイルを作成して、Vercel AI SDKを使ったコードを記述します。GPTモデルは自分の好きなモデルに置き換えてください。

// app/api/chat/route.ts
import { OpenAIStream, StreamingTextResponse } from 'ai'
import { Configuration, OpenAIApi } from 'openai-edge'

const config = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
})
const openai = new OpenAIApi(config)

export const runtime = 'edge'

export async function POST(req: Request) {
  const { messages } = await req.json()
  const response = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo-0613',
    stream: true,
    messages,
  })
  const stream = OpenAIStream(response)
  return new StreamingTextResponse(stream)
}

app/page.tsx ファイルを以下のように書き換えます。

'use client'

import { useChat } from 'ai/react'

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

  return (
    <main className="mx-auto max-w-3xl px-4 py-8">
      <div className="space-y-1">
        {messages.map((m) => (
          <div key={m.id}>
            <span>{m.role === 'user' ? '👤' : '🤖'}: </span>
            <span className={m.role === 'user' ? 'text-blue-400' : ''}>
              {m.content}
            </span>
          </div>
        ))}
      </div>
      <div className="mt-4">
        <form onSubmit={handleSubmit}>
          <input
            value={input}
            placeholder="Say something..."
            onChange={handleInputChange}
            className="w-full rounded px-2 py-1 text-gray-900 focus:outline-0"
          />
        </form>
      </div>
    </main>
  )
}

Vercel AI SDKには、データフェッチとストリーミングテキストレスポンスのレンダリングのためのフックが含まれています。ここでは useChat のおかげで上記のようにスッキリ、数行のコードで済みます。

完成！

サーバーを起動する

npm run dev

あとはブラウザで http://localhost:3000 にアクセスして遊んでみてください。

ソースコードはGitHubで確認できます。

Twitterのフォロワーが少なすぎて、つぶやけどつぶやけど誰にも届きません。。是非Twitter(@komzweb)もフォローしていただけると嬉しいです。

この記事が気に入ったらサポートをしてみませんか？