How to Create a ChatGPT Plugin (Case Study Using Pexels)

1 Step 1: Planning Your Plugin

Deciding the Functionality

You’ve got your tools and prerequisites ready, so what’s next? Let’s decide what our plugin will actually do.

The Pexels API offers a buffet of functionalities, from searching photos to exploring videos and even diving into featured collections. The sky’s the limit!

Real-world example: Pexels Image Search

For this guide, we’re honing in on the search functionality. Why? Because it’s incredibly versatile and, let’s face it, everyone loves a good image search.

With our plugin, you can initiate a search right from your ChatGPT window and get links to stunning images that match your query.

Finding the Right API

Got your idea? Fantastic! Now, to bring that vision to life, you’ll need the right API. Think of an API as your plugin’s gateway to a universe of data.

Criteria for Selecting an API

Before you jump in, consider these factors:

• Reliability: You want an API that’s up when you need it.
• Documentation: Comprehensive guides can be a lifesaver.
• Rate Limits: Make sure the API can handle your request volume.
• Data Format: Check if the API returns data in a friendly format like JSON.
• Cost: Whether it’s free or paid, it should fit your budget.

How to Obtain an API Key

Alright, you’ve chosen your API. The next step? Getting your API key. This key is your VIP pass to all the API’s functionalities.

Look for a ‘Get Started’ or ‘Sign Up’ section on the API’s website to grab your key.

Using the Pexels API as an Example

For our Pexels plugin, we’re all in on the Pexels API. It ticks every box: reliable, well-documented, generous free tier, and JSON-friendly.

Head to the Pexels API website, sign up, and secure that key. Keep it safe; you’ll need it soon.

2 Step 2: Setting Up Your Development Environment

Choosing an IDE

You’ve got your plan and your API key, so what’s the next step on this exciting journey? You’ll need a workspace to bring your code to life. Enter the Integrated Development Environment (IDE).

While there are many IDEs out there, we’re head over heels for Replit, and we think you’ll be too.

Why Replit?

Replit is a cloud-based IDE that lets you dive right into coding without any tedious setup. It’s perfect for both solo coding marathons and team collaborations. Plus, it’s cloud-based, so you can code from anywhere, anytime.

Your Two Paths: Start Fresh or Import

Now, you’ve got two options:

• Start Fresh: Create a new Replit project and manually add the three essential files: main.py, ai-plugin.json, and openapi.yaml.

• Import Our Example: If you’d rather not start from scratch, you can import our Pexels ChatGPT Plugin example from GitHub. This way, you can follow along more easily.

🚀 Grab the Code!

Setting Up the Pexels Plugin: 

For the purpose of this guide, let’s assume you’re using Replit. Here’s how to get your environment ready:

1. Open a new Replit project and name it something catchy like Pexels-ChatGPT-Plugin.
2. If you’re starting fresh, go ahead and create the three files: main.py, ai-plugin.json, and openapi.yaml.
3. If you’re importing, simply click on the ‘Version Control’ tab in Replit and paste the GitHub URL to clone the project.

And just like that, your development environment is set up! You’re now one giant leap closer to bringing your ChatGPT plugin to life.

3 Step 3: Building the Core Application

The Python Script: Your Plugin’s Heartbeat

Alright, it’s time to get our hands on the keyboard. The core of our ChatGPT plugin will be written in Python, a language known for its readability and versatility.

Specifically, we’ll be focusing on the main.py file, which is essentially the heartbeat of our plugin.

The Building Blocks: Functions and Endpoints

In Python, we’ll be using functions to define the different capabilities of our plugin. Each function will correspond to an endpoint, which is a specific URL where our plugin can receive HTTP requests.

Code Snippets: Pexels Plugin Example

Let’s take a look at some code snippets from our Pexels plugin’s main.py file to get a better understanding:

# Initialize the Flask app
app = Flask(__name__)

# Read Pexels API key from environment variable
my_secret = os.environ['PEXELS_API_KEY']
PEXELS_BASE_URL = "https://api.pexels.com/v1/search"

@app.route('/v1/search', methods=['GET'])
def search_photos():
    # the code for searching photos here

In this example, we initialize a Flask app and define a function search_photos() that corresponds to the /v1/search endpoint.

This function will handle the logic for searching photos through the Pexels API.

Authenticating API Requests

Remember that API key we talked about earlier? Now’s the time to use it. We’ll be adding it to our HTTP requests to authenticate ourselves with the Pexels API. But don’t worry, we’ll cover how to secure this key in the next section.

headers = {
    "Authorization": my_secret  
}

With these building blocks in place, you’re well on your way to creating something amazing.

4 Step 4: Creating API Endpoints

What Are API Endpoints and Why Do You Need Them?

So, you’ve got your core application up and running. Fantastic! But how do you make it accessible to the outside world? Enter API endpoints.

These are the URLs where your plugin will receive HTTP requests, essentially acting as the doorways to your application’s functionality.

The Magic of API Endpoints

