Tailwind Logo

Next.js OpenAI Starter を Azure OpenAI と連携させる

Next.js

公開日: 2024-02-08

これまで ChatGPT との連携を前提として進めてきましたが、Next.js OpenAI Starter は Azure Open AI とも連携が可能です。今回は、ChatGPT の API キーではなく、Azure Open AI との連携する方法を検証していきます。

これまでの記事

API の呼び出しを変更する

Azure Open AI は API キーを利用するだけではアクセスできず、アクセスをするエンドポイントが異なる点、またモデルなども含めてアクセスする形になります。

API キーを AZURE_OPENAI_API_KEY として .env.local に追加、またエンドポイントの最初の名前を resource として定義して、以下のように呼び出しをします。

TypeScript 
import OpenAI from "openai";
import { OpenAIStream, StreamingTextResponse } from "ai";

// Create an OpenAI API client (that's edge friendly!)
const resource = "yourresoucename";
const model = "gpt-4";

const apiKey = process.env.AZURE_OPENAI_API_KEY;
if (!apiKey) {
  throw new Error("AZURE_OPENAI_API_KEY is missing from the environment.");
}

// Azure OpenAI requires a custom baseURL, api-version query param, and api-key header.
const openai = new OpenAI({
  apiKey,
  baseURL: `https://${resource}.openai.azure.com/openai/deployments/${model}`,
  defaultQuery: { "api-version": "2023-12-01-preview" },
  defaultHeaders: { "api-key": apiKey },
});

// IMPORTANT! Set the runtime to edge

export const runtime = "edge";

export async function POST(req: Request) {
  const { messages } = await req.json();

  // Ask OpenAI for a streaming chat completion given the prompt
  const response = await openai.chat.completions.create({
    model: "gpt-4",
    stream: true,
    messages,
  });

  // Convert the response into a friendly text-stream

  const stream = OpenAIStream(response);

  // Respond with the stream

  return new StreamingTextResponse(stream);
}

上記のコードに変更をしたところで、チャットに問い合わせをしてみます。

azureopenai01.png

回答が帰ってきました。

学習方法は？

カスタマイズをして Sitecore Search のデータを ChatGPT に渡す形で前回のサンプルを作成しましたが、Azure Open AI の場合はデータを渡して学習をさせるという形になっています。

調べきれていないだけなのかもしれませんが、少なくとも前回のサンプルのように functions.ts で定義したデータを利用して ChatGPT が動作する、という形の設定はありませんでした。

まとめ

今回は Azure Open AI と Next.js OpenAI Starter とつなげるための手順を紹介しました。まだ試していないのですが（サンプルコードがエラーになる）、Azure Open AI との連携に関しては新しいページが提供されています。こちらも参考にしてください。

関連タグ