Create a ChatGPT Website Chatbot

Most developers don't know this, but our ChatGPT website chatbot technology actually allows you to easily create your own website chatbot. This is because we expose an easily consumed API for others to hook unto.

This allows you to create a completely custom user interface, with your preferred frontend technology of choice, and such end up with a completely unique website chatbot based upon ChatGPT, with whatever frontend feature set you need for it to have. You can of course also use the API to integrate our ChatGPT backend with other technologies, such as Zapier or WhatsApp for that matter.

The API

If you click the chat button in the bottom/right corner of this page, and chose the network tab before submitting any question such as for instance "hi", you can see a chat prompt as it is going towards our backend. The payload has 5 fields that are as follows;

prompt
type
recaptcha_response
chat
session

The prompt is whatever question the user is asking and it needs to be URL encoded. The type is the name of your machine learning model as declared in your Magic Dashboard. The recaptcha_response parts is the returned value from Google's reCAPTCHA library. The chat argument must always be true since without it the API won't invoke ChatGPT, and session is just a unique string you can create using any randomly generated string. However, for each individual session you probably want to reuse the session, since on the backend we're associating this with individual sessions, which is how we allow for users to have conversations with ChatGPT.

The URL to your backend chatbot is always as follows; https://cloudlet-username.us.ainiro.io/magic/system/openai/prompt and all fields should be submitted as URL encoded QUERY parameters. cloudlet is the name of your Magic cloudlet and username is your username at Hub. If you have a demo chatbot, you can simply copy and paste the URL from your demo page where you test your chatbot to get these parts correctly applied. You can request a demo chatbot here. Below is an example of an invocation towards your backend.

https://ainiro.io/magic/system/openai/chat?prompt=hi&type=ainiro_io&recaptcha_response=RECAP&chat=true&session=SES

The chatbot code

Below is the simplest possible code to invoke your backend from JavaScript. Notice, you will need to include reCAPTCHA on your page to make this work. You can see how to achieve that further down on the page.

function invoke_prompt(msg) {

  grecaptcha.ready(function() {

    grecaptcha.execute('RECAPTCHA_SITE_KEY', {action: 'submit'}).then(function(token) {
      let url = 'https://cloudlet-username.us.ainiro.io/magic/system/openai/chat' +
        '?prompt=' + encodeURIComponent(msg) +
        '&type=YOUR_TYPE' +
        '&recaptcha_response=' + encodeURIComponent(token) +
        '&chat=true' +
        '&session=SESSION';

      fetch(url, {
        method: 'GET',
      }).then(res => {
          return res.json();
        })
        .then(data => {

          alert(idx.prompt);
      });

    });
  });
}

A complete custom ChatGPT website chatbot example

Below is a complete HTML page that embeds the required code for a minimalistic fully functioning ChatGPT website chatbot. This chatbot is using our default model, so you can only ask it questions related to AINIRO - But if you've requested a demo chatbot, you can exchange the URL and the type to have it working towards your own model.

<!DOCTYPE html>
<html>
<head>
  <title>Custom ChatGPT website chatbot</title>
  <script>
function invoke_prompt(event) {

  grecaptcha.ready(function() {

    grecaptcha.execute('6LfVd20fAAAAAC2tcJ55RvOEkraQL390cDw2yiT2', {action: 'submit'}).then(function(token) {
      let url = 'https://ainiro.io/magic/system/openai/chat' +
        '?prompt=' + encodeURIComponent(document.getElementById('prompt').value) +
        '&type=ainiro_io' +
        '&recaptcha_response=' + encodeURIComponent(token) +
        '&chat=true' +
        '&session=SESSION';

      fetch(url, {
        method: 'GET',
      }).then(res => {
          return res.json();
        })
        .then(data => {
          document.getElementById('result').innerHTML += '<p>' + data.result + '</p>';
      });

    });
  });
  event.preventDefault();
}

  </script>
  <script src="https://www.google.com/recaptcha/api.js?render=6LfVd20fAAAAAC2tcJ55RvOEkraQL390cDw2yiT2"></script>
</head>
<body>
  <h1>Custom ChatGPT website chatbot</h1>
  <p>Custom ChatGPT website chatbot example</p>
  <form onsubmit="invoke_prompt(event)">
    <input id='prompt'>
    <button type="submit">Submit</button>
  </form>
  <div id="result"></div>
</body>
</html>