# OpenAI / Agent Builder / ChatKit / Widgets

**URL:** <https://forum.bubble.io/t/openai-agent-builder-chatkit-widgets/384404>\
**Category:** Need help\
**Created:** [November 2, 2025, 1:24pm UTC](https://forum.bubble.io/t/openai-agent-builder-chatkit-widgets/384404 "2025-11-02T13:24:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Calibratedloss](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@Calibratedloss](https://forum.bubble.io/u/Calibratedloss)\
**Post date:** [November 2, 2025, 1:24pm UTC](https://forum.bubble.io/t/openai-agent-builder-chatkit-widgets/384404/1 "2025-11-02T13:24:51Z")

</div>

Hey all,

With the new release a few weeks ago I have been struggling with integration. The first hurdle of embedding ChatKit in my bubble app was achieved (I’ll add a quick “how I did it” below) but I am still challenged by enabling widget interactions / extracting content from the conversations into bubble. The majority of content I have found online covers a general surface level and I have yet to find how to integrate the more advanced abilities (primarily via widgets.)

For example, the image below is one of the example widgets that OpenAI provides when integrating into your agent workflow.

 ![Screenshot 2025-11-02 at 8.07.52 AM](https://us1.discourse-cdn.com/bubble/original/3X/7/8/78c8b21306661b0c36bbd46655602431b6ef4fa0.png)

Now, I have no issues with the agents extracting data from my bubble application (I primarily rely on Vector Stores + Google Drive MCP). So for the example widget above, it has no issue filling the from/to emails and the subject/body.

My challenge is registering when a button is pressed. Currently, when I press “send email” inside my bubble embedded chatkit, I get an error inside the chat “An error has occurred. Please try again later.” Outside, within the browser console they flag CORS policy and invalid GET URL. (I have spent hours going back and forth trying to resolve this and cannot figure out what is causing it.)

 ![Screenshot 2025-11-02 at 8.13.25 AM](https://us1.discourse-cdn.com/bubble/original/3X/e/5/e5b0b71d854338d14ef364b348a87f1dfce5d1cd.png)

Has anyone integrated actions into their bubble app with these widgets, and if so would you please share how? I’m confident I will be able to get the action to then trigger my bubble workflows (i.e. sendgrid API + normal bubble database updates) but that leads to my other issue:

How do I extract the information within that body? Will it be as simple as reading the schema from the widget in the button workflow?

Would be a massive help if anyone could share some insights or their expertise, thank you!!

* * *

For context (and a “how I did it") for embedding ChatKit inside bubble:

1. I downloaded the official Github files for the “openai-chatkit-starter-app”

2. Created an account with Vercel, and connected my GitHub account + the above files

3. Deployed via Vercel and then utilized an iFrame in an HTML element on my page:

Note: Many issues I ran into with embedding the ChatKit were due to integrating my agent builder workflows and altering the GitHub files. Also, the OpenAI security domains were important to ensure both your bubble app + vercel deployments were added as sometimes your Vercel sessions would not even show up due to not being added / updated in your approved domains.

---

<div class="post-metadata">

**Author:** ![stevemarkovick](https://avatars.discourse-cdn.com/v4/letter/s/51bf81/32.png) [@stevemarkovick](https://forum.bubble.io/u/stevemarkovick)\
**Post date:** [November 6, 2025, 7:26pm UTC](https://forum.bubble.io/t/openai-agent-builder-chatkit-widgets/384404/2 "2025-11-06T19:26:21Z")

</div>

If you’re using OpenAI’s Agent Builder or ChatKit in Bubble, make sure your API connector is configured for streaming responses. I’ve noticed widgets sometimes fail due to missing event listeners or incorrect JSON parsing. Adding a small delay for data binding and testing with console logs helps confirm whether responses are reaching the UI properly.

---

<div class="post-metadata">

**Author:** ![kuntaykunt](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/kuntaykunt/32/240410_2.png) [@kuntaykunt](https://forum.bubble.io/u/kuntaykunt)\
**Post date:** [November 15, 2025, 10:42am UTC](https://forum.bubble.io/t/openai-agent-builder-chatkit-widgets/384404/3 "2025-11-15T10:42:35Z")

</div>

I have developed in the Firebase Studio , it also asks for the repo to start.  
I think Vercel is good but i prefer Gemini power with my side.

**This is what i am testing right now , i am passing the “text” with iframe below script** 😃

```xml
<iframe id="chatkit-iframe" src="URL_TO_YOUR_CHATKIT_APP"></iframe>
<script>
  // Get the iframe element
  const iframe = document.getElementById('chatkit-iframe');
  // Wait for the iframe to load
  iframe.onload = function() {
    // Prepare the message you want to send
    const message = "Hello, this is a message from the parent application!";// Send the message to the iframe
iframe.contentWindow.postMessage({ type: 'NEW_MESSAGE', message: message }, '*');
};

```

This is what i am trying to do to pass the output :

1. **Listen for the Message from the Iframe:**

2. **Create a Workflow to Handle the Received Data:**

Some Notes

- Please add policy to not render rather than your bubble website , security purposes

---

<div class="post-metadata">

**Author:** ![kyliecastaneda](https://avatars.discourse-cdn.com/v4/letter/k/c0e974/32.png) [@kyliecastaneda](https://forum.bubble.io/u/kyliecastaneda)\
**Post date:** [December 30, 2025, 11:32pm UTC](https://forum.bubble.io/t/openai-agent-builder-chatkit-widgets/384404/4 "2025-12-30T23:32:26Z")

</div>

Just adding another setup approach in case it helps anyone 😊

I’m using the ChatKit web component directly on a Bubble page. The session token is created through the API Connector and a Bubble backend workflow, so that part is handled securely on the backend.

Inside the HTML element, I also listen for actions coming from the widget — for example, when a “send email” button is pressed in the widget, the script calls a Bubble backend workflow. Once the workflow finishes, that same script sends a short confirmation message back into the chat so the user knows it has completed.

Sharing in case this is useful as I couldn’t find any other posts or tutorials on how to do so! 👍

---

<div class="post-metadata">

**Author:** ![design.agx](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/design.agx/32/198112_2.png) [@design.agx](https://forum.bubble.io/u/design.agx)\
**Post date:** [December 31, 2025, 8:41am UTC](https://forum.bubble.io/t/openai-agent-builder-chatkit-widgets/384404/5 "2025-12-31T08:41:44Z")

</div>

Nice to see other people are checking out Chatkit! 🙂

I made a [tool](https://bubble-mcp.com/) for building an MCP of your Bubble app. It’s quite useful for integrating it inside OpenAI Agent Builder.

You can also check the post I made her ein the forum:

> [@Build an MCP of your Bubble App](https://forum.bubble.io/t/build-an-mcp-of-your-bubble-app/387458/8):
>
> Update for the Chatkit Integration! Added a feature for giving the AI context of the Current User, which will be the bridge for making sure the AI agent respects the privacy rules attached to that user when asking it to retrieve data trigger actions Also, improve the logs view to have a better understanding of how the calls are being made to the MCP Next step is to build a demo using all this to build an experience like [https://chatkit.world/](https://chatkit.world/) where the user can interact …

It also allows for the integration of Chatkit and listen to clicks on widgets!🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [January 11, 2026, 1:25pm UTC](https://forum.bubble.io/t/openai-agent-builder-chatkit-widgets/384404/6 "2026-01-11T13:25:18Z")

</div>

Closed on January 11, 2026, 1:25pm UTC

This topic was automatically closed after 70 days. New replies are no longer allowed.