Introduction

Vercel is an incredible infrastucture platform that lets you deploy Nextjs applications in a snap.

In this tutorial we'll see how we can host a ChatGPT plugin built in NextJS and named WeatherGPT.

This plugin has been by Steven Tey and it's an amazing starter kit because it offers the following features:

AI-Plugin & OpenAPI JSON specs
Returns a link to a dynamic Next.js route
Nextjs 13 App Router
Edge Route Handlers for returning weather data
Metadata API for SEO tags
ImageResponse API for dynamic OG images at the edge

What we'll see in this tutorial

How to deploy the WeatherGPT plugin on Vercel
How to connect it to PluginLab
How to install it on ChatGPT


UPDATE: since we released our own templating system it's now event easier to get started with WeatherGPT directly from PluginLab. More info in this video: https://www.youtube.com/watch?v=09D8NZjbMi8&t=312s






This tutorial is also available on Youtube if you prefer to chill on your couch

Getting started

Fork and/or clone the repository

Since we'll be deploying the project using the Vercel git integration it might be interesting for you to fork the repository directlly from your git account.

Go to https://github.com/steven-tey/weathergpt
Click on Fork
Copy the new clone URL
Clone your fork:

Open your terminal, go to your favorite directory and type:

git clone <YOUR_REPO_URL>
cd weathergpt

If you want to use gitlab or bitbucket instead of github, just clone the repository and push it to the git provider of your choice.

Install the dependencies

npm install

Open it in your favorite editor

Understanding the structure of the boilerplate

If you already master Nextjs you can probably skip this part. Here we are going to review every important piece of the repository so you can have a better understanding of what we are going to do.

1. ./app/[location]:

This directory will be used to generate a route for getting the weather of a given city. It contains two files:
page.tsx: this file corresponds to the page that will be loaded when you user will hit https://<your_domain>/<city_name>
opengraph-image.tsx: this file will generate the opengraph data for https://<your_domain>/<city_name>. That way, when ChatGPT will display the link to the user, the corresponding OG will be shown.

2. ./app/api/weather/route

This route is what we call an Edge Route Handler. It will be used as an API endpoint by ChatGPT in order to get the Weather data.

When a user will ask ChatGPT to get the weather in San Francisco for example, ChatGPT will request this route to get:
the weather data in San Francisco
the link url that redirect to this specific weather page (provided by ./app/[location])

3. ./app/components

This is a basic directory containing some useful components that will help you to display some data.

4. ./app/lib/utils

This is the file that contains the call to the weather API.

If you look at the source code you can see that it requires an Environment Variable named WEATHER_API_KEY.

We'll see how to add it later.

export async function getWeatherData(location: string) {
  return fetch(
    `http://api.weatherapi.com/v1/current.json?key=${process.env.WEATHER_API_KEY}&q=${location}&aqi=no`,
    { next: { revalidate: 60 } }
  ).then((res) => res.json());
}

5. ./app/page.tsx

This is the main page of your website. It will be displayed as home page for the users who come on your root domain.

6. ./public/well-known/ai-plugin.json

This is your manifest file. You can see it as the file that describes your plugin to ChatGPT. It also refers to your Open API Spec.

Since PluginLab handles the manifest file for you, you will be able to remove this file once your plugin is running on PluginLab.

7. ./public/openapi.json

This file explains ChatGPT how to use your API. If you open it you can see it describes the backend endpoint we mentioned previously.

As for the manifest file, PluginLab helps you to manage, version and deploy your OpenAPI specification. So once your plugin is setup on PlugibLab you can remove this file from your code :)

Get a Weather API Key

I told you we needed an Weather API Key to get started. So before deploying our app on Vercel, le'ts get a free API KEY.

Go to https://www.weatherapi.com/
Signup for free
Login and get your Free API KEY

Deploy on vercel

To get started with Vercel you first need to:

Create an account on https://vercel.com/
Click on New Project
Connect the Git hosting provider of your choice (Github if you forked the project on Github)
Allow the repository access
Choose the repository to import
Configure the project and don't forget to add WEATHER_API_KEY environment variable







Configure the project and don't forget to add WEATHER_API_KEY environment variable






Now your project is deployed you can go to your dashboard, look at the domain URL. We'll need it quite soon




It's also a good time to have a look at the app you just deployed by following the URL, you must see something like this:

Install on PluginLab

This is probably the easiest part

Go to https://app.pluginlab.ai
Create an account and login
Click on Create a custom plugin
Complete the form as follow

Add a plugin name

Fill out your manifest form

Do you remember I told you PluginLab manages your manifest file? Here we are.

Basically you can fill the form by yourself or simply copy/paste the fields that are located in ./public/.well-known/ai-plugin.json.

Note that to submit your plugin to openai you will have to respect some constraints regarding the contact email and legal url. Basically these values will need to be on the same root domain as your plugin. We explain that in Use Custom Domain.

Add your OAS

PluginLab will manage your Open API Specification file as well.

Copy/paste the oas located at ./public/openai.json into PluginLab.

Add your backend domain

Now, as a backend domain, copy/paste your vercel URL.

In my case it's weathergpt-five-ruddy.vercel.app for example.

Give it a version name

Since PluginLab allows you to manage multiple versions of your plugin OAS, you have to give a name to your first version.

In my case I will use v1.

Done!

Congrats you have now installed your plugin on PluginLab!

Install on ChatGPT

Congrats, you've been doing great so far!

PluginLab will allow you to:

Track the API calls of your users
Authenticate members
Monetize your plugin
and much more

But now, we'll simply install your plugin on ChatGPT to see if it works (spoiler: it will work!)

On your PluginLab dashboard, copy the preview url of your plugin
Go to https://chat.openai.com
Open the plugin store
Select Develop your own plugin
Paste the PluginLab preview URL
Proceed with the installation

Use your plugin :)

Check your first event on PluginLab

Going further

Now you have configured PluginLab you just unlocked super powers for your plugin.

How to signup my ChatGPT Plugin members using Google

How to charge my customers for my ChatGPT plugin (Stripe, Plans and Quotas)

Why you should use PluginLab to handle your ChatGPT plugin authentication

Feeling lost?

Feel free to contact us using the Chatbox on the bottom right corner and we will be more than happy to help!

Updated on: 06/07/2023