Create a ChatGPT Website Chatbot
Published: 2023-05-16 06:48:25

Most developers don't know this, but our [ChatGPT website chatbot](https://ainiro.io/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](https://zapier.com/) 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](https://ainiro.io/blog/chatgpt-conversations).

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](https://hub.ainiro.io). 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](https://ainiro.io/contact-us#demo). 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.

```javascript
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](https://ainiro.io/contact-us#demo), you can exchange the URL and the `type` to have it working towards your own model.

```html
<!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>
```

You can [try the demo chatbot example here](https://demo-team.us.ainiro.io/custom-chatbot).