NextJS 13

[thiblades]

Hello, thank you for the package, i am trying to implement the color example into a next JS app, but i don't understand how to,

here is my api/colors :

 import { z } from "zod";
import { Configuration, OpenAIApi } from 'openai-edge';
import { OpenAIStream, StreamingTextResponse } from 'ai';

import { OpenAiHandler, StreamMode, Entity } from "openai-partial-stream";

// Set the runtime to edge for best performance
export const runtime = 'edge';



const config = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
  });

  const openai = new OpenAIApi(config);


async function callGenerateColors(
    mode = StreamMode.StreamObjectKeyValueTokens,
) {
    // Call OpenAI API, with function calling
    // Function calling: https://openai.com/blog/function-calling-and-other-api-updates
    const stream = await openai.createChatCompletion({
        messages: [
            {
                role: "user",
                content:
                    "Give me a palette of 2 gorgeous color with the hex code, name and a description.",
            },
        ],
        model: "gpt-3.5-turbo", // OR "gpt-4"
        stream: true, // ENABLE STREAMING
        temperature: 1.3,
        functions: [
            {
                name: "give_colors",
                description: "Give a list of color",
                parameters: {
                    type: "object",
                    properties: {
                        colors: {
                            type: "array",
                            items: {
                                type: "object",
                                properties: {
                                    hex: {
                                        type: "string",
                                        description:
                                            "The hexadecimal code of the color",
                                    },
                                    name: {
                                        type: "string",
                                        description: "The color name",
                                    },
                                    description: {
                                        type: "string",
                                        description:
                                            "The description of the color",
                                    },
                                },
                            },
                        },
                    },
                },
            },
        ],
        function_call: { name: "give_colors" },
    });

    // Handle the stream from OpenAI client
    const openAiHandler = new OpenAiHandler(mode);
    // Parse the stream to valid JSON
    const entityStream = openAiHandler.process(stream);

    return entityStream;
}


export  async function POST(
  req: Request
) {
    // Instantiate OpenAI client

        // // Select the mode of the stream parser
 const mode = StreamMode.StreamObject; // ONE-BY-ONE
        // const colorEntityStream = await callGenerateColors(mode);

    return   callGenerateColors(mode);   
}

and my page:

import React, { useState, useEffect } from 'react';

import { useCompletion } from 'ai/react';


interface Color {
  hex: string;
  name: string;
  description: string;
}

const IndexPage = () => {
  const [colors, setColors] = useState<Color[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  const {
    completion,
    input,
    stop,
    isLoading,
    handleInputChange,
    handleSubmit,
  } = useCompletion({
    api: '/api/colors',
  });

  if (isLoading) return <p>Loading...</p>;

  return (
    <div>
      <h1>Generated Colors</h1>

      {completion}
      <ul>
        {colors.map((color, index) => (
          <li key={index}>
            <strong>{color.name}</strong> ({color.hex}): {color.description}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default IndexPage;

do you have any idea about how i could integrate your package into nextJS 13? thank you!