How to add an AI chatbot to a Bubble.io app: 3 ways, from a 10-minute widget to a chatbot that knows your data

Short answer: There are three ways to add an AI chatbot to a Bubble.io app. (1) Embed a ready-made chatbot widget with an HTML element: live in minutes, but the bot can't see your app's data. (2) Build your own chat in Bubble and call the OpenAI or Claude API through the API Connector: you control the design, the conversation history and the cost, and Bubble's native streaming shows the answer as it's written. (3) Connect the chatbot to your own documents and data (RAG), usually with n8n or a vector database in between. Whichever you pick, keep the API key in a field marked Private and add usage limits per user.

"Can you add a chatbot to our Bubble app?" is one of the requests we hear most since AI went mainstream. The honest answer is yes, but "chatbot" covers three very different projects. A support widget on the homepage and an assistant that answers questions about a user's own orders are not the same build, and they don't cost the same.

The 3 ways at a glance

Way 1: embed a ready-made chatbot widget

Chatbot builders such as Chatbase or Voiceflow let you train a bot on your website or a few documents, then give you a short embed script. In Bubble you paste it into an HTML element on the page, or into Settings → SEO / metatags → Script/meta tags in header if the bot should appear on every page. Preview the app and the chat bubble shows up.

• Good: fastest route, no workflows, no API keys in Bubble, the provider handles the model and the hosting.
• Limits: the bot doesn't know who is logged in or what's in your Bubble database. It can answer "what are your opening hours", not "where is my order". Conversations live in the provider's dashboard, not in your app.

Pick this for a marketing site or an FAQ bot. If the chatbot needs to act on your users' data, skip to Way 2.

Way 2: build your own chat with the OpenAI or Claude API

This is the setup we use most for chatbots inside a product. The chat window is a normal Bubble page or group, the messages are records in your database, and each new message calls the model through the API Connector.

Step 1: the data model

Create two data types:

• Conversation: owner (User), title, created date.
• Message: conversation (Conversation), role (user or assistant), text, and optionally the tokens used.

Add privacy rules right away, so a user can only find the conversations and messages they own. Chat history often holds the most personal data in the whole app.

Step 2: the API call

In the API Connector, add a call to your model provider, for example OpenAI's chat endpoint or Anthropic's Messages API. Bubble's manual shows how to import the call from the provider's cURL example. Put the API key in the authentication field or in a parameter marked Private: Bubble keeps private values on its server and never sends them to the browser.

Step 3: send the conversation history

The model doesn't remember earlier messages. As Bubble's OpenAI guide puts it, ChatGPT "requires that you send the history along with every call if you want it to be considered." So each call sends:

1. a system message with the bot's instructions (tone, what it may and may not answer),
2. the last messages of the conversation, in order,
3. the user's new message.

Limit the history to the most recent messages, or to a stored summary of older ones. Sending the full conversation every time makes each answer slower and more expensive as the chat grows.

Step 4: stream the answer

Bubble's API Connector supports streaming natively. Set the call's data type to Stream, turn streaming on in the request (for OpenAI, "stream": true) and set the text field to Push as text stream. Bubble then gives you text so far, which updates as the model writes, full text when it's done, and status values such as is streaming and is done. Show text so far in the chat bubble and save full text as a new Message when the stream finishes.

Step 5: let the bot use the user's data

This is what a widget can't do. Before the call, search for the records the question needs (the user's last orders, their plan, their open tickets) and add them to the system message as context. Bubble's privacy rules still decide which records each user can find, so the bot can only use data that user is allowed to see. Send only the fields the answer needs, not whole records.

Way 3: a chatbot that answers from your documents (RAG)

When the bot must answer from a large help center, PDFs or thousands of records, you can't fit all of it into one prompt. Retrieval-augmented generation (RAG) solves that: the content is split into chunks and indexed as embeddings in a vector database, and for each question only the most relevant chunks are retrieved and sent to the model, with references to where they came from.

Bubble can trigger this, but we usually run the retrieval steps outside Bubble, in n8n or a small backend, and return the answer to the Bubble page. Embedding thousands of chunks with Bubble workflows burns workload units, and dedicated tools handle the indexing better. We explain the approach in RAG development and in our knowledge assistant service.

For a customer support bot that should also hand off to a human, see AI agents for customer support.

Keep the API key and the bill under control

• Never call the AI API from the browser. Use the API Connector with Private fields. A key that reaches front-end code can be copied and used on your account.
• Limit usage per user. Count messages per user per day in your database and stop the workflow above a limit. One script or bored user can otherwise send thousands of requests.
• Cap the answer length with the provider's maximum-tokens setting, and keep the history short (Step 3).
• Pick the model per task. Smaller models are often enough for FAQ-style answers. Save the large models for questions that need them.
• Mind workload units. Each message usually creates records and runs a workflow, which uses Bubble workload units on top of the AI provider's bill. See how Bubble pricing and workload units work.

Bubble's manual has a full page on API Connector security. Read it before you go live.

Mistakes we see most often

1. Calling the API from the page with the key in a client-safe field. It works in testing and leaks the key in production.
2. No privacy rules on Message. Any logged-in user can search other people's chats.
3. Sending the whole history forever. Answers get slower and each message costs more as the conversation grows.
4. Saving the reply before the stream is done. You end up with half-written answers in the database.
5. No instructions on scope. Without a clear system message, a support bot will happily write poems or give legal advice under your brand.
6. No fallback. When the AI provider is slow or down, show a clear message and a way to reach a human instead of an endless spinner.

What a Bubble chatbot costs

Three costs add up:

• The build: a widget is a few minutes of setup. A custom chat (Way 2) or a RAG chatbot (Way 3) is a development project. Its size depends on the data the bot must use and how much the chat window does.
• The AI provider: billed per token by OpenAI, Anthropic or another provider, so it grows with how much your users chat. Check the provider's current pricing page for the model you choose.
• Bubble: workload units for the workflows and records each message creates, within your Bubble plan.

Want a ballpark for your whole app, chatbot included? Try the Bubble.io cost calculator.

Want us to add the chatbot for you?

We add AI chatbots to new and existing Bubble.io apps: the data model, privacy rules, streaming chat, server-side keys and usage limits. More on how we work in AI features for Bubble.io apps.

• A free review of your app and what the chatbot should do, with a written estimate in hours
• Development from $40/hour, built in your development version and deployed to live only after you approve it
• One month of free bug fixing after delivery

Tell us about your app and what the chatbot should answer. We'll tell you which of the three ways fits.

Sources: Bubble manual: Streaming API · Bubble manual: OpenAI chat · Bubble manual: API Connector security. Checked October 27, 2026.

Written by Sergiu Coban

Co-founder and CEO of Webziper. Since 2019 he has led 150+ Bubble.io projects for founders worldwide, from scoping and estimates to launch and support. LinkedIn →