SYTWS 23/24

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

# Introduction

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 npm module version 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.

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

The code uses the Next.js (opens new window) framework with React (opens new window).

# First Steps

See section OpenAI First Steps in this tutorial.

# Setup

See section Set up and run in this tutorial.

# 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:

# Exercise: Implement the Prompt Engineering Agent

Implement the prompt engineering agent described in previous lab prompt engineering

# References

Last Updated: 5 days ago