0

Here is my api/openai route.jsx file

import { NextResponse } from "next/server"

export async function POST(request) {
const body = await request.json()
conosle.log('body' body)
     const options = {
        method: 'POST',
        headers: {
            "Authorization": `Bearer ${process.env.OPENAI_API_KEY}`,
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo",
            messages: [
                {
                    role: 'user', content: body.message
                }
            ],
            max_tokens: 100,
        })
            }
          const response = await fetch('https://api.openai.com/v1/chat/completions', options)
          const data = await response.json()
         return NextResponse.json(data)

     
}

Here is my frontend page.jsx file

'use client'

import { useState } from "react"

const page = () => {
    const [message, setMessage] = useState(null)
    const [value, setValue] = useState('')




    const getMessages = async () => { 
        
        const options = {
        method: 'POST',
        body:JSON.stringify({message: value}),
       
        headers: {
            "Content-Type": "application/json"
        }
    }
    
        const response = await fetch('/api/openai', options)
        const data = await response.json()
        setMessage (data.choices[0].message)
    }

  return (
    <div>
        <div>
            <input type="text" placeholder="what do you want" value={value} onChange={(e) => setValue(e.target.value)} /> 
            <div onClick={getMessages}>
                Send
            </div>
        </div>
    </div>
  )
}

export default page

I am receiving a 200 POST status of OK and now getting the response form the AI but now I get an error trying to display it in the setMessage value. I am trying to now currently display the information from the API on the screen. Getting objects are not valid as a React child.

Brett Westwood
  • 1
  • 1
  • [request.json()](https://developer.mozilla.org/en-US/docs/Web/API/Request/json) returns a promise. Use `content: (await request.json()).message` – Phil Jun 02 '23 at 02:31
  • Does this answer your question? [Why does .json() return a promise?](https://stackoverflow.com/questions/37555031/why-does-json-return-a-promise) – Phil Jun 02 '23 at 02:31
  • Still got a message saying content is required. I did hardcode the content: and it did work. So, my problem must be bringing over the input value to my route.jsx – Brett Westwood Jun 02 '23 at 03:01
  • You've got a bit of a typo in your client-side request. The entire `body` property needs to be JSON-stringified... `body: JSON.stringify({ message: value })` – Phil Jun 02 '23 at 03:24
  • I just changed that to what you said and now I got a payload from the client side. Still getting the error content is a required property. So, Now the error is somewhere in the route.jsx. Thanks so far as well man! Appreciate it – Brett Westwood Jun 02 '23 at 03:32
  • just did. Getting an answer now from the API just having trouble displaying it – Brett Westwood Jun 02 '23 at 03:51
  • Sounds like the original duplicate I linked answered your question then. If you want to display the result, you'll need to actually do something with `message` – Phil Jun 02 '23 at 03:52

0 Answers0