Embedding Your GPT in a Website – Be on the Right Side of Change

🧑‍💻 Question: I want to integrate a (custom) GPT model into my website to enhance its interactive features with AI-driven capabilities. How do I achieve this while ensuring the AI functions effectively within the web environment and aligns with my site’s design and functionality? How do I ensure real-time responses, contextually relevant interactions, and an intuitive user interface for this AI integration?

When facing these questions, I considered these three methods (and personally implemented the first one):

Method 1: WordPress Plugin

A GPT is mostly a context prompt with context data (=embeddings), Avatar image, and potential actions. If you don’t badly need actions, i.e., external API calls such as weather data, and you run WordPress, I recommend the Meow Apps plugin (not affiliated).

Here’s a screenshot:

In the ‘Chatbots’ section, you can set the Context. Simply copy and paste the ‘Instructions’ prompt from the GPTs builder here.

In the ‘Chatbots > Visual Settings’ section, you can set the name and Avatar of your GPT so it feels the same.

In the ‘Chatbots > Embeddings’ section you can set the environment and add external data (e.g., using Pinecone).

I’m super happy with the plugin and can generally recommend it. You can see it live on any of our (bottom right) with what you may call a ‘custom GPT’.

Here are some alternative solutions for embedding a GPT model on a website, provided by the community in November 2023:

Method 2: Using Assistant API with an iFrame

Implement an iframe on your webpage to embed the GPT.

Integrate a chat widget in the base.html file, using JavaScript to navigate the conversation based on the activated page.

Set up a Flask backend to handle API requests and send responses. Web developer Zorawar Purohit provided this code for the Flask backend:

# backend.py

from flask import Flask, request, jsonify
from flask_cors import CORS
import openai

app = Flask(__name__)
CORS(app)  # Enable CORS

openai.api_key = 'your-api-key'  # Replace with your OpenAI API key

@app.route('/ask', methods=['POST'])
def ask():
    data = request.json
    response = openai.Completion.create(
        engine="text-davinci-003",
        prompt=data['prompt'],
        max_tokens=150
    )
    return jsonify(response)

if __name__ == '__main__':
    app.run(port=5000)  # Run the Flask app on port 5000

Include an HTML page setup with iframe, form, and JavaScript function to send messages to the AI and display responses (source):

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI Assistant</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        iframe {
            width: 100%;
            height: 500px;
            border: none;
        }
    </style>
</head>
<body>
    <iframe id="ai_frame" sandbox="allow-scripts allow-same-origin"></iframe>

    <form onsubmit="sendMessageToAI(); return false;">
        <input type="text" id="prompt" name="prompt" required>
        <input type="submit" value="Ask AI">
    </form>

    <script>
        function sendMessageToAI() {
            var prompt = document.getElementById('prompt').value;
            $.ajax({
                url: 'http://localhost:5000/ask',  // Point to the backend endpoint
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ prompt: prompt }),
                success: function(response) {
                    // Write the AI's response to the iframe
                    var iframeDocument = document.getElementById('ai_frame').contentDocument;
                    iframeDocument.open();
                    iframeDocument.write('<p>' + response.choices[0].text + '</p>');
                    iframeDocument.close();
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.error("Error: " + status + " - " + error);
                }
            });
        }
    </script>
</body>
</html>

Method 3: Creating an Assistant Instead of a GPT

Opt for creating an Assistant (using the Assistant API) instead of directly embedding a GPT model.

Consider having a chatbox integration built for you or waiting for a plugin builder (e.g., Meow) to add this functionality to their plugin.

Note that the Assistant API might interact differently than GPT models, potentially requiring more instructions and tweaking.

Also, note that there may be additional solutions at the time you’re reading this – the space is rapidly evolving. 🚀

To stay updated with all the trends, consider subscribing to our email newsletter on the latest tech and trends in LLM and Python by downloading any of our cheat sheets: