OpenAI API in Bubble Walkthrough

What This Walkthrough Covers

Bubble is a full no-code app builder, and increasingly the apps people build on it need AI features — a support chatbot, an AI writing assistant embedded in the product, a summarizer, or a classifier that tags incoming data. Bubble doesn’t have a native OpenAI connector baked into the core editor, so integrating the OpenAI API means either using Bubble’s official OpenAI plugin or wiring up the generic API Connector plugin by hand. Both routes are covered below, since each has real trade-offs.

Route 1: The Official OpenAI Plugin

Bubble publishes an official OpenAI plugin in the Bubble plugin marketplace (search “OpenAI” in the Plugins tab). It wraps the most common endpoints — chat completions, image generation (DALL-E), and embeddings — into ready-made Bubble actions so you don’t hand-build the API calls.

1. Install the plugin from the Plugins tab inside your Bubble editor.
2. Add your API key. Generate one at platform.openai.com under API Keys, then paste it into the plugin’s settings. Keep it server-side only — never expose it in a client-side workflow that runs in the user’s browser.
3. Add the action to a workflow. On a button click (e.g., “Ask AI”), add a new step “OpenAI – Create chat completion,” pass in your prompt (built from user input via Bubble’s dynamic expressions), and choose your model.
4. Display the result. The plugin returns the response as a data field you can show in a text element, save to the database, or feed into a further workflow step.

This route is faster to set up (typically under an hour for a basic chat feature) and Bubble handles the underlying HTTP mechanics for you, but you’re limited to the endpoints and parameters the plugin author chose to expose.

Route 2: API Connector (Full Control)

For anything the official plugin doesn’t support — streaming responses, function calling, vision inputs, or a newer model the plugin hasn’t added yet — use Bubble’s built-in API Connector plugin to call the OpenAI REST API directly.

1. Install API Connector (a first-party Bubble plugin, free).
2. Add a new API named “OpenAI,” set authentication to “Private key in header,” header name Authorization, value Bearer YOUR_API_KEY.
3. Define a call. Set the endpoint to https://api.openai.com/v1/chat/completions, method POST, and build the JSON body with a dynamic field for the prompt, e.g. {"model":"gpt-4o-mini","messages":[{"role":"user","content":"<prompt>"}]}.
4. Initialize the call with a sample prompt so Bubble can detect the response shape and let you reference fields like choices[0].message.content in later workflow steps.
5. Use it in a workflow exactly like any other action — trigger on button click, form submit, or a backend workflow for scheduled/batch calls.

Where to Run the Call: Frontend vs. Backend Workflows

This is the decision that matters most for cost, security, and reliability. Running the OpenAI call in a page-level (frontend) workflow means it fires in the user’s browser session — simpler to debug, but the API key round-trips through Bubble’s servers on every call and any client-triggered abuse (a user spamming the button) hits your OpenAI bill directly with no throttle. Running it in a backend workflow (Bubble’s API Workflows / server-side scheduler) lets you add rate-limiting logic, queue requests, log usage per user, and keep sensitive prompt-engineering logic off the client entirely. For anything user-facing and public, backend workflows are the safer default.

Cost Control Tips

• Cap max_tokens in every request body — an unbounded response on a verbose model is the single most common cause of surprise OpenAI bills in Bubble apps.
• Use gpt-4o-mini or similar smaller models for anything that doesn’t need frontier reasoning — classification, tagging, short summaries. Reserve larger models for tasks that actually need them.
• Log token usage per user in a Bubble database table (the API response includes a usage object) so you can spot a runaway user or feature before the monthly invoice does.
• Add a daily/monthly cap check as a condition before the workflow step fires, comparing a user’s logged usage against a limit field.

FAQ

Do I need a paid Bubble plan to use the OpenAI API?
No — API Connector and the official OpenAI plugin both work on Bubble’s free tier. You will need your own OpenAI account with billing set up, since Bubble doesn’t provide API credits.

Can I stream responses token-by-token like ChatGPT does?
Streaming is difficult in Bubble’s native workflow model since it isn’t built for long-lived connections. Most builders instead poll for completion or accept the full response arriving at once; a few advanced setups use a plugin like “AI Chatbot” from the marketplace that handles streaming under the hood.

Is my API key safe in Bubble?
Yes, if you use API Connector’s “Private key” authentication mode and call it from a backend workflow — the key is stored server-side and never sent to the browser. Avoid pasting the key directly into a frontend workflow’s custom header field, which can leak it in dev tools.

Verdict

Start with the official OpenAI plugin if your feature is a straightforward chat or completion box — it’ll get a working demo in front of users the same day. Move to the API Connector, run from a backend workflow, once you need model flexibility, function calling, or you’re shipping to real (potentially abusive) public traffic. The combination of API Connector + backend workflow + a logged usage cap is what most production Bubble apps with AI features end up running.