Integration of TinyMCE editor and ChatGPT

Question

I'm trying to integrate TunyMCE editor with ChatGPT so I can use some OpenAI features. I was trying to implement this example: https://www.tiny.cloud/blog/chatgpt-integration/, but I always get error 429: Error 429

I tried running this example from this tutorial: https://codepen.io/tinymce/pen/bGxzmBa and I'm using my API KEY, but I still get the same error. Does anyone know what is the solution to this? Is there any other way?

Here is the code:

<body>
  <label style="font-family: Arial, Helvetica, sans-serif; font-size: medium;">Add openAI API key here</label>
  <input type="text" id="protect-key">
  <textarea id="editor" cols="30" rows="10">
    <p>Hi ChatGPT, what is a major problem in front end development?</p>
  </textarea>
</body>

tinymce.init({
  selector: "#editor",
  plugins: "code powerpaste link image table",
  toolbar: "undo redo | styles | bold italic | link image | AskChatGPT",
  content_style:
    "div.answer { font-family: Consolas,monaco,monospace;  background-color: #023020; color: white; padding: 3px; }",

  setup: (editor) => {
    editor.ui.registry.addButton("AskChatGPT", {
      text: "Ask ChatGPT",
      icon: "highlight-bg-color",
      tooltip: "Highlight a prompt and click this button to query ChatGPT",
      enabled: true,
      onAction: (_) => {
        const api_key = document.getElementById("protect-key").value;
        const selection = tinymce.activeEditor.selection.getContent();
        console.log(selection);
        const ChatGPT = {
          model: "text-davinci-003",
          prompt: selection,
          temperature: 0,
          max_tokens: 70
        };
        fetch("https://api.openai.com/v1/completions", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${api_key}`
          },
          body: JSON.stringify(ChatGPT)
        })
          .then((res) => res.json())
          .then((data) => {
            var reply = data.choices[0].text;
            console.log(reply);
            editor.dom.add(tinymce.activeEditor.getBody(), "div", { class: "answer" }, reply );
            editor.dom.add(tinymce.activeEditor.getBody(), "p", {}, "Next prompt?");
            editor.selection.select(tinyMCE.activeEditor.getBody(), true);
            editor.selection.collapse();
            editor.focus();
          })
          .catch((error) => {
            console.log("something went wrong");
          });
      }
    });
  }
});

Thanks for any help!

Integration of TinyMCE editor and ChatGPT

0 Answers0