NextJS で OpenAI Response をストリーミングする方法

まとめ：

Vercel の AI SDK を使用して NextJS で OpenAI 応答をシームレスにストリーミングする方法を学びます。 このガイドで概説されているシンプルな統合プロセスにより、開発者はリアルタイム AI 生成の力を効率的に活用し、ユーザー エクスペリエンスとワークフローの効率を向上させることができます。

今日の急速に進化するデジタル環境では、競争力を維持しようと努めている企業にとって、高度な AI 機能の統合が不可欠になっています。 OpenAI 開発会社として、NextJS のような最先端テクノロジーの力を利用して OpenAI 応答の生成と管理のプロセスを合理化すると、多くの利点が得られます。

ユーザー エクスペリエンスの強化からワークフロー効率の最適化まで、 OpenAI 開発会社の専門知識は、NextJS フレームワーク内での OpenAI の機能のシームレスな統合と利用に大きな影響を与える可能性があります。 このガイドでは、OpenAI 開発企業が OpenAI の対応を合理化する際に NextJS の可能性を効果的に活用し、企業がイノベーションと効率性の新たな領域を開拓できるようにするために不可欠な戦略と洞察を詳しく掘り下げます。

あなたがイライラして、NextJS で OpenAI 応答をストリーミングするためにネットサーフィンしていることを私たちは知っています。 OpenAI 応答をストリーミングする方法はたくさんありますが、ストリーム後にデータを解析して読み取り可能にするために行うべきこともたくさんあります。

注: ブログ全体で NextJS と Vercel AI SDK を使用します。

Next.jsとは何ですか?

Next.js は、フルスタック Web アプリケーションを構築するための React フレームワークです。 React Components を使用してユーザー インターフェイスを構築し、Next.js を追加機能と最適化に使用します。

Next.js は内部的に、バンドルやコンパイルなど、React に必要なツールを抽象化し、自動的に構成します。 これにより、構成に時間を費やすことなく、アプリケーションの構築に集中できます。

個人の開発者であっても、大規模なチームの一員であっても、Next.js はインタラクティブで動的、高速な React アプリケーションの構築に役立ちます。

ヴェルセルって何？

Vercel は、追加の構成を必要とせずに、Web アプリをより迅速に構築および展開するために必要なツール、ワークフロー、インフラストラクチャを提供する開発者向けのプラットフォームです。

Vercel は、すぐに使用できる一般的なフロントエンド フレームワークをサポートしており、そのスケーラブルで安全なインフラストラクチャは世界中に分散されており、最適な速度でユーザーの近くのデータ センターからコンテンツを提供します。

Vercel と Nextjs の関係は何ですか?

Vercel のプラットフォームは Next.js の作成者によって作成され、Next.js アプリケーション用に設計されています。 結論として、Vercel と Next.js の関係は、Web アプリケーションの構築とデプロイの方法を再定義する共生パートナーシップを表しています。 両方のプラットフォームの強みを活用することで、開発者は新たな可能性を解き放ち、今日の競争環境の中で際立った優れた Web エクスペリエンスを提供できます。

Vercel は、開発中に、自動プレビューや運用環境、プレビュー展開に関するコメントなど、プロジェクトでのリアルタイム コラボレーションのためのツールを提供します。

Vercel と NextJS を使用してストリーミングを簡単にするにはどうすればよいでしょうか?

2023 年 6 月、Vercel は、組み込み LLM アダプター / ストリーミング ファースト UI ヘルパー / ストリーム ヘルパーおよびコールバックを提供する新しいライブラリ ai (Vercel AI SDK) をリリースしました。 このライブラリ以降、OpenAI のストリーミング応答が非常に簡単になりました。

例に入る前に、Vercel AI SDK がサポートするノード ライブラリ/フレームワークについて説明します。

React/Next.js、Svelte/SvelteKit をサポートしており、Nuxt/Vue も近々サポートされる予定です。

例 — NextJS のフロントエンド/バックエンドの両方 (反応フレームワーク)

ステップ 1: NextJS アプリの作成と Vercel AI SDK のインストール

npx create-next-app@latest

SDK をインストールするには、ターミナルに次のコマンドを入力します。

npm私は愛

Openai をインストールするには、ターミナルに次のコマンドを入力します。

npm 私はオープンナイ

このデモをシンプルかつ理解しやすくするために、npx create-next-app@latest が作成したシンプル/デフォルトのフォルダー構造に従いました。

ステップ 2: 応答をストリーミングするフロントエンド ページを作成する

「クライアントを使用する」

「反応」からインポート { useState };

デフォルト関数 Home() をエクスポート {

const [質問, setQuestion] = useState("")

const [answer, setAnswer] = useState("")

/// openai ルーターを呼び出し、ストリーミング応答を処理する関数

非同期関数 retrieveResponse() {

/// ルートを呼び出す

const 応答: any = await fetch("/api/chat", {

メソッド: "POST"、

本文: JSON.stringify({

質問

})、

次へ: { 再検証: 0 }

})

let resptext = "";

const リーダー = 応答.body

.pipeThrough(new TextDecoderStream())

.getReader();

/// ストリームを続行します

while (true) {

const { 値、完了 } = Reader.read() を待ちます。

if (完了) {

壊す;

}

resptext += 値;

setAnswer(応答テキスト);

}

}

戻る （

<div>

<label htmlFor="質問する"></label>

<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>

<button onClick={retliveResponse}>ストリーム応答</button>

<br />

<p>{答え}</p>

</div>

);

}

上記のコンポーネントは、ユーザーが質問を入力し、ボタンをクリックして質問をサーバー側 API (/api/chat) に送信し、サーバーからのストリーミング応答をリアルタイムで表示できるインターフェイスを作成します。

ステップ 3: 応答をストリーミングするバックエンド ルートを作成する

上記のコードは、HTTP リクエストから質問を受け取り、それを OpenAI API に送信して処理し、応答をクライアントにストリームバックするサーバーレス関数を定義します。

ステップ 4: アプリを実行する

npm 実行開発

出力

ビデオ.webm

デモのビデオ

ドライブ.google.com

ビデオをご覧になった方は、デモがどのように機能するかをよく理解していると思います。 コード全体の探索に興味がある場合は、GitHub のリンク Next.js OpenAI Streaming で見つけることができます。

参考文献:

https://vercel.com/blog/introducing-the-vercel-ai-sdk

https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction

https://platform.openai.com/docs/introduction

AI 分野の最新の開発情報を常に入手するには、Vercel の AI ドキュメントに注目することをお勧めします。 Vercel は AI ドメインでのサービスを進化させ続けるため、最新情報や機能強化にご期待ください。