DEV Community

Cover image for Developing A Task Management ChatGPT Plugin with Typescript
James Oyanna
James Oyanna

Posted on • Edited on

5

Developing A Task Management ChatGPT Plugin with Typescript

Task management is an essential aspect of productivity and organization in both personal and professional settings.

With the rise of virtual assistants and chatbots, integrating task management capabilities into these platforms has become increasingly popular.

In this tutorial, we will build a ChatGPT plugin using Next.js, leveraging its new functionality and routes. The goal of our plugin is to provide task management capabilities, allowing users to list, create, and delete tasks.

Additionally, we will enable querying information about tasks, such as the number of remaining tasks. By the end of this tutorial, you will have a solid understanding of how to develop your own custom plugins.

To keep things simple, we will store our task data in memory using a store-like structure. However, in a production application, you would typically use a database for persistent storage. Now, let's dive into the development process.

To start with, we will scaffold our application by running : npx create-next-app chat-gpt-plugin
Following the prompt and select the appropriate instruction guide like this. choose

Would you like to use TypeScript with this project? ...Yes
Would you like to use ESLint with this project? » Yes
Would you like to use Tailwind CSS with this project? » No
Would you like to use src/ directory with this project? » Yes
Use App Router (recommended)? » Yes
Would you like to customize the default import alias? » Yes
What import alias would you like configured? ... @/* - press enter

Following these steps would create our nextjs application.

Now, to start our application, navigate into the newly created chat-gpt-plugin folder and run :
npm run dev

Your application should now be running on http://localhost:3000/. Go to your browser and visit this address.

If everything works fine, you should see this Nextjs page in your browser:

Frontpage

Now, let's open the ChatGPT documentation on the OpenAI website and explore the relevant section for our plugin. This documentation will serve as our reference throughout the development process.

Once you have reviewed the documentation, let's return to our application. We need to set up some configurations, starting with the headers to enable Cross-Origin Resource Sharing (CORS) for the ChatGPT API at Open API Doc

Inside our nextconfig file, in your project folder, add the following code:

/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'Access-Control-Allow-Origin',
value: 'https://chat.openai.com',
},
],
},
];
},
}
module.exports = nextConfig
view raw next.config.js hosted with ❤ by GitHub

Here in this code, we provided a configuration for our application.

The headers function here is an asynchronous function that we set up as custom headers for specific routes.

We set the Access-Control-Allow-Origin header to allow requests from https://chat.openai.com for all routes matching the /:path* pattern.

This is necessary in order to register our plugin.

Now, inside the public folder create a folder called .well-know. Create a file inside the .well-know directory called ai-plugin.json

The ai-plugin.json is a manifest that provides information about your plugin, such as its name, version, and main configuration endpoint, which can be used by the ChatGPT system to interact with your plugin effectively.

Add the following code to the ai-plugin.json file:

{
"schema_version": "v1",
"name_for_human": "TASK Plugin (no auth)",
"name_for_model": "task",
"description_for_human": "Plugin for managing a Task list, you can add, remove and view your Tasks.",
"description_for_model": "Plugin for managing a Task list. Users can add, remove, and list tasks.",
"auth": {
"type": "none"
},
"api": {
"type": "openapi",
"url": "http://localhost:3000/openapi.yaml",
"is_user_authenticated": false
},
"logo_url": "http://localhost:3000/logo.png",
"contact_email": "support@example.com",
"legal_info_url": "https://example.com/legal"
}
view raw ai-plugin.json hosted with ❤ by GitHub

Here in this code we simply provide a JSON object that represents the schema of our Chatgpt plugin.

This JSON object follows the schema defined for chatgpt plugins and provides essential information about the plugin, including its name, description, authentication requirements, API details, logo, contact email, and legal information.

Now let's create the main configuration for our app.

In the public directory, create a file. Name it openapi.yml and add the following code to it :

openapi: 3.0.1
info:
title: TASK Plugin
description: A plugin that allows the user to create and manage a TASK list using ChatGPT.
version: 'v1'
servers:
- url: http://localhost:3000
paths:
/api/tasks:
get:
operationId: getTasks
summary: Get the list of tasks
responses:
"200":
description: OK
content:
application/json:
schema:
$ref: '#/components/schemas/getTasksResponse'
/api/create-task:
post:
operationId: addTask
summary: add a new task
requestBody:
required: true
content:
application/json:
schema:
$ref: '#/components/schemas/addTaskRequest'
responses:
"200":
description: OK
/api/delete-task:
post:
operationId: deleteTask
summary: delete a task
requestBody:
required: true
content:
application/json:
schema:
$ref: '#/components/schemas/deleteTaskRequest'
responses:
"200":
description: OK
components:
schemas:
deleteTaskRequest:
type: object
required:
- task
properties:
task:
type: string
description: The task to delete from the list.
required: true
addTaskRequest:
type: object
required:
- task
properties:
task:
type: string
description: The task to add to the list.
required: true
getTasksResponse:
type: object
properties:
tasks:
type: array
items:
type: string
description: The list of tasks.
view raw openapi.yml hosted with ❤ by GitHub

Here in this code, we added a specification for defining and documenting the APIs
openapi: 3.0.1: Here we specify that the API is using the OpenAPI version 3.0.1.

We then provided information about the API, including its title, description, and version

servers: We define the server where the API is hosted. In this case, the server is specified as http://localhost:3000

paths: This is the heart of the API specification. It defines the various paths (URL endpoints) that the API exposes, along with the HTTP methods (such as GET, POST, etc.) that can be used on those paths.

/api/tasks: This is a path for getting the list of tasks. It uses the HTTP GET method.
The responses section specifies the possible responses from the API, including the HTTP status code and a description.

/api/create-task:
This path is for adding a new task. It uses the HTTP POST method. The request body section specifies that the request must include a JSON body with a task property.

/api/delete-task: This path is for deleting a task. It also uses the HTTP POST method.


schemas:
This subsection defines the data structures used in the API.

deleteTaskRequest: This schema defines the structure of the request body required for deleting a task. It contains a single property task of type string.

addTaskRequest: This schema defines the structure of the request body required for adding a new task. It also contains a single property task of type string.

getTasksResponse: This schema defines the structure of the response body when getting the list of tasks. It includes a property tasks which is an array of strings.

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

Top comments (2)

Collapse
 
ariepaulus profile image
Arie Verburgh

Where is the rest?

Collapse
 
jamesoyanna profile image
James Oyanna

Hi Arie, thank you for the feedback. I will be adding the rest in a moment.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay