Create a ChatGPT Plugin using ChatGPT

Friday, September 08, 2023 by alfredo_lhuissier73

Introduction

A ChatGPT plugin is an add-on software developed to integrate external applications into ChatGPT's AI chatbot, unlocking capabilities beyond ChatGPT's original scope. These plugins facilitate the interface between the application and ChatGPT's API, connecting other services and tools to a chatbot, enabling a broader range of features and use cases than initially built in.

In order to make your plugin available to ChatGPT, you need to have developer access to ChatGPT plugins, which means you also need a ChatGPT Plus subscription. In any case, you can still develop the plugin and have it ready for whenever you have that access.

In this tutorial, we will ask ChatGPT to help us come up with ideas for a plugin and also write the code for it. We are then going to deploy our app to replit to make it publicly available for ChatGPT to use.

🚀 Let's get started!

Open ChatGPT in your browser, and ask it to come up with ideas for a plugin.

For simplicity's sake, we are going to choose the first idea: A Currency Exchange Rate converter that allows users to convert between different currencies. But you can take any of the suggestions and apply the same process we are going to use to build your own original plugin.

You can now ask ChatGPT to give you a list of APIs that you can use to develop the plugin.

We will use the second option Exchange Rates API because it has a free option that is enough for our use case. Sign up to the free plan to get an API KEY. Save that API KEY for later.

Developing the plugin

Let's copy the documentation for Exchange Rates API in the API Layer website and give it to ChatGPT so it can help us write the endpoints for our plugin. For this use case, we only need to give it the /convert endpoint information.

