Embedding a GPT in website

API
,
18

Just to be clear: If you want to embed your “ChatGPT GPT” into your website, there is no clear way right now.

If your use case is for a business that wants to embed a custom retrieval-based widget (using your content), here is an alternative. (Disclaimer: I am one of the makers)

There was a discussion around this couple of months ago.

The native OpenAI retrieval is extremely rudimentary right now. It is bound to improve over time though.

Langchain is a pain (see why) – so if you need real business-grade retrieval, you might need to consider a “Build vs Buy” approach.

LOL … :slight_smile:

1 Like
19

Thanks @alden !

I was also looking at your plugin, looks very good!
But am i right in saying it doesnt “blend” my own content with native gpt4 internet knowledge in its outputs?

20

99% of our customers DO NOT want to blend the content. In fact, anti-hallucination is our most required feature. For the remaining 1%, we have an option to blend the content. It’s called “My Content + ChatGPT”.

21

I think popular plugins, frameworks and solutions will continue to be absorbed by OpenAI. Any successful technology stack iterates over and eventually absorbs most popular 3rd party solutions.

1 Like
22

Ah thats good to know, I’ll dive into it!

24

How about using assistant API and turning it into an iframe on your web page. Example code generated with GPT as reference for you. This is not using assistant API, but serves the iframe demo concept.

With this chat widget as part of your base.html and a bit more javascript, one could detect which page it is activated from and could navigate the conversation to that context.

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

html page:

<!-- 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>
2 Likes
25

Hi, sorry if this questions is super rookie or unrelated but is it possible to embed the upload document features from Open AI into a website/web app? We are using an API but can this somehow also be embedded so that documents can be scanned as part of the program as they can so easily in Chat. For context, I am building in the education space and want students to be able to upload documents. Thanks.

26

Thanks @engagepy ! I’ll look into this if my limited knowledge allows :slight_smile:

1 Like
27

@ben.michael.brown so you want to basically upload retreival docs through the API? I haven’t seen this in the documentation or on the forum, but not an expert by far…

1 Like
28

Thanks for the reply @sfvp . Yeah, just want to use the same system that open ai use in order to upload and read documents - wondering if this might be part of an API or something like that

29

why don’t you deploy with streamlit and then embed it in wordpress ?

30

Have one assistant that can call a function to list the assistant to use based on the user query, then pass the query to it using the same thread

This is exactly what I was theorizing about with the GPT’s, since they have API functionality and json output. I’ve been reading the OpenAI docs for API integration, and I really wanted to create an interactable GPT on my website, able to reference other GPT formats or other Docs hosted on the same website. But I do not know enough to set it up on my website, versus the chatgpt link

32

Plus 1, I’m also looking for the solution to embed a custom GPT into my website.

33

@sfvp Hey, Did you find a reliable solution for embedding a GPT in wordpress website.
Please share any approaches you used.

34

There is no “solution” for taking a GPT out of ChatGPT Plus.

Creating and using GPT shares is solely for subscribers of ChatGPT Plus within the ChatGPT web site.

When you share a GPT, you are sharing an ad.
image

Developers that wish to use OpenAI outside of ChatGPT must use API model products - and pay for the language data usage.

1 Like
35

Hi @devbulchandani8 ! The conclusion so far is that you simply create an Assistant (assistant api) instead of a GPT. Then either have someone built the chatbox integration for you, or wait u till one of the plugin builders adds this to their plugin. I just saw this meow plugin commenting thats its on the to do list so that would be perfect: Assistents API | WordPress.org

The one thing open for debate is that the assistant api seems to “talk” a bit different than the GPTs from what im reading, probably needs more instructions and tweaking i guess…

1 Like
36

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’d recommend the Meow Apps plugin (not affiliated).

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).

Here’s a screenshot:

image
image1507×908 39.2 KB

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

1 Like
37

This post was flagged by the community and is temporarily hidden.

38

Thanks so much @chris42 !

I indeed ended up doing this exact thing, it works remarkably well and the plugin is super good quality.

I have a feeling the embeddings on native chatgpt assistants api might (or will in the future) blend the knowledge better but for now it’s fine. Meow was planning on adding the assistants API functionality to their plugin so im just waiting on that to happen and then I’ll switch…

1 Like
39

Great, thanks for letting us know @sfvp! Didn’t know they planned to add assistants API as well. I bet that OpenAI will eventually disrupt them with their own native way of adding a GPT to any website…

1 Like