【GPT】初心者でも理解できるよう、GPT様にVercel AI SDKのGuide: Chat Bot部分のチュートリアルを解説付き和訳して頂いた。

雑記

最近Next.jsってすげー、Vercel便利すぎー、となりはじめたキングオブヌーブですが、「Vercel AI SDK」というSDKを使うとGPTのAPIを利用したチャットアプリの制作が簡単になるという記事を見かけた(https://zenn.dev/azuharu07/articles/e5d0d8f1035765)ので、試しに公式のチュートリアルを見てみました。

OpenAI - Vercel AI SDK
An open source library for building AI-powered user interfaces.

んにゃぴ・・・よくわかんなかったです。なので、解説させるついでに和訳もGPT様にやってもらいました。
以下、その内容です。

プロンプト:以下はVercel AI SDKというSDKのチュートリアルです。都度初心者かつ中学生程度の理解力の者に向けた、丁寧で易しい注釈を入れながら和訳してください。
(公式のGuide: Chat Bot部分をコピペ)

GPT:もちろん、和訳しながら詳細な説明を行います。チュートリアルがプログラミングに関する内容ですので、一部の専門用語についてはそのままにしておきますが、簡単な注釈を追加しますね。

Vercel AI SDK(ソフトウェア開発キット)は、OpenAIのAPIを簡単に使用するためのユーティリティ(補助ツール)を提供しています。 このガイドでは、チャットボットとテキスト補完アプリを作成するためにこれらのユーティリティをどのように使用するかを説明します。

Guide: Chat Bot(チャットボットガイド)

a. Create a Next.js app(Next.jsアプリを作成)

Create a Next.js application and install ai and openai, the Vercel AI SDK and OpenAI API client respectively:

「Next.jsアプリケーションを作成し、Vercel AI SDK(ai)とOpenAI APIクライアント(openai)をインストールします。」

以下のコマンドは、Next.jsアプリケーションを作成し(「create-next-app my-ai-app」)、そのアプリケーションのディレクトリに移動し(「cd my-ai-app」)、必要なツールをインストールするものです(「pnpm install ai openai」)。

pnpm dlx create-next-app my-ai-app
cd my-ai-app
pnpm install ai openai

b. Add your OpenAI API Key to .env(.envにOpenAI APIキーを追加)

Create a .env file in your project root and add your OpenAI API Key:

「プロジェクトのルートに.envファイルを作成し、OpenAI APIキーを追加します。」

.envファイルは、プロジェクトの秘密の情報(ここではAPIキー)を保存する場所です。

.env
OPENAI_API_KEY=xxxxxxxxx

c. Create a Route Handler(ルートハンドラーを作成)

Create a Next.js Route Handler that uses the Edge Runtime to generate a chat completion via OpenAI and then stream it back to our Next.js.

「Edgeランタイムを使用して、OpenAI経由でチャット補完を生成し、それをNext.jsにストリーム(連続的に送信)するNext.jsルートハンドラーを作成します。」

ルートハンドラーは、特定のURLへのリクエスト(ここではチャットのメッセージ)を処理するためのプログラム部分です。

コード例(app/api/chat/route.ts)は、指定された「メッセージ」をOpenAIに送り、返ってきた返答(補完)をユーザーにストリームとして送るものです。以下のコードブロックは、その具体的な実装です。

(コード略)

「import」で必要なツールを取り込みます。
「openai」はOpenAIとやりとりを行うクライアントです。
「runtime」はこのコードが動く環境を指定します。’edge’はVercelのEdgeプラットフォームを指します。
「POST」関数は、メッセージを受け取り、それをOpenAIに送り、返答をストリームとして返す役割を持っています。

Wire up the UI(UIを結線・設定)

Create a Client component with a form that we’ll use to gather the prompt from the user and then stream back the completion from.

「ユーザーからプロンプト(メッセージ入力)を収集し、補完をストリームバックするためのフォームを持つクライアントコンポーネントを作成します。」

(コード略)

「useChat」はメッセージの送受信を助けるツールです。
メッセージは「messages」として、入力は「input」として管理されます。
メッセージの送信や入力の変更は「handleSubmit」や「handleInputChange」で行います。
以下のUIコードは、これらの情報や機能をユーザーが利用できる形にして表示します。
このチュートリアルは、Vercel AI SDKとOpenAIを使って、Next.js上で動くシンプルなチャットボットを作る方法を説明しています。開発の流れやコードの具体的な動きについて、疑問があればどうぞ聞いてくださいね!

コメント

タイトルとURLをコピーしました