Tailwind Logo

Integrate Next.js OpenAI Starter with Azure OpenAI

Next.js

Published: 2024-02-08

Up to now, we have been working on the assumption of integration with ChatGPT, but Next.js OpenAI Starter can also be integrated with Azure Open AI. This time, we will verify how to work with Azure Open AI instead of ChatGPT's API key.

Previous Articles

Changing API calls

Azure Open AI cannot be accessed simply by using an API key, but rather in the form of different endpoints to be accessed, as well as models, etc.

Add the API key as AZURE_OPENAI_API_KEY to .env.local, define the first name of the endpoint as resource, and make the following call

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);
}

Once you have made the changes to the above code, you can contact the chat.

azureopenai01.png

The answer came back.

How to learn?

The previous sample was created by customizing and passing Sitecore Search data to ChatGPT, but in the case of Azure Open AI, the data is passed to it for training.

Maybe I just haven't looked hard enough, but at least there was no configuration like the previous sample, where ChatGPT works with the data defined in functions.ts.

Summary

In this article, I presented the steps to connect Azure Open AI with Next.js OpenAI Starter. Although we have not tried it yet (the sample code gives an error), a new page is provided regarding the connection with Azure Open AI. Please refer to this page as well.

Tags