DEV Community

Paul Robertson
Paul Robertson

Posted on

Build Your First ChatGPT Plugin in 30 Minutes: A Complete Beginner's Guide

#ai #beginners #tutorial #chatgpt

This article contains affiliate links. I may earn a commission at no extra cost to you.

title: "Build Your First ChatGPT Plugin in 30 Minutes: A Complete Beginner's Guide"
published: true
description: "Learn to create, test, and deploy a weather ChatGPT plugin from scratch with practical examples and best practices."
tags: ai, chatgpt, plugins, tutorial, beginners

cover_image:

ChatGPT plugins extend the AI's capabilities beyond text generation, allowing it to interact with external APIs and services. While the plugin ecosystem has evolved since its initial launch, understanding how to build plugins remains valuable for developers looking to integrate AI into their applications.

In this tutorial, we'll build a simple weather plugin that fetches real-time weather data. You'll learn the core concepts, see working code examples, and understand the deployment process.

What You'll Need

  • Basic knowledge of JavaScript/Node.js
  • A text editor or IDE
  • Node.js installed on your machine
  • An API key from a weather service (we'll use OpenWeatherMap's free tier)
  • Access to ChatGPT Plus (for testing)

Understanding Plugin Architecture

ChatGPT plugins consist of two main components:

  1. Plugin Manifest (ai-plugin.json): Describes your plugin's capabilities
  2. OpenAPI Specification: Defines your API endpoints and data structures
  3. Backend Service: Handles the actual API requests

When a user asks ChatGPT something your plugin can help with, ChatGPT reads your manifest, understands your API specification, and makes requests to your backend.

Step 1: Set Up Your Project Structure

Create a new directory and set up the basic structure:

mkdir weather-plugin
cd weather-plugin
npm init -y
npm install express cors dotenv axios
Enter fullscreen mode Exit fullscreen mode

Create these files:

weather-plugin/
├── server.js
├── ai-plugin.json
├── openapi.yaml
├── .env
└── package.json
Enter fullscreen mode Exit fullscreen mode

Step 2: Create the Plugin Manifest

The ai-plugin.json file tells ChatGPT what your plugin does:

{
  "schema_version": "v1",
  "name_for_human": "Weather Plugin",
  "name_for_model": "weather",
  "description_for_human": "Get current weather information for any city worldwide.",
  "description_for_model": "Plugin for getting current weather information including temperature, humidity, and conditions for a specified city.",
  "auth": {
    "type": "none"
  },
  "api": {
    "type": "openapi",
    "url": "http://localhost:3000/openapi.yaml"
  },
  "logo_url": "http://localhost:3000/logo.png",
  "contact_email": "your-email@example.com",
  "legal_info_url": "http://localhost:3000/legal"
}
Enter fullscreen mode Exit fullscreen mode

Key points:

  • name_for_model should be short and descriptive
  • description_for_model helps ChatGPT understand when to use your plugin
  • We're using no authentication for simplicity

Step 3: Define Your API Specification

Create openapi.yaml to describe your API endpoints:

openapi: 3.0.1
info:
  title: Weather Plugin
  description: A plugin that allows ChatGPT to get weather information
  version: 'v1'
servers:
  - url: http://localhost:3000
paths:
  /weather:
    get:
      operationId: getCurrentWeather
      summary: Get current weather for a city
      parameters:
        - in: query
          name: city
          schema:
            type: string
          required: true
          description: The city name to get weather for
      responses:
        "200":
          description: OK
          content:
            application/json:
              schema:
                type: object
                properties:
                  city:
                    type: string
                  temperature:
                    type: number
                  description:
                    type: string
                  humidity:
                    type: number
                  feels_like:
                    type: number
Enter fullscreen mode Exit fullscreen mode

Step 4: Build the Backend Service

First, get a free API key from OpenWeatherMap and add it to your .env file:

OPENWEATHER_API_KEY=your_api_key_here
Enter fullscreen mode Exit fullscreen mode

Now create server.js:

const express = require('express');
const cors = require('cors');
const axios = require('axios');
const fs = require('fs');
const path = require('path');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 3000;

// Enable CORS for ChatGPT
app.use(cors({
  origin: ['https://chat.openai.com', 'https://chatgpt.com']
}));

app.use(express.json());

// Serve plugin manifest
app.get('/.well-known/ai-plugin.json', (req, res) => {
  res.sendFile(path.join(__dirname, 'ai-plugin.json'));
});