Think of an API endpoint as a remote control button for your plugin. When pressed (or called), it triggers a specific function in your code.

This is how your ChatGPT plugin will interact with the Pexels API, or any other API you choose to integrate.

API Endpoints in Action: Pexels Plugin Example

Let’s circle back to our Pexels plugin to see how this works. In our main.py file, we’ve defined an endpoint for image search:

@app.route('/v1/search', methods=['GET'])
def search_photos():
    query = request.args.get('query', '')
    orientation = request.args.get('orientation', '')
    size = request.args.get('size', '')
    color = request.args.get('color', '')
    locale = request.args.get('locale', '')
    page = int(request.args.get('page', 1))
    per_page = int(request.args.get('per_page', 15))

    headers = {
        "Authorization": my_secret  
    }

    params = {
        "query": query,
        "orientation": orientation,
        "size": size,
        "color": color,
        "locale": locale,
        "page": page,
        "per_page": per_page
    }

    try:
        response = requests.get(PEXELS_BASE_URL, headers=headers, params=params)
        response.raise_for_status()
        return jsonify(response.json())
    except requests.RequestException as e:
        return jsonify({"error": str(e)}), 500

Here, /v1/search is the API endpoint, and search_photos() is the function it triggers.

When this endpoint is called, the function executes the logic for searching photos through the Pexels API.

Wrapping It All Up

To make your plugin fully functional, you’ll need to wrap your core application in an API. This involves defining various endpoints for different functionalities. For instance, you might have one for searching photos, another for fetching photo details, and so on.

With these endpoints, you’re not just building a standalone application; you’re building a bridge between ChatGPT and a world of possibilities.

Securing Your API Key in Replit

The Importance of Security

Before we jump into writing the manifest file, let’s take a quick detour to discuss security. API keys are sensitive. They’re like the keys to your house; you wouldn’t just leave them lying around, would you? The same goes for your API key.

How to Secure Your API Key in Replit

Replit offers a simple yet effective way to secure your API keys. Here’s how:

• Secrets: In your Replit workspace, you’ll find a tab on the left sidebar labeled ‘Secrets.’ Click on it.

• Add Variable: You’ll see an option to add a new variable. Name the variable something like PEXELS_API_KEY and paste your actual API key as its value.

• Access in Code: Now, in your main.py file, you can access this secure key using Python’s os.environ like so:

my_secret = os.environ['PEXELS_API_KEY']

And voila! Your API key is now securely stored and can be safely used in your application.

5 Step 5: Writing the Manifest File

The Role of the Manifest File

Think of the manifest file as your plugin’s ID card. It contains all the essential information about your plugin, like its name, description, and the API it uses.

Key Components

Your manifest file, often named ai-plugin.json, will include several key components:

• Name: The name of your plugin.
• Description: A brief description of what your plugin does.
• API Type and URL: Information about the API your plugin will use.

Real-World Example: Pexels Plugin’s ai-plugin.json

Let’s look at the ai-plugin.json file from our Pexels plugin:

{
  "schema_version": "v1",
  "name_for_human": "Pexels Image Search",
  "name_for_model": "Pexels",
  "description_for_human": "Search for high-quality images on Pexels directly through ChatGPT.",
  "api": {
    "type": "openapi",
    "url": "https://yourdomain.repl.co/.well-known/openapi.yaml"
  }
}

You’ve just learned how to secure your API key and write a manifest file for your ChatGPT plugin.

6 Step 6: API Documentation for ChatGPT

Why OpenAPI Specification is Crucial

You’ve built an amazing plugin, but how will ChatGPT know how to interact with it? Enter OpenAPI Specification.

This is the wrapper that sits on top of your API, telling ChatGPT exactly what it can and cannot do.

Crafting the OpenAPI Specification

A basic OpenAPI specification has several key components:

• Specification Version: Defines the OpenAPI version you’re using.
• Title and Description: These are crucial as ChatGPT looks at these to determine if your plugin is relevant for a user query.
• Server URL: Where your API is hosted.
• Paths: These define your API endpoints and how they behave.

Here’s a simplified example:

openapi: 3.0.1
info:
  title: Pexels Image Search
  description: Search for high-quality images on Pexels directly through ChatGPT.
  version: 'v1'
servers:
  - url: http://yourdomain.repl.co
paths:
  /v1/search:
    get:
      operationId: searchImages
      summary: Get a list of images based on the search query.
      responses:
        "200":
          description: OK
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/getImagesResponse'

Character Limits and Best Practices

Keep in mind the following character limits in your OpenAPI specification:

• 200 characters max for each API endpoint description/summary field.
• 200 characters max for each API param description field.

The OpenAPI specification is not just a requirement but a crucial part of making your plugin usable and efficient. It serves as the bridge between your API and ChatGPT, ensuring that the model interacts with your plugin in a meaningful way.

7 Step 7: Deployment

