Integrating ChatGPT API into Bubble.io: Step-by-Step
A precise, developer-tested walkthrough for connecting OpenAI’s ChatGPT API to your Bubble.io application — covering authentication, request structure, response handling, error management, and cost control.
Prerequisites
You need three things before opening your Bubble editor.
OpenAI API Key
Create an account at platform.openai.com, navigate to API Keys, and generate a new secret key. Store it securely — you cannot view it again after creation.
API Connector Plugin
In your Bubble app, go to Plugins and install the ‘API Connector’ by Bubble. It is free and maintained officially.
A Data Type for Responses
Create a data type (e.g., ‘AI Response’) with at least two fields: prompt (text) and result (text). This lets you store and display AI outputs.
Configure the OpenAI API in Bubble
Navigate to Plugins → API Connector → Add another API.
API Name: OpenAI
Authentication: Private key in header
Header name: Authorization
Header value: Bearer YOUR_API_KEY
Set Shared headers for all calls to include Content-Type: application/json
📌 Never expose your API key in client-side calls. In Bubble, mark the Authorization header as ‘Private’ to keep it server-side only.
Define the API Call
Click ‘Add another call’ inside the OpenAI API you just created.
Call name: Chat Completion
Method: POST
URL:
https://api.openai.com/v1/chat/completionsSet Body type to JSON and paste this request body:
{
"model": "gpt-4o-mini",
"messages": [
{
"role": "system",
"content": "You are a helpful assistant for ."
},
{
"role": "user",
"content": ""
}
],
"max_tokens": ,
"temperature": 0.7
} 📌
Initialise the Call and Map the Response
Click ‘Initialize call’. Bubble sends a test request and maps every field in the JSON response.
After initialisation, Bubble maps fields including:
Key Response Fields
- choices[0].message.content — The AI reply text. This is what you display to users.
- usage.total_tokens — Total tokens consumed. Use this for cost tracking.
- id — Unique ID for this completion. Useful for logging.
- model — Confirms which model version processed the request.
Wire the Call to a Workflow
Add a workflow to a button or event, then call the API and handle the response.
Add the API action
In your workflow, add action: Plugins → OpenAI – Chat Completion. Fill in app_context with a static description of your app, user_message with the input element’s value, and max_tokens with a number (e.g., 800).
Save the result
Add action: ‘Create a new AI Response’. Set prompt = Input Element’s value. Set result = Result of step 1’s choices[0].message.content.
Display it
Bind a multi-line text element to ‘Current Page’s AI Response’s result’ — or use a custom state if you want to show results without database persistence.
Handle errors
Add a ‘Trigger a custom event’ action after the API call that checks if the result is empty. Show an alert or retry message if the AI response did not return cleanly.
Choosing the Right GPT Model
The model you choose in the request body has a significant impact on cost, speed, and quality.
| Model | Speed | Quality | Cost | Best For |
|---|---|---|---|---|
| gpt-4o-mini | Fast | Good | Low | High-frequency tasks: classification, short generation, chat |
| gpt-4o | Medium | Excellent | Medium | Complex reasoning, long documents, nuanced writing |
| gpt-4-turbo | Medium | Excellent | Higher | Tasks needing very long context windows (128k tokens) |
Managing Token Costs in Bubble
API costs accumulate quickly in production. Apply these practices from day one.
Set max_tokens limits
Never let users trigger unlimited token requests. Set a max_tokens cap appropriate to the feature — 300 for short summaries, 1000 for longer content — and make it a configurable app setting.
Cache common responses
If multiple users ask the same question, store the AI response in your database and return the cached version instead of calling the API again. A simple exact-match lookup on the prompt field eliminates duplicate spend.
Rate limit per user
Add a constraint in your workflow: check how many AI requests the current user has made today before triggering the API call. Enforce a daily limit to prevent abuse.
Want a Production-Ready ChatGPT Integration?
SA Solutions builds Bubble.io apps with robust, cost-controlled AI integrations — not just proof-of-concept demos. We handle authentication, error handling, response management, and UI together.
