How to Use OpenAI and Claude in Bubble.io: The API Connector Setup Guide

Updated October 2026 · By Athar Ahmad, certified Bubble.io developer and founder of SA Solutions

Adding AI to a Bubble.io app no longer requires a developer. With Bubble.io’s API Connector you can call OpenAI or Anthropic’s Claude directly to summarise documents, draft replies, classify requests, extract data or power an assistant. This guide walks through a secure setup, how to design prompts and responses that work reliably, and how to control cost and protect user data.

What you can build with AI in Bubble.io

• Writing help: draft emails, proposals or product descriptions from a few inputs
• Summaries: turn long notes, documents or support threads into short summaries
• Classification: route tickets, tag leads or flag urgent requests automatically
• Data extraction: pull names, dates and amounts from free text into structured fields
• Assistants: chat interfaces that answer questions using your app’s own data

Before building, decide whether AI genuinely improves the product; see which AI features are worth building and does your MVP really need AI. Bubble.io also has its own built-in AI tools for building apps faster, which are different from adding AI features for your users; see Bubble.io AI features.

Before you start

1. Create an account with OpenAI or Anthropic and generate an API key
2. Set a monthly spending limit in the provider’s dashboard
3. Choose a current model from the provider’s model list; smaller models are faster and cheaper for simple tasks
4. Install Bubble.io’s API Connector plugin in your app

Setting up OpenAI in the API Connector

1. Add an API and name it OpenAI
2. Authentication: choose private key in header, with the key name Authorization and the value Bearer followed by your API key. Keep it private so it stays on the server
3. Add a call, for example Generate text, using the POST method to OpenAI’s API endpoint for text generation
4. Headers: add Content-Type: application/json
5. Body: a JSON body with the model name and your messages, where the user’s text is a dynamic parameter in angle brackets, such as <prompt>
6. Use as: Action, so it can run in workflows
7. Initialise the call with a test prompt so Bubble.io detects the response fields

For a deeper explanation of every API Connector setting, see the Bubble.io API Connector guide.

Setting up Claude

Claude works the same way through Anthropic’s Messages API. Add a new API in the API Connector, include your API key in the header Anthropic requires along with its API version header, keep both private, and send a POST request with the model name, a maximum length for the reply and your messages. Initialise with a test prompt as before.

Some apps support both providers and choose per feature, for example a smaller model for classification and a more capable one for long documents. Storing prompts and results in your own data types makes switching easy.

Using the AI call in workflows

• Frontend: a button such as Summarise runs the call and shows the result in a text element or saves it to a field
• Backend: long or automated jobs, such as summarising every new document, run as backend workflows that keep going if the user leaves; see our backend workflows guide
• Save results: store the AI response on a record so you do not pay to generate the same answer twice
• Show progress: AI calls can take several seconds, so show a loading state and disable the button while waiting

Building a multi-step assistant that takes actions? See how to build an AI agent with Bubble.

Getting reliable, structured answers

• Use a system instruction that sets the role, tone, length and rules, for example “Answer in under 80 words using only the information provided”
• Ask for JSON when you need fields, such as category and priority, and parse the reply into your data types; both providers offer structured output options
• Give context, not everything: send only the data needed for the task, which improves quality and cuts cost
• Handle errors: capture API errors in the workflow and show a friendly message or retry, instead of failing silently
• Keep a human in the loop for anything customer-facing or important, such as legal or financial text

Cost, limits and privacy

Common mistakes

• Exposing the API key by not marking it private
• Calling the AI on every page load instead of on demand and caching results
• Free-text replies where your app actually needs structured fields
• No usage limits, leaving costs open-ended
• Sending entire records or documents when a short extract would do

Frequently asked questions

How do I connect OpenAI to Bubble.io?

Use the API Connector. Create an API for OpenAI, add your API key as a private Authorization header, then add a POST call to OpenAI's API with your prompt as a dynamic parameter. Initialise the call with a test prompt so Bubble.io learns the response structure, and use it in your workflows.

Can I use Claude instead of OpenAI in Bubble.io?

Yes. The setup is the same idea: add Anthropic's Messages API in the API Connector with your API key and the required version header kept private. Many apps let you switch providers by keeping prompts and responses in your own data types.

Is my API key safe in Bubble.io?

It is safe when you mark the key as private in the API Connector, so Bubble.io sends it from the server and never exposes it in the browser. Never put an API key in a page element, a plugin field or client-side JavaScript.

How much does it cost to add AI to a Bubble.io app?

AI providers charge per token, meaning per amount of text sent and returned, so cost depends on the model and how much text each feature processes. Shorter prompts, smaller models for simple tasks and per-user usage limits keep costs predictable. Each API call also uses Bubble.io workload units.

Should AI calls run in frontend or backend workflows?

Short, user-triggered calls can run from the page. Anything long, sensitive or automated, such as processing documents or scheduled summaries, should run in a backend workflow, which keeps working after the user leaves and keeps logic on the server.