Make sure you copy the GET /convert endpoint code in Python (it's in Javascript by default).

Paste the documentation into ChatGPT and ask it to write a plugin based on it.

Copy documentation to ChatGPT — Copy the documentation to ChatGPT

You might have to try a few times before getting a good answer.

Ask it to handle errors and create a Flask app with /convert and all the other endpoints necessary for a completely functional plugin.

Create a Flask app with ChatGPT — Create a Flask app

Here is the complete code ChatGPT gave me:

from flask import Flask, request, jsonify
import requests

API_KEY = "YOUR_API_KEY"
BASE_URL = "https://api.apilayer.com/exchangerates_data"

app = Flask(__name__)

@app.route("/convert", methods=["GET"])
def convert_currency():
    amount = request.args.get("amount")
    from_currency = request.args.get("from")
    to_currency = request.args.get("to")

    url = f"{BASE_URL}/convert"
    headers = {"apikey": API_KEY}
    params = {
        "amount": amount,
        "from": from_currency,
        "to": to_currency
    }

    response = requests.get(url, headers=headers, params=params)
    data = response.json()

    if "result" in data:
        converted_amount = data["result"]
        return jsonify({"converted_amount": converted_amount})
    else:
        error_message = data.get("error", "Currency conversion failed.")
        return jsonify({"error": error_message}), 400

if __name__ == "__main__":
    app.run()

Awesome! We are now going to create a replit repo and continue working on our plugin there. Create a replit account if you haven't already and create a new repo.

Copy the code ChatGPT just wrote into main.py file of the replit repo.

On your replit console, open a New Tab -> Secrets and paste there your Exchange Rates API Key.

Paste Exchange Rate API Key in Replit repo

Now modify the code to get the API_KEY from the repository's environment:

import os
...

API_KEY = os.environ["YOUR_API_KEY"]

We a are going to ask ChatGPT to write the rest of the files necessary to build the plugin. Go to Open AI plugin documentation, copy the documentation under the Plugin Manifest section, give it to ChatGPT and ask it to write a manifest file.

On your replit repo, create an ai-plugin.json file a paste the manifest code there:

Now go to the Open API section of the ChatGPT plugin documentation and repeat the last step. Copy the text under the Open API definition title, paste it to ChatGPT, and ask it to write an Open API definition for your plugin.

Go back to your replit repo, create a openapi.yaml file and paste the Open API definition code there:

Finally, we are going to make some changes on the code ChatGPT wrote for us to make it work on our environment.

Open your main.py file and add the missing imports:

import os
from waitress import serve
from flask import Flask, request, jsonify, send_from_directory
import requests

Open a Shell tab on your replit console, and install waitress.

pip install waitress

Then add the following endpoints to serve our manifest and Open API definition files:

@app.route('/.well-known/ai-plugin.json')
def serve_ai_plugin():
    return send_from_directory('.', 'ai-plugin.json', mimetype='application/json')


@app.route('/.well-known/openapi.yaml')
def serve_openapi_yaml():
    return send_from_directory('.', 'openapi.yaml', mimetype='text/yaml')

And serve the app through a web server:

if __name__ == '__main__':
    serve(app, host="0.0.0.0", port=8080)

Your complete main.py file should look something like this:

import os
from waitress import serve
from flask import Flask, request, jsonify, send_from_directory
import requests

API_KEY = os.environ["YOUR_API_KEY"]
BASE_URL = "https://api.apilayer.com/exchangerates_data"

app = Flask(__name__)

@app.route("/convert", methods=["GET"])
def convert_currency():
    amount = request.args.get("amount")
    from_currency = request.args.get("from")
    to_currency = request.args.get("to")

    url = f"{BASE_URL}/convert"
    headers = {"apikey": API_KEY}
    params = {
        "amount": amount,
        "from": from_currency,
        "to": to_currency
    }

    response = requests.get(url, headers=headers, params=params)
    data = response.json()

    if "result" in data:
        converted_amount = data["result"]
        return jsonify({"converted_amount": converted_amount})
    else:
        error_message = data.get("error", "Currency conversion failed.")
        return jsonify({"error": error_message}), 400


@app.route('/.well-known/ai-plugin.json')
def serve_ai_plugin():
    return send_from_directory('.', 'ai-plugin.json', mimetype='application/json')


@app.route('/.well-known/openapi.yaml')
def serve_openapi_yaml():
    return send_from_directory('.', 'openapi.yaml', mimetype='text/yaml')


if __name__ == '__main__':
    serve(app, host="0.0.0.0", port=8080)

Hit the Run button on top of your replit repo, and wait for the app to be deployed. You should get a replit URL that you need to copy and paste it on your manifest Open API definition. The URL should look something like this: https://currency-converter-plugin.< YOUR_REPLIT_USERNAME >.repl.co

Now open the ai-plugin.json file and paste the Open API definition full path. Here is the complete ai-plugin.json:

{
  "schema_version": "v1",
  "name_for_human": "Currency Converter",
  "name_for_model": "CurrencyConverter",
  "description_for_human": "Plugin for converting currencies using the latest exchange rates.",
  "description_for_model": "Plugin for converting currencies using the latest exchange rates. Use keywords 'convert', 'from', 'to', and 'amount' to prompt the plugin.",
  "auth": {
    "type": "none"
  },
  "api": {
    "type": "openapi",
    "url": "https://currency-converter-plugin.<YOUR_REPLIT_USERNAME>.repl.co/.well-known/openapi.yaml",  // <-- Paste the URL here
    "is_user_authenticated": false
  },
  "logo_url": "https://your-domain.com/logo.png",
  "contact_email": "[email protected]",
  "legal_info_url": "https://www.your-domain.com/legal"
}

And in your openapi.yaml file, paste the main URL:

openapi: 3.0.1
info:
  title: Currency Converter Plugin
  description: A plugin that allows the user to convert currencies using the latest exchange rates with ChatGPT.
  version: 'v1'
servers:
  - url: https://currency-converter-plugin.<YOUR_REPLIT_USERNAME>.repl.co # <-- Paste the URL here
paths:
  /convert:
    get:
      operationId: convertCurrency
      summary: Convert currency from one to another
      parameters:
        - name: from
          in: query
          description: The source currency code
          required: true
          schema:
            type: string
        - name: to
          in: query
          description: The target currency code
          required: true
          schema:
            type: string
        - name: amount
          in: query
          description: The amount to be converted
          required: true
          schema:
            type: number
        - name: date
          in: query
          description: The date for historical exchange rate (optional)
          required: false
          schema:
            type: string
            format: date
      responses:
        "200":
          description: OK
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/convertCurrencyResponse'
components:
  schemas:
    convertCurrencyResponse:
      type: object
      properties:
        from:
          type: string
          description: The source currency code
        to:
          type: string
          description: The target currency code
        amount:
          type: number
          description: The amount to be converted
        converted_amount:
          type: number
          description: The converted amount

We're almost there! Go to to the ChatGPT plugin store, and click on "Develop your own plugin".

If prompted, click on the "My manifest is ready" button and give it your app's base URL https://currency-converter-plugin.< YOUR_REPLIT_USERNAME >.repl.co. Continue with the installation and you should now be able to use your plugin. Let's test it!

🥳🥳🥳

🎁 Bonus: Integrate your plugin with Stable Diffusion

As a little extra, we will expand our plugin's functionality with another AI tool, Stable Diffusion, to generate an image of the conversion we are trying to make. This will hopefully inspire you to come up with new ideas for the plugin's functionality.

We will use a Stable Diffusion model hosted on Replicate so we can get a working URL that ChatGPT can render. Get your Replicate API TOKEN if you haven't already and copy it.

Open your main.py file and add the following after your current imports:

import replicate

...
export REPLICATE_API_TOKEN = os.environ["REPLICATE_API_TOKEN"]
...

On your replit repo, add the REPLICATE_API_TOKEN secret and paste the value.

You can now call the Stable Diffusion model inside your convert_currency() function to generate images:

@app.route("/convert", methods=["GET"])
def convert_currency():
    amount = request.args.get("amount")
    from_currency = request.args.get("from")
    to_currency = request.args.get("to")

    url = f"{BASE_URL}/convert"
    headers = {"apikey": API_KEY}
    params = {
        "amount": amount,
        "from": from_currency,
        "to": to_currency
    }

    response = requests.get(url, headers=headers, params=params)
    data = response.json()

    # Call replicate's Stable Diffusion model
    sd_response = replicate.run(
        "stability-ai/stable-diffusion:db21e45d3f7023abc2a46ee38a23973f6dce16bb082a930b0c49861f96d1e5bf",
        input={"prompt": "A high quality image representing the conversion from " + from_currency + " to " + to_currency + " currencies"}
    )

    if "result" in data:
        converted_amount = data["result"]
        return jsonify({"converted_amount": converted_amount, "image": sd_response[1] }) # Add the image URL to your json response
    else:
        error_message = data.get("error", "Currency conversion failed.")
        return jsonify({"error": error_message}), 400

🤔 Conclusion

In this tutorial, we examined how to construct a ChatGPT plugin for currency conversion and also image generation using Stable Diffusion. Plugins are instrumental in broadening ChatGPT's functionality by enabling it to interface with external applications and APIs. You can now create your own plugins or expand this one to make something new.

Feel free to reach out to me on LinkedIn or Twitter if you have any questions.

And practice what you've learn here during our amazing AI Hackathons! Join the AI revolution!