// Serve OpenAPI specification
app.get('/openapi.yaml', (req, res) => {
  res.sendFile(path.join(__dirname, 'openapi.yaml'));
});

// Weather endpoint
app.get('/weather', async (req, res) => {
  try {
    const { city } = req.query;

    if (!city) {
      return res.status(400).json({ error: 'City parameter is required' });
    }

    const response = await axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.OPENWEATHER_API_KEY}&units=metric`
    );

    const weatherData = {
      city: response.data.name,
      temperature: response.data.main.temp,
      description: response.data.weather[0].description,
      humidity: response.data.main.humidity,
      feels_like: response.data.main.feels_like
    };

    res.json(weatherData);
  } catch (error) {
    console.error('Weather API error:', error.message);
    res.status(500).json({ error: 'Failed to fetch weather data' });
  }
});

// Health check
app.get('/health', (req, res) => {
  res.json({ status: 'OK' });
});

app.listen(PORT, () => {
  console.log(`Weather plugin server running on port ${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

Step 5: Test Your Plugin Locally

Start your server:

node server.js
Enter fullscreen mode Exit fullscreen mode

Test the weather endpoint directly:

curl "http://localhost:3000/weather?city=London"
Enter fullscreen mode Exit fullscreen mode

You should see a JSON response with weather data. Also verify your manifest is accessible:

curl "http://localhost:3000/.well-known/ai-plugin.json"
Enter fullscreen mode Exit fullscreen mode

Step 6: Debug Common Issues

CORS Errors: Ensure your CORS configuration includes ChatGPT's domains.

API Key Issues: Double-check your .env file and that the API key is valid.

Manifest Problems: Validate your JSON syntax and ensure all required fields are present.

OpenAPI Specification: Use tools like Swagger Editor to validate your YAML syntax.

Step 7: Deploy Your Plugin

For production deployment, you'll need to:

  1. Choose a hosting platform (Heroku, Railway, Vercel, etc.)
  2. Update your manifest URLs to use your production domain
  3. Set up environment variables on your hosting platform
  4. Enable HTTPS (required for ChatGPT plugins)

Example for Railway deployment:

npm install -g @railway/cli
railway login
railway init
railway up
Enter fullscreen mode Exit fullscreen mode

Update your ai-plugin.json with your new domain:

{
  "api": {
    "type": "openapi",
    "url": "https://your-app.railway.app/openapi.yaml"
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 8: Install in ChatGPT

  1. Open ChatGPT and go to Settings
  2. Navigate to Beta Features and enable "Plugins"
  3. In a new chat, click "Plugins" and then "Plugin Store"
  4. Choose "Develop your own plugin"
  5. Enter your plugin's domain: https://your-app.railway.app

ChatGPT will fetch your manifest and install the plugin.

Security and Best Practices

Rate Limiting: Implement rate limiting to prevent abuse:

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100 // limit each IP to 100 requests per windowMs
});

app.use('/weather', limiter);
Enter fullscreen mode Exit fullscreen mode

Input Validation: Always validate and sanitize user inputs:

const { city } = req.query;
if (!city || typeof city !== 'string' || city.length > 100) {
  return res.status(400).json({ error: 'Invalid city parameter' });
}
Enter fullscreen mode Exit fullscreen mode

Error Handling: Provide meaningful error messages without exposing sensitive information.

API Key Security: Never expose API keys in client-side code or logs.

Testing Your Plugin

Once installed, test your plugin with natural language queries in ChatGPT:

  • "What's the weather like in Tokyo?"
  • "Can you check the temperature in New York?"
  • "Is it humid in Miami right now?"

ChatGPT should automatically use your plugin to fetch real-time weather data.

Conclusion

You've successfully built a ChatGPT plugin that extends the AI's capabilities with real-time weather data. The key concepts—manifest files, OpenAPI specifications, and secure backend services—apply to any plugin you might build.

Next steps could include adding more sophisticated weather features (forecasts, alerts), implementing user authentication, or building plugins for entirely different domains like task management or data visualization.

The plugin ecosystem continues to evolve, but understanding these fundamentals gives you a solid foundation for building AI-integrated applications that solve real problems for users.

Remember to monitor your plugin's usage, gather user feedback, and iterate on the experience. The most successful plugins solve specific problems elegantly and reliably.

Tools mentioned:

Top comments (0)