Why Bubble and n8n Work Better Together
Bubble is a powerful platform for building user-facing no-code web apps, with authentication, databases, workflows, and UI all handled visually. What it cannot do is build a true AI agent, one that dynamically selects tools, reasons across multiple steps, queries external services, and chains actions based on intermediate results. That is where n8n excels. Combining the two gives you a capable AI agent workflow paired with a fully controllable user interface, all without writing traditional code.
Building the n8n AI Agent
The n8n setup starts with a Chat Trigger node set to public. This exposes an endpoint that Bubble can call directly, removing the need for any manual triggering inside n8n. The Chat Trigger feeds into an AI Agent node, which is where the intelligence lives.
Two configuration details matter most here. First, the AI Agent benefits significantly from a specific and directive system prompt. Without a clear system prompt that tells the agent exactly which data sources to use, which columns to search, and what format to respond in, the agent will produce inconsistent or incorrect results. The more explicit the prompt, the more reliably the agent performs. Second, the agent's tools configuration connects it to external services. In the tutorial example, the agent is given access to an Airtable base to look up order records, with a search formula that the agent writes dynamically based on the user's question.
Connecting Bubble to the n8n Endpoint
On the Bubble side, the connection is made through the API Connector. You create a new API, give it a name, add Basic Authentication credentials for security, and paste in the n8n webhook URL as the endpoint.
The request body needs two values: chatInput (the user's message) and sessionId (useful if you later add a memory node to n8n for multi-turn conversation tracking). In the API Connector, wrap chatInput in triangle brackets to make it a dynamic field that can be populated at workflow runtime.
Mark the call as an Action, not Data, because you will be triggering it from a button click rather than loading it as page data.
Making the Input JSON Safe
When you wire the API call into a Bubble workflow, the user's message needs the :formatted as JSON safe text modifier applied before it is sent. This wraps the string in quotation marks and escapes any special characters, preventing JSON syntax errors. Leave the quotation marks out of the API Connector body and apply them only through the modifier in the workflow.
This pattern applies to any user-supplied text being sent as part of a JSON body, not just n8n integrations.
Displaying the Response with Custom States
For displaying the agent's reply, the cleanest Bubble approach is a custom state on the page. A custom state stores the response text temporarily without saving it to the database. A text element set to display the custom state value renders the reply as soon as it arrives.
In the workflow, after the API call step, add a Set State action that targets your custom state and pulls the agent's output from the API call result.
What the Combination Unlocks
The value proposition is clear for two types of builders. If you are an n8n power user who needs user-friendly login, multi-user support, and a polished interface around your agent workflows, Bubble handles all of that in hours rather than weeks. If you are a Bubble builder who has been trying to approximate agent-like behaviour with Bubble's workflow editor and hitting its natural limits, n8n provides the multi-step reasoning and tool integration that Bubble was not designed to offer.
The result is a no-code AI agent with a genuinely production-ready interface, authentication, and the ability to scale to real users.