How to build AI-powered suggestions in Bubble

You build AI‑powered suggestions in Bubble by calling an external AI API (usually OpenAI or similar) through the API Connector, sending the user’s input as a prompt, and displaying the returned text inside your UI. Bubble itself doesn’t “run AI”, it just sends data to an AI service and shows the response. The core steps are: set up an API call, trigger it from a workflow, pass user text, receive the AI output, and save or display the suggestion.

Core Idea

You collect user input in Bubble, send it to an AI model via the API Connector, and the response becomes your suggestion. This can run in a regular workflow or a backend workflow. You can save results to your database or display them instantly in a group/text element.

• Frontend workflow = fast suggestions (e.g., autocomplete).
• Backend workflow = longer AI tasks, avoids browser limits.
• Privacy rules = ensure only the right users can read stored suggestions.

API Connector Setup

Create a new API and add an action call. Here is a real working example using OpenAI’s responses endpoint:

{
  "model": "gpt-4.1-mini",
  "input": "<your dynamic text>"
}

Headers you must include:

• Content-Type = application/json
• Authorization = Bearer YOUR_OPENAI_KEY

Triggering Suggestions

Attach this call to a workflow such as “When Input value is changed” or a Button click. Use the API call as an Action. The API response becomes available as “Result of step X”. You can place that result inside a text element or save it to a field like “Suggestion text”.

• To show instantly: Bind a text element to “Result of step X’s output”.
• To store: Create a Thing (e.g., Suggestion) with a field “text = Result of step X”.

Useful Tips

• Keep prompts short and clear; Bubble passes them exactly as plain text.
• Use backend workflows if your AI calls can take more than a few seconds.
• Don’t expose your API key in the page; store it privately in the API Connector.