Alright, you’ve built your plugin, documented your API. What’s next? It’s time to deploy your plugin so that it’s accessible to ChatGPT and, ultimately, the users. Deployment is like the grand opening of your plugin to the world.

Deploying on Replit: 

• Run Locally First: Before deploying, make sure your plugin works locally. Click the big green “Run” button on Replit to test it.
• Check the Webview: If everything is set up correctly, you should see a “Welcome to the Pexels API integration!” message or your plugin’s interface in the Webview window. If not, check the console for errors.

• Deploy Your Project: On Replit, click the arrow next to the name of your Repl, then click “Deploy your project.”
• Configure Hosting Environment: Choose the resources you need. For a simple project like our Pexels plugin, the minimum resources should suffice.
• Payment and Final Steps: Replit charges a minimum of $1.50 for hosting. After entering your payment details, click “Purchase and Deploy.”
• Domain Setup: Choose a domain name for your plugin. This will be the URL where your plugin lives.

• Update Manifest and OpenAPI Spec: Before the final deployment, update your manifest file and OpenAPI specification with the new domain name.
• Final Deployment: Go back to the Replit deployments window and click “Deploy your project” one last time.

Read More : How to Monetize Your ChatGPT Plugin

8 Step 8: Final Installation and Testing

You’ve built it, and now it’s time to see your Pexels ChatGPT plugin in action within the ChatGPT environment.

Let’s walk through the steps to make this happen.

Connecting Your Plugin to ChatGPT

• ChatGPT Plus Account: Make sure you have a ChatGPT Plus account and developer access. If you don’t, get on the waitlist for developer access.
• Navigate to ChatGPT: Open ChatGPT and create a new chat, choosing GPT-4 as the model.
• Go to Plugins: Click on GPT-4 and then select ‘Plugins’.
• Access the Plugin Store: Click the arrow next to ‘No plugins enabled‘, and then click the arrow for the ‘Plugin store’.
• Develop Your Own Plugin: In the Plugin store, click on ‘Develop your own plugin’. If you don’t see this option, you don’t have developer access yet.

• Enter Your Domain: You’ll be prompted to enter your domain where your manifest and OpenAPI spec files are hosted. For example, it could be something like https://mypexelsplugin.replit.app Or Your Custom domain. Click ‘Find manifest file’.

• Manifest and OpenAPI Files: ChatGPT will locate your ai-plugin.json and openapi.yaml files. Once found, you’ll see a success message.

• Install for Me: For development and testing, you can install the unverified plugin. Click ‘Install for me’.
• Confirm Risks: Acknowledge that you understand the risks associated with installing unverified plugins and click ‘Continue’.
• Final Installation: Click ‘Install plugin’ to complete the process.
• Select Your Plugin: Once the installation is complete, your Pexels plugin should be automatically selected. If not, manually select it from the dropdown.

The Moment of Truth: Testing The Pexels Plugin in ChatGPT

now it’s time to see our Pexels plugin in action. Let’s put it to the test.

1. Initiate a Search: Type in a prompt to search for images, like “Find me some stunning beach photos on Pexels.”

3. Review the Output: You should see a list of high-quality beach photos from Pexels

Congratulations! You’ve not only built but also successfully tested your Pexels plugin within ChatGPT.

Feel free to explore more by searching for different types of images.

Important: Cleaning Up After Testing

After diving deep into the world of ChatGPT plugins, testing them out, and experiencing their capabilities, there might come a time when you’d want to take a step back.

Whether it’s for a short break or a longer hiatus, it’s essential to ensure that you wrap things up neatly.

This not only helps in avoiding any unwanted charges but also ensures that your digital workspace remains clutter-free. Here’s a step-by-step guide on how to clean up post-testing and safely uninstall your Pexels plugin from ChatGPT:

1. Navigate to Replit Deployments: Go back to Replit and find the Deployments window.
2. Shut It Down: Click on ‘Settings’ and then ‘Shut down’ to terminate your hosting subscription and API.

This will deactivate your Pexels plugin in ChatGPT, so make sure you’re ready to say goodbye, at least for now.

Uninstalling Your Plugin from ChatGPT

1. Go to Plugin Store: Open a new chat in ChatGPT and navigate to the Plugin store.
2. Filter and Find: Filter by ‘Installed’ plugins and locate your Pexels plugin.
3. Uninstall: Click ‘Uninstall’ to remove your plugin from ChatGPT.

If you wish to bring your Pexels plugin back to life in the future, you’ll need to go through the installation steps again.

And there you have it! You’ve successfully navigated the entire journey of creating, deploying, and testing your very own ChatGPT plugin. Take a moment to celebrate; you’ve earned it!

9 Conclusion

Embarking on the journey to create a ChatGPT plugin is both rewarding and transformative. It not only amplifies the capabilities of ChatGPT but also opens doors to endless customization and innovation.

As you’ve seen, with the right tools and guidance, anyone can craft their own unique plugin. So, why wait? Dive in, and let your creativity shine through your very own ChatGPT plugin.