5-Stream OpenAI Chat Completions in Next.js with Vercel Edge Functions 🚀

Screenshot from the tutorial

5-Stream OpenAI Chat Completions in Next.js with Vercel Edge Functions

In the world of web development, creating fast and responsive applications is paramount. One way to achieve this is by leveraging Vercel Edge Functions to handle asynchronous tasks, such as streaming chat completions from OpenAI’s API. In this tutorial, we'll walk you through building a Next.js application that streams chat completions using OpenAI's API and Vercel Edge Functions.

Table of Contents

1. Prerequisites
2. Setting Up Your Next.js Project
3. Creating the Edge Function
4. Integrating OpenAI's API
5. Building the Frontend
6. Testing Your Application
7. Conclusion

Prerequisites

Before you begin, ensure you have the following:

• A basic understanding of JavaScript and React.
• Node.js installed on your machine.
• A Vercel account and the Vercel CLI installed.
• An OpenAI API key (sign up at OpenAI if you don’t have one).

Setting Up Your Next.js Project

First, let's create a new Next.js project. Open your terminal and run:

npx create-next-app@latest my-chat-app
cd my-chat-app

After the project is set up, install the necessary dependencies:

npm install axios dotenv

Project Structure

Your project structure should look like this:

my-chat-app/
├── pages/
│   ├── api/
│   └── index.js
├── public/
├── styles/
├── .env.local
├── package.json
└── ...

Creating the Edge Function

Next, we need to create an Edge Function that will handle streaming chat completions. In the pages/api directory, create a new file called chat.js:

// pages/api/chat.js
import { OpenAI } from 'openai-edge';

const openai = new OpenAI(process.env.OPENAI_API_KEY);

export const config = {
  runtime: 'edge',
};

export default async function handler(req) {
  const { message } = await req.json();

  const streamResponse = openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: message }],
    stream: true,
  });

  return new Response(streamResponse.body, {
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

Explanation

• We're importing the OpenAI class from the openai-edge package, which is optimized for edge environments.
• The handler function processes incoming requests, extracts the user message, and sends it to the OpenAI API while enabling streaming.
• The response from the OpenAI API is returned as a stream.

Integrating OpenAI's API

To securely store your API key, create a .env.local file in your project root and add your OpenAI API key:

OPENAI_API_KEY=your_openai_api_key_here

Make sure to replace your_openai_api_key_here with your actual API key.

Building the Frontend

Now, let’s build the frontend interface. Open pages/index.js and replace its content with the following code:

// pages/index.js
import { useState } from 'react';

export default function Home() {
  const [input, setInput] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setResponse('');

    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message: input }),
    });

    const reader = res.body.getReader();
    const decoder = new TextDecoder('utf-8');

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      setResponse((prev) => prev + decoder.decode(value));
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Chat with OpenAI</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={input}
          onChange={(e) => setInput(e.target.value)}
          rows="4"
          cols="50"
          placeholder="Type your message..."
        />
        <br />
        <button type="submit">Send</button>
      </form>
      <div>
        <h2>Response:</h2>
        <pre>{response}</pre>
      </div>
    </div>
  );
}

Explanation

• We use React's useState hook to manage the input and response states.
• The handleSubmit function sends the user's message to the API and streams the response back to the frontend.
• The response is continuously updated in the UI as data is received.

Testing Your Application

To test your application locally, run:

npm run dev

Open your browser and navigate to http://localhost:3000. You should see the chat interface. Type a message and hit "Send" to see the streamed response from OpenAI.

Conclusion

In this tutorial, we've covered how to set up a Next.js application that streams OpenAI chat completions using Vercel Edge Functions. By utilizing the edge environment, we can achieve lower latency and a more responsive user experience.

Feel free to customize the frontend and explore more features of OpenAI’s API. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios