How to Build a GPT-3 App with Next.js, React, and GitHub Copilot

In this blog post, the author explains how they built an application that finds the nutritional information for any recipe using OpenAI's GPT-3.5-turbo model, GitHub Copilot, Next.js, React, and Material UI.

Create a Repository and Install Dependencies

First, the author creates a new repository using the GitHub Codespaces Next.js template and installs the necessary dependencies.

Getting OpenAI API Key

The author explains how to obtain an OpenAI API key by creating a new account or logging in if you already have one.

Install GitHub Copilot Extension

GitHub Copilot is used as an assistant to build the application. The author guides the reader on how to install the GitHub Copilot extension.

Building the Server

The author starts building the application by creating a server file and using GitHub Copilot's suggestions to generate code. They use the OpenAI API and the gpt-3 package to generate nutritional information for recipes.

Adding Recipe Prompt

A data folder is created, and a file called .recipe-prompt.txt is added. The author explains how to update the completion function and response in the server file to generate the nutritional data for a specific recipe.

Making API Requests

The author guides the reader on how to make API requests to the OpenAI API using the axios library. They provide an example URL and explain how to submit a recipe to get a successful response with nutritional data.

Asking Questions and Getting Responses

The author demonstrates how to use the OpenAI API to ask questions and get responses based on the recipe data. They provide examples of questions and explain how to update the server file to handle these requests.

Adding Material UI Styling

In this section, the author incorporates Material UI to enhance the appearance of the application. They utilize GitHub Copilot's Chat feature to get suggestions on implementing Material UI components such as headers.

The author concludes by encouraging the reader to explore more features and capabilities of GitHub Copilot to further enhance their application-building process.

(Note: This is a summary of the original blog post written in English.)