You can find a summary of the code updates in this pull request . Read on for explanations.
1. Install openai
Since this project doesn’t come with openai
installed, we’ll need to install it from the terminal:
2. Set up API key
When we use the OpenAI Node SDK, we’ll need our API key to be accessible as an environment variable .
For Next.js, this means defining an environment variable called OPEN_API_KEY
in .env.local .
- Create a .env.local file at the top of your project.
- Make sure .env.local is excluded from git in .gitignore
- .env.local is excluded already for this project, since the project was created with create-next-app . It’s good to double-check, though, since you never want your private API key to be pushed to GitHub.
- Add a line to the .env.local file with these contents (replace
sk-proj-xxx
with your API key):
.env.local
3. Create a chat completion
Okay, now we’re in good shape to use the OpenAI Node SDK in our route handler. The file to edit is src/app/api/get-quote-styles/route.ts.
Create OpenAI client
We can use the default export from the “openai” package create a new client that uses the API key from the environment variable we set up:
route.ts
Side note: we could omit line 4, since process.env["OPENAI_API_KEY"]
is the default value for apiKey
, but I like to leave it in so a reader can tell where the API key is coming from without having to go to the OpenAI SDK docs to find out what the default is.
Call Chat Completion
I modeled this Chat Completion call after the usage example . Because openai.chat.completions.create()
is an async function, we need to add async
to the parent function declaration (GET()
).
route.ts
4. View the response
The response text is accessed via completion.choices[0].message.content
, according to the Open AI Chat Completions response format .
route.ts
I included a console.log
statement so we can see the output on the terminal (since there are no UI updates in this workshop). I triggered the route handler function by accessing the endpoint ( http://localhost:3000/api/get-quote-styles ) from the browser. Here’s what I got in the terminal:
Up next
All right! Now that we’ve got the OpenAI SDK set up, we’re in good shape to generate a color for the random quote in the next workshop .
Workshops in this series
- OpenAI Node SDK
- Prompt engineering: color
- Apply color response
- Prompt engineering: quote cleanup and font
- Apply font response (coming October 10, 2024)
- Quote entry (coming October 17, 2024)