Trying chatkit on localhost

API
1

I was trying to test chatkit on localhost as follows:

Got the secret from the server:

const OpenAI = require('openai').default;

const client = new OpenAI();

async function main() {
const chatSession = await client.beta.chatkit.sessions.create({ 
  user: 'user', 
  workflow: { id: 'wf_68e4...' } });

console.log(chatSession);

}

main();

The put it in the html to start a session, like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>ChatKit Integration Example</title>
  </head>
  <body>
    <openai-chatkit id="my-chat"></openai-chatkit>

    <script
      src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"
      async
    ></script>

    <script>
      // Wait for the custom element to be defined
      (async () => {
        await customElements.whenDefined('openai-chatkit');

        const chatkitEl = document.getElementById('my-chat');

        chatkitEl.addEventListener('chatkit.ready', () => {
          console.log('ChatKit is ready');
        }, { once: true });

        chatkitEl.setOptions({
              api: { 
                getClientSecret(currentClientSecret) { 
                  if (!currentClientSecret) { 
                    return 'my_secret'; 
                  } 
                return 'my_secret'; 
              }, 
            },          
        });
      })();
    </script>
  </body>
</html>

I got the error that localhost is not an allowed origin in production. So I tried it with a draf workflow and got the same error.

I then tried to add localhost to the allowed origins for chatkit, but is disallowed localhost :frowning:

So then I found an option on the dashboard → Security to whitelist the IP.
So I added the IP address, but still no luck.

Anyone managed to do a quick test of this on localhost or do I need to host it on a domain to even test it?

1 Like
2

I just hit this issue too. I suspect the answer may be edit the hosts file to map a dev subdomain to 127.0.0.1

Don’t have time to do that myself now. Will try tomorrow. Let me know if it works for you!

1 Like
3

yes that seemed to work, the 401 error is gone. But there is still an error:

Uncaught TypeError: crypto.randomUUID is not a function
    at index-DnhJB7d5.js:360:78508

and

Uncaught ReferenceError: Cannot access 'At' before initialization
    at Object.error (index-DnhJB7d5.js:217:2290)
    at Object.error (index-DnhJB7d5.js:217:2742)
    at index-DnhJB7d5.js:217:3029

I even tried the official react starter app, and it shows the same error.

1 Like
4

You need to run your local env in https://

1 Like