challenges

AI Style Generator: Part 1

Workshops in this series

  1. OpenAI Node SDK
  2. Prompt engineering: color
  3. Apply color response
  4. Prompt engineering: quote cleanup and font
  5. Apply font response (coming October 10, 2024)
  6. Quote entry (coming October 17, 2024)

Prerequisites

Workshop context

Before this workshop

This workshop

After this workshop

  • In future workshops, we will use the OpenAI Node SDK to generate a color and font appropriate to the quote, and use those styles in the UI quote presentation. We’ll also correct grammar and genered language in the quote. An example of a styled quote in the final application:
UI with options to enter a quote, submit the-5 quote, clear the quote or generate a random quote. A styled quote is shown beneath the form.

Please note: The quotes in data/quotes.ts were assembled from Kaggle datasets , and do not necessarily reflect the views of the instructor.

Setup

Follow the setup instructions under “Getting started” in this GitHub repo README . Be sure to:

  1. clone or fork the repository
  2. generate an OpenAI API key

Workshop goal

By the end of this workshop you should have an updated route handler in src/app/api/get-quote-styles/route.ts that:

  1. contacts OpenAI via the Node SDK
  2. prints the OpenAI response to the terminal

Notes on the prompt:

  • This workshop is about setting up the OpenAI Node SDK for the app. The actual prompt and response are not important for this workshop (we’ll get to the prompt / response for our app in the next workshop).
  • You will want to send a prompt that will generate a short response, as longer output costs more .
  • A suggestion for a prompt to test your OpenAI SDK setup: Describe <your favorite celebrity> in three words (for example: Describe Dolly Parton in three words)

Hints

Hint 1 You will need to install the OpenAI SDK; this package doesn’t come with the scaffolding project.

Hint 2 To make your OpenAPI key available as an environment variable:

  • create a file at the top of your project called .env.local
  • make sure this file is excluded from git in .gitignore
  • Add a line to the .env.local file with these contents (replace sk-proj-xxx with your API key):

.env.local

OPENAI_API_KEY="sk-proj-xxx"

Hint 3 You can add your OpenAI SDK code in src/app/api/get-quote-styles/route.ts. You’ll want to use the Chat Completions API . Here are some tips to get started:

Hint 4 In the Chat Completions response , you can use completion.choices[0].message.content to get the text response.

Hint 5 To trigger the route handler, start the server using (“npm run dev”), access http://localhost:3000 from a browser, and click the ‘use random quote’ button.

Alternatively, you could access the route handler URL directly from a browser: http://localhost:3000/api/get-quote-styles .

Resources