SYTWS 24/25

# Building a Node.JS OpenAI (3.0) app with NextJS (12.1)

# Introduction to Open AI REST API

In this lab we will build a "pet name generator web app" wich will be described in this tutorial. The OpenAI API quickstart tutorial (opens new window) refers to the current version of the OpenAI API and no longer describes this app.

You can see a solution deployed at netlify: https://nextjs-oai.netlify.app/ (opens new window)

The code uses Next.js (opens new window) framework version 12 with React (opens new window) version 17 and OpenAI 3:

➜  nextjs-solution git:(main) ✗ jq '.dependencies' package.json
1
{
  "next": "^12.1.6",
  "openai": "^3.0.0",
  "react": "17.0.2",
  "react-dom": "17.0.2"
}
1
2
3
4
5
6

Next.js (opens new window) is a framework on top of React that handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.

Read this tutorial. The tutorial at OpenAI API quickstart tutorial (opens new window) covers the current version of OpenAI and I haven't been able to find the version of the old tutorial (2022) that corresponds to this lab.

# OpenAI First Steps

See how to create an account, set an api key and familiarize with the OpenAI API reading the section OpenAI First Steps in this course site.

# Setup

See section Setup and Run in this tutorial to see how to get the app in your assignment running.

# Web Development with Next.js

See section Web Development with Next.js in this tutorial.

# Exercise: Deploy at Netlify

Deploy the app at Netlify. For the details, see section Deploying a Next.js app to Netlify in this tutorial.

# Exercise: Deploy the app to Vercel

Deploy the app at Vercel. Follow the instructions at the tutorial Deploying to Vercel in this tutorial.

# Exercise: Get images from OpenAI

Add routes to the app:

  • On the first route /pet leave the current service
  • On the second route /imageadd functionality to get an image from OpenAI and display it in the page.
  • Update the landing page and navigation links
  • Add a 404 page
  • Consider the opportunity to solve it using a dynamic route

The youtube video Build An AI Image Generator With OpenAI & Node.js can help:

{% include video provider="youtube" id="fU4o_BKaUZE" %}

# Rubrica

{% include rubrica.md %}

# References

Last Updated: 4 months ago