Introducing the Next.js ChatGPT Plugin Starter
The Next.js ChatGPT Plugin Starter is a straightforward boilerplate project designed to help developers create plugins for ChatGPT using JavaScript. This project serves as a companion to the Python app mentioned in the OpenAI ChatGPT documentation, tackling common issues such as setting headers and handling CORS (Cross-Origin Resource Sharing) properly, which initially posed challenges.
Prerequisites
Before jumping into this project, it's crucial to note that it doesn't come with its user interface. Instead, it's intended to be integrated and interacted with through the ChatGPT user interface. Therefore, having access to ChatGPT plugins, currently in beta, is essential.
Project Setup
Getting your environment ready to work with this project involves a few straightforward steps:
-
Clone the Repository and Install Dependencies:
Begin by cloning the repository to your local machine and navigating into the project directory. Depending on your preferred package manager, you'll install the necessary dependencies:
git clone [email protected]:dabit3/nextjs-chatgpt-starter.git cd nextjs-chatgpt-starter yarn # or npm install, or pnpm
-
Running the Server:
With the dependencies installed, it's time to build and start the server:
npm run build npm start
A word of caution when running the server in development mode: there's a possibility for memory persistence issues due to random server restarts.
-
Configuring the GPT Plugin:
After setting up your server, proceed to the ChatGPT Plugin UI to configure your GPT Plugin. When prompted, you would typically enter 'http://localhost:3000' as your website domain.
Usage
Once everything is set up, you can interact with the plugin in several ways:
-
Retrieving To-Dos:
Simply ask:
what are my todos?
-
Adding a To-Do:
You can add items by saying:
add book flight to my todos
-
Summarizing To-Dos:
Inquire about the status of your tasks with:
How many todos do I have left?
And feel free to pose any other questions relevant to your to-do list.
Configuration
To expand the plugin's functionality, follow these steps:
-
Create New Routes:
New routes can be created in the
pages/api
directory of the project. -
Update OpenAPI Documentation:
Reflect these updates in the
openapi.yaml
file, including new paths and any data model schema adjustments necessary to accommodate data being sent to or received from the API.
By following these steps, developers can effectively use the Next.js ChatGPT Plugin Starter to create, customize, and manage their ChatGPT plugins, enhancing functionalities as needed.