Zenn
🤖

HTML+Javascript+GASでChatGPTと連携するシンプルなチャットボットを作ってみた

2023/05/27に公開
JavaScript
chatbot
チャットボット
ChatGPT
tech

はじめに

こんにちは。今回はHTML+Javascript+GASでChatGPTと連携するシンプルなチャットボット（Chatbot）を作ってみます。

デモ


https://youtube.com/shorts/RPkp3qPkGlA?feature=share

前提

  • チャットボットはチャットUIライブラリ　chatux　を使用します
  • OpenAIのAPIキーが必要なので、事前に取得してください
  • バックエンドはGoogleAppsScriptを使用しますので、Googleアカウントが必要です

ソースコード

https://github.com/lemonx365/chatgpt-chatbot

HTML

<!DOCTYPE html>
<html lang="ja-JP">
  <head>
    <title>ChatGPT-ChatBot</title>
    <script src="https://cdn.jsdelivr.net/npm/chatux/dist/chatux.min.js"></script>
  </head>
  <body>
    <script type="text/javascript" src="./chatbot.js"></script>
  </body>
</html>

Javascript

const chatux = new ChatUx();
const initParam = {
  renderMode: "auto",
  api: {
    //デプロイされたGASのエンドポイントを記載します。
    endpoint: "Google Apps Script Endpoint",
    method: "GET",
    dataType: "jsonp",
    errorResponse: {
      output: [{ type: "text", value: "network error" }],
    },
  },
  bot: {
    wakeupText: null,
    botPhoto:
      "https://img.uxwing.com/wp-content/themes/uxwing/download/brands-social-media/chatgpt-icon.svg",
    humanPhoto: null,
    widget: {
      sendLabel: "SEND",
      placeHolder: "Say Something",
    },
  },
  window: {
    title: "ChatGPT-ChatBot",
    infoUrl: null,
  },
  wakeupButton: {
    right: 20,
    bottom: 30,
    size: 60,
    fontSize: 25,
  },
};
chatux.init(initParam);
chatux.start(true);

Google Apps Script

GoogleAppsScriptから新規プロジェクトを作成し、以下のコードを入力します。

const openaiApiKey =
  PropertiesService.getScriptProperties().getProperty("APIKEY");
const openaiApiUrl = "https://api.openai.com/v1/chat/completions";

function doGet(e) {
  const userInputText = e.parameter.text;
  const callback = e.parameter.callback;
  const response = {
    output: [{ type: "text", value: postOpenAI(userInputText) }],
  };

  let responseText = "";
  if (callback) {
    // JSONP
    responseText = `${callback}(${JSON.stringify(response)})`;
    return ContentService.createTextOutput(responseText).setMimeType(
      ContentService.MimeType.JAVASCRIPT
    );
  } else {
    // JSON
    return ContentService.createTextOutput(
      JSON.stringify(response)
    ).setMimeType(ContentService.MimeType.JSON);
  }
}

function postOpenAI(message) {
  const messages = [{ role: "user", content: message }];
  const headers = {
    Authorization: "Bearer " + openaiApiKey,
    "Content-type": "application/json",
    "X-Slack-No-Retry": 1,
  };
  const options = {
    muteHttpExceptions: true,
    headers: headers,
    method: "POST",
    payload: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: messages,
    }),
  };
  const response = JSON.parse(
    UrlFetchApp.fetch(openaiApiUrl, options).getContentText()
  );
  return response.choices[0].message.content.trim();
}

スクリプト プロパティに「APIKEY」という名前のスクリプトを追加して、値にOpenAIのAPI KEYを入力し、保存します。
OpenAIのAPI KEYの取得方法は他の記事を参考にしてください。
設定ができましたら、「デプロイ」→「新しいデプロイ」を選択し、エンドポイントを作成します。
エンドポイントはjavascriptのendpoint: "Google Apps Script Endpoint"に記載しましょう。

まとめ

後は設定したindex.htmlを立ち上げて、チャットボットが期待通り動くか確かめましょう！
ではでは〜

Discussion