Run code on chat.openai.com using BrokerClient

gpt_coderunner_dispatcher.user.js

// ==UserScript==
// @name          OpenAI Code Runner
// @namespace     http://tampermonkey.net/
// @version       1.1
// @description   Run code on chat.openai.com using BrokerClient
// @include       https://chat.openai.com/*
// @grant         GM.communicator
// @grant         GM.gpt
// @grant         GM_addValueChangeListener
// @grant         unsafeWindow
// @inject-into   content
// ==/UserScript==

(function () {
  'use strict';

  const playButtonClassName = 'userscript-play-button';
  const playButtonStyle = `
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: white;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 22px;
    z-index: 9999;
  `;

  async function runCode(code) {

    const chatBot = GM.gpt();
    const brokerClient = GM.communicator();
    let response = await brokerClient.request('TEST_SCRIPT', code);

    while (!response.payload.success) {
      const errorAsString = JSON.stringify(response.payload, null, 2);
      const errorText = `There was an error, please try to fix the file.

error:
${errorAsString}

please output the full corrected file in a code block`;

      const newTry = await chatBot.request(errorText);
      console.log(newTry)
      const newCode = chatBot.combineCodeElementsWithClass(['language-javascript', 'language-scss'], newTry.codeElements);
      response = await brokerClient.request('TEST_SCRIPT', newCode);
    }

    alert('code executed sucessfully!');


  }

  function createPlayButton() {
    const playButton = document.createElement('span');
    playButton.textContent = '▶';
    playButton.className = playButtonClassName;
    playButton.style.cssText = playButtonStyle;
    playButton.addEventListener('click', (event) => {
      event.stopPropagation();
      let codeElement = event.target.nextElementSibling;
      while (codeElement && codeElement.tagName !== "CODE"){
        codeElement = codeElement.nextElementSibling;
      }
      if (codeElement){
        const code = codeElement.textContent;
        runCode(code);
      } else {
        alert('something went wrong, cant find code')
      }
    });
    return playButton;
  }
  function isUserscript(code) {
    const regex = /\/\/\s?==UserScript==[\s\S]*\/\/\s?==\/UserScript==/;
    return regex.test(code);
  }
  function checkAndUpdateCodeElements() {
    const codeElements = Array.from(document.querySelectorAll(
      'code:not(.userscript-processed)'
    )).filter(element => {
        return isUserscript(element.textContent);
    });
    codeElements.forEach((element) => {
      element.classList.add('userscript-processed');
      const playButton = createPlayButton();
      element.parentElement.style.position = 'relative';
      element.parentElement.insertBefore(playButton, element);
    });
  }

  setInterval(checkAndUpdateCodeElements, 1000);
})();