Desarrollo y Mantenimiento de Sistemas Informáticos

4º. 1er cuatrimestre. Itinerario de Sistemas de la Información. Grado en Ingeniería Informática. ULL

GH Org   - GH Template Org   - GitHub Classroom   - Discussions   - Teams   - Campus ULL   - Students Activity   - Chat   - Google Meet

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 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/

The code uses Next.js framework version 12 with React version 17 and OpenAI npm module version 3:

➜  nextjs-solution git:(main) ✗ jq '.dependencies' package.json

{
  "next": "^12.1.6",
  "openai": "^3.0.0",
  "react": "17.0.2",
  "react-dom": "17.0.2"
}

Next.js 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 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:

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

Rubrica

References