The AI Agent can edit an app you've already built. Describe the change you want in plain language and it works across your app's design, data, logic, and integrations, then shows you a plan you can approve or cancel before anything changes.You can find our general guide on accessing the AI Agent, prompting and providing context in our main Bubble AI Agent article.
To generate a new app from a prompt instead, see Generate apps with AI.
Switching between the property editor and the AI Agent
The Agent and the property editor share the same panel on the right side of the editor. Switch between them with the Agent and Properties tabs at the top of the panel. The Agent tab is where you chat with the Agent, and the Properties tab shows the element property editor or workflow property editor for whatever you've selected.
You can also jump straight to the property editor from the Agent tab: double-click an element on the canvas, or an action in the Workflow tab, and the panel switches to the Properties tab for it.
Use the Agent and Properties tabs at the top of the panel to switch between chatting with the Agent and editing properties.
Prompting
You can talk to the Agent the same way you'd talk to a knowledgeable colleague working alongside you in your app. Describe what you want to build, ask a question about how something works, or point to a specific problem you're trying to solve.
The Agent understands the structure of your app: pages, views, workflows, data types, and privacy rules. That means you can reference things directly by name, and the Agent will pick them up in context. For example, you can say add a field called "priority" to the Task data type, and the Agent knows exactly which data type you're referring to.
You can also point the Agent at what's already in the editor. If a specific element is selected, the Agent uses that as context. If a workflow is open, it can suggest changes to that workflow. This makes it easy to work iteratively: select something, prompt the Agent, review the result, and continue.
Prompts don't need to follow a specific format. You can:
Ask questions (why isn't this workflow running?)
Give instructions (add a signup form to this page)
Describe outcomes (I want users to see a personalized welcome message after logging in)
Explore ideas (what's the best way to set up notifications for new comments?)
The Agent responds to natural language, so the way you'd naturally describe the task in a conversation is usually the way to prompt it. If you're specific about what you want, you'll get more focused results. If you leave things open-ended, the Agent will make a suggestion and give you a chance to refine it.
Mentioning components
You can point the Agent toward specific components, like an element or a workflow, before sending your prompt:
When you select an element or a workflow in the editor, the Agent knows which one you mean, so you can ask it to change that part of your app without describing where to find it.
Access the AI Agent
Click the AI Agent icon to open up a chat window.
Select the component(s)
Click the element, workflow, or other component to give the Agent additional context. Once selected, it appears as a small tag beneath the prompt input. You can select multiple components to provide more context by holding shift.
Write your prompt and click send
The AI Agent will use the selected component as context as it interprets your prompt.
You can remove the mention by clicking the X on the right side of the tag.
Chatting with the Agent on the canvas
You don't need to open the Agent panel to ask about a specific element. You can chat with the Agent right on the canvas, next to the element you're working on. This is handy when you're working in the element property editor and want a quick change or explanation without switching views.
Select the element
Click the element on the canvas. An Edit with agent button appears below it.
Open the inline chat
Click Edit with agent. A chat box opens on the canvas, next to the element. The Agent already knows which element you mean, so you don't need to describe where it is.
Write your prompt
Type what you want to change, or ask a question about the element, such as what it does. You can also attach an image or use voice prompting from the icons in the chat box. Press Enter or click the send icon to send it. This starts a new conversation thread and opens the AI Agent sidebar.
Voice prompting
You can prompt the Agent by speaking instead of typing. Click the microphone in the chat prompt field and start talking.
To use voice prompting, click the microphone icon in the lower-right corner of the chat window. The transcribed text is editable before you send it.
Your words appear in the prompt field in near real-time as editable text.
Voice input is multilingual — speak in your preferred language.
It works in current versions of Chrome, Brave, Firefox, Safari, and Edge.
The first time you use voice input, your browser asks for microphone permission. Voice input stays unavailable until you allow it. You can always type your prompt instead.
Your audio is used only to produce the transcript and isn't stored. Voice input is for dictating prompts (the Agent replies in text, not speech) and is designed for short prompts rather than long recordings. If transcription is ever unavailable, you can keep working by typing.
Confirming your AI prompt
Before the Agent changes your app, it can present a plan for you to approve or cancel. How often it asks depends on the approval mode you pick from the dropdown at the bottom of the Agent's chat window.
To control how often the AI Agent asks for your approval, use the approval mode dropdown in the bottom-left corner of the Agent's chat window.
Approval mode | How it works |
Ask | The Agent confirms every change before applying it. |
Auto | The Agent decides when to ask for your approval. New chats start in this mode unless you change the default. |
Approve | The Agent applies changes without waiting for your approval. |
When the AI Agent needs your approval, it presents a plan that you can approve or cancel.
When the AI Agent presents a plan, you can approve it, cancel it, or suggest changes before it applies anything. The approval mode dropdown sits in the bottom-left corner of the chat window.
General prompting advice
Keep prompts short and focused — concise requests are easier for the AI to interpret.
Include specific details such as element names, field types, or labels.
Stick to one feature request per prompt for the most precise results.
Use Bubble terminology to describe what to create or edit.
When modifying something, specify both what should change and how.
You can also ask the AI to explain what a change will do before applying it.
Be clear about what not to change
Select the elements or workflows you want the Agent to work with before sending your prompt.
Chat threads
The Agent supports multiple chats. When working on a specific task, like a particular workflow, page, or feature, it can help to keep that work in a single chat so the Agent has the full context of what's been discussed and built.
Starting a new chat
When you want the Agent to work with a fresh context, you can start a new chat by clicking the + symbol in the upper left corner of the chat window.
To start a new conversation, click the + icon in the upper-right corner of the chat window. The Agent starts fresh, without the messages from your previous conversation, which can help when you move on to a different task.
Browse open conversations
When you start a new conversation, the previous one stays open as a tab at the top of the chat window. Click a tab to go back to that conversation, or click X to close it.
Browse closed conversations
If you close a conversation's tab, the conversation isn't deleted. To reopen it, click the three-dot menu in the upper-right corner of the chat window and select it from the list of earlier conversations. You can also start a new conversation from the same menu.
Click the three-dot menu to see your earlier conversations, including ones you've closed, or to start a new one.
What the AI Agent can do
The AI Agent has the following capabilities:
Multiple edits in a single request
Understand and respond in any language
UI creation and modification from prompts and images
Generate images, and find suitable stock images
Generating and modifying reusable elements
Generate and modify data types
Read your app's development database
Write to your app's development database
Generate and modify option sets
Generate and modify custom states
Generate, modify and use global expressions, styles and variables
Dynamic expressions
Generate and modify frontend workflows
Generate and modify backend workflows
Create API calls and collections
Modify API calls and collections
Delete API calls and collections
Work with plugins
App-specific explanations
Issue checker integration
Education and guidance
UI creation and modification
The Agent can create or modify your app's design, including:
Full pages – you can prompt to create a new page
Specific sections like headers, navigation bars, or footers
Individual components such as groups, image elements, text, and buttons
The AI agent can also generate images. See more below.
When generating elements that benefit from images, such as pages, repeating groups, or individual image elements, the Agent also generates the images. Placeholders like sample images in repeating groups are pulled from stock sources such as Unsplash or Picsum, while static assets use AI-generated images.
Example prompt:
Build a landing page for a coffee subscription with a hero image and a 3-column feature section with icons.
You'll get the best results when prompts are specific about what to change and where. You can also upload images to guide the Agent.
When the Agent creates elements, it follows design best practices:
All elements are responsive by default
Layouts are well-organized with logical parent-child relationships
Proper margins and padding are applied
App style variables are respected for consistent design
Uploading images
You can upload images of a desired UI to the Agent and it will replicate them using Bubble elements.
This makes it faster to convert Figma designs into Bubble elements, or use screenshots of other products as inspiration. Note that asking the Agent to insert images into your canvas is not supported.
You can upload up to five images with a prompt, and we currently support JPG, PNG, GIF and WebP.
Example prompt:
Can you build me a login page that is inspired by this screenshot, but customized to my app's styles and design aesthetic?
More examples: UI creation and modification
More examples: UI creation and modification
Add a new page with a form allowing users to upload new products into the database
Add a button labeled "Sign up" to the Home page header.
Insert an input field and a "Submit" button in the Contact page form.
Add a repeating group on the Products page showing each product's name and price.
Set the Signup button's color to Primary.
Create a popup where users can edit their first name, last name, and phone number.
Reusable elements
The Agent can read and write your app's reusable elements. It knows which reusables your app already has, so when your request matches one that already exists, it uses that reusable instead of building a duplicate.
You can prompt the Agent to:
Create a new reusable element from a description
Edit the elements and layout inside an existing reusable
Add an instance of an existing reusable to a page
Explain how a reusable is built and where your app uses it
Example prompt
Create a reusable element for my site header, then add it to the Home and Pricing pages.
Global support
The Agent can work with the definitions that apply across your whole app: global expressions, styles, and style variables. It creates new ones when a request calls for them, and it references the ones you've already defined instead of rebuilding the same value or logic in each place it's used.
Create, modify and use styles
Create, modify and use color variables and font variables
Example prompt
Create a global expression that formats a price with a currency symbol, and use it everywhere I display a price on the products page.
Dynamic expressions
The AI Agent automatically creates or edits dynamic expressions based on your prompt. When you ask it to make a change, it searches your app for the right data sources and operators needed to complete the task. It then summarizes the updates it plans to make so you can review and approve them.
You might have a table which contains a list of all posts written by all users, and you want to show posts written by the current user.
Example prompt:
Can you generate an expression for this table that searches for a list of posts written by the current user?
Note that the table is selected in the editor, and shows up under the chat window. This helps Bubble understand which element you want to add the expression to.
Data type generation and modification
The AI agent can generate new data types and modify existing data types and their accompanying fields.
Create new data types
Say you want to create a new "Note" data type, that allows users to write notes that only they can see and attach it to a post they are working on.
Create a new data type called Note, so users can write notes about the posts they're working on. Each note should have a text field for the note's content and a field that links it to a Post. Set up privacy rules so that only the user who created a note can find it in searches and view its fields.
Modify existing data types
You can also add fields to data types that already exist:
Add a field called Header to the Note data type, with the type text. Users will use it to give each note a short, descriptive title, so they can tell their notes apart and find the one they're looking for.
You can view and edit any generated data types in the [Data tab](/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/data-tab.md) immediately.
Current limitations: This version can't delete data types or field types, or remove fields from existing data types. It cannot modify existing field types (like converting a Salary field to be a number instead of text).
Working with your app's data
The Agent can read and change the actual records in your app's database. It can answer questions about your data, debug data-driven pages, confirm that a change worked, and create, edit, or delete records for you, all without sending you to the [Data tab](/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/data-tab.md).
This makes it easy to find records quickly, check for inconsistencies in the database, and trace how records relate to each other across data types. It's also useful for exploring your schema, testing edge cases with real data, verifying that a workflow produced the results you expected, and setting up or cleaning up test data while you build.
Changes the Agent makes only apply to your development database, so the records in your live app aren't affected.
The AI Agent can currently only access your development database.
Enabling AI Agent database access
The AI Agent's access to the database is off by default. To enable it, go to Settings – AI and turn on Allow AI agent access to App Data. From there, you can enable the specific data types you want the Agent to see.
You can adjust Agent permissions in Settings – AI.
What it can do
Search a data type using filters
The AI Agent can search through your data types using filters such as equals, contains, greater than, less than, in and [...] is empty. It can also sort and page through the results.
Look up a specific record
It can also search for a specific record and return its data.
Return the exact query
The AI Agent can also provide information about how it performed the query, such as the data type, the constraints and filters it used, and how many results came back. This is displayed inline in the chat, so you can see exactly what it looked at.
Create, edit, or delete records
The Agent can also make changes to the records in your development database. You can ask it to add new records, update existing ones, or delete records you no longer need. This is useful for setting up test data, tidying up records while you build, or correcting values without editing each record by hand.
The Agent only works with your development database, so the records in your live app aren't affected.
Be specific about which records you want changed or deleted, especially when a request affects many records at once. When the Agent finishes, check its summary to confirm it changed what you expected.
Examples
Check why data isn't showing as expected
If you're not seeing the data you expected when previewing your app, the AI Agent can help you identify the root cause:
Why is the repeating group on my Dashboard page empty in preview mode?
Verify workflow results
If you're making changes to one or more database records in a workflow, you can ask the AI Agent to confirm the changes:
Can you check the cart total in the last updated shopping cart?
Explain relationships between records
The Agent can trace how data types connect to each other, helping you quickly understand your database structure:
Which data types have a field that references the Order data type?
Create test records
If you need data to test your app with, the Agent can create records for you:
Add 10 sample customers with names, emails, and signup dates.
Update records in bulk
If several records need the same change, the Agent can update them all at once instead of you editing each one by hand:
Set the status of all orders created before June 1 to Archived.
Delete records you no longer need
If your development database has records you want to clear out, the Agent can find and delete them for you:
Delete all users with an email address ending in @example.com.
Test edge cases
The Agent can identify unusual records that might be affecting behavior, such as empty fields, unusually long values, or records missing expected relationships.
Can you find customers that don't have an assigned account manager?
Your data stays protected. Sensitive fields are hidden automatically. Fields matching patterns like tokens, passwords, secrets, and Stripe fields are never shown to the Agent or included in its responses, and owners can mark additional fields to exclude. Your existing privacy rules still apply, so records hidden by a privacy rule stay hidden. Data is read fresh for each request and isn't stored in the conversation.
Current limitations: By design, it reads/writes to the development database only (never your live/production database). It is also limited to owner/admin collaborators, and it can't:
Run aggregations or analytics (such as counts or sums across records)
Query very large tables beyond the standard Data API limits
There's also a limit on how many data lookups the Agent can make in a single conversation. If you reach it, start a new conversation to continue.
Generate and modify option sets
The AI Agent can also create and modify option sets. It can do this as the result of a direct prompt ("Generate an option set for [...]"), or as part of a broader request where the AI Agent determines that an option set is needed. You can view and edit any generated option sets in the [data tab](Understanding the database) immediately.
Generate and modify custom states
The Agent understands your app's custom states, and it can create new ones and change existing ones. Ask it to hold a value on an element or a page and the Agent will create the state and configure the workflows that set and read it.
You can prompt the Agent to:
Create a new custom state on an element or a page, and set up the workflows that assign and read its value
Edit an existing custom state, such as changing what it tracks or how it's set
Example prompt
Add a custom state on the Home page that tracks which tab is selected, and set it when each tab button is clicked.
Generate and modify frontend workflows
You can prompt the AI Agent to generate frontend workflows within your app. Prompt the Agent, then navigate to the Workflow tab to see the workflow it built for you. We recommend starting with simpler prompts for highest accuracy.
Create new workflows
For example, as you're building a login and signup flow, you can click on the login button, then ask the Agent to create a workflow.
Create a workflow that runs when the user clicks the Log In button. It should log the user in using the values from the Email address and Password inputs on this page.
Here's a full list of events that the Agent can create workflows for:
General
User is logged in
User is logged out
Page is loaded
Do every five seconds
Do when condition is true
An unhandled error occurs
Elements
An element is pressed
An input's value is changed
An element has an error running a workflow
With the following actions:
Account actions
Navigation actions
Data/things actions (base actions, not actions installed later)
Emails/Notifications (base actions, not actions installed later)
Element actions
Modify existing workflows
In the example below, we have a page Post, and want to save it to the user's list of favorite posts. Select the action and ask the AI Agent to make the changes.
Select an action in a workflow, and it's attached to your prompt, so the Agent knows which action you want to change.
Generate and modify backend workflows
The Agent can create and edit backend (API) workflows. Prompt the Agent, then open the backend workflows tab to see what it built.
Create backend workflows
You can ask the Agent to:
Create a new backend workflow by name, set up as an API workflow or a scheduled workflow.
Add parameters, each with a name, a type, and whether it's required or optional.
Add common actions — create a thing, make changes to a thing, delete a thing, an API Connector call, and Schedule API Workflow (for a single item or on a list).
Apply Only when conditions to individual actions.
Build recursive workflows that reschedule themselves over a list using an incrementing index.
Run a workflow on a schedule (for example, every Friday) instead of triggering it from an API call.
Modify backend workflows
You can also ask the Agent to explain or edit backend workflows, such as:
Adding or removing actions
Change the properties of the backend workflow
Set up Only when conditions on the workflow or individual actions
Add or change parameters and their settings
Connecting frontend and backend
When the Agent creates a backend workflow, it can also wire up the matching [Schedule API Workflow action](/help-guides/integrations/api/the-bubble-api/the-workflow-api/api-workflows.md) on the frontend so the workflow actually gets triggered. You can also point it at an existing backend workflow (for example, connect this to the Submit button on my Checkout page) and it adds the Schedule API Workflow action with the right parameter bindings.
Troubleshooting
The Agent can inspect an existing backend workflow to help find and fix issues, such as broken references or a misconfigured Only when condition.
Current limitations: the Agent keeps to the same complexity limits as frontend workflows and will decline very complex workflows. The following are not supported:
Custom events
Payment actions, plugin actions, and analytics actions
Creating or managing workflow folders
Running or test-running a workflow for you
Sample prompts
Create a backend API workflow named publish-post with a parameter for post. The workflows should change the published field on the post to yes.
Add a condition to the publish-post API workflow so it only runs if the current user's "admin" is set to yes.
Create a workflow on the Publish post button on the dashboard page, that triggers the publish-post backend workflow. Use the parent group's post as the post parameter.
Create and modify API calls and collections
Creating API collections and calls
The Agent can set up API integrations for you by creating API calls and collections in the [API Connector](/help-guides/integrations/api/the-api-connector.md) from a natural-language description. Describe the request you want to make, including the endpoint, HTTP method, authentication, and any parameters, and the Agent generates the call and imports it into the API Connector.
You can prompt the Agent to:
Create an API collection with a name, notes, and an authentication method, such as a Bearer token, an API key in a header, or Basic auth, along with the properties that method needs.
Create an API call with a specific HTTP method (GET, POST, PUT, PATCH, or DELETE), a URL, query and path parameters, headers, and a request body.
You'll get the best results when your prompt includes specific details, such as the full endpoint URL, the method, the authentication type, and the fields the request should send. Pulling the relevant details from the API provider's documentation helps the Agent configure the call correctly.
When a value should be dynamic, the Agent sets it up using Bubble's parameter syntax (angle brackets, like ) across the URL, headers, and request body, so the call is ready to wire up to your app's data.
Handling secrets
To keep your credentials safe, the Agent never sends API keys, tokens, or other secrets to the AI service, and they aren't written to logs or chat history. If you include a key or token in your message, it's automatically removed before your prompt is processed.
When a call or collection needs a secret value, the Agent inserts a REPLACE ME placeholder instead. Once the Agent finishes, open the call in the API Connector and replace each placeholder with your real value.
The Agent doesn't initialize the calls it creates. After it's finished, open the new API call in the API Connector, replace any REPLACE ME placeholders with real values, and click Initialize call to verify it works before using it in your app.
Select an existing API call or collection before prompting to give the Agent context. It'll use that as a reference when creating the new one.
Example prompts
Create an API collection named "Weather" that authenticates with an API key in a header called "x-api-key"
Create a GET call to https://api.github.com/users/ with an Accept header set to application/vnd.github+json
Set up a PUT call that updates a product at https://api.mystore.com/products/ with a JSON body containing name and price
Add a DELETE call to the Weather collection that removes a saved location by its ID.
Create a collection that authenticates using Basic auth
Modifying existing API collections and calls
The AI Agent can also change or remove API calls and collections you've already set up. Point it at the call or collection you want to change (by selecting it or naming it in your prompt) and describe what should be different.
You can prompt the Agent to:
Edit an existing API call or collection by selecting one or naming it in your prompt and describing the desired change.
Delete an existing API call or collection by selecting the calls and collections you no longer need.
Example prompts
Update my Stripe collection to send the API key in a header instead of a query parameter, and delete the "list refunds" call.
Edit the "create user" call to use POST instead of PUT
Add a page query parameter to the "list products" call so I can request results one page at a time.
Edit the request body on my "create subscription" call to include a plan_id field.
Work with plugins
The Agent now has context of the plugins installed in your app. When you ask it to build something that involves a plugin, it knows which plugins you already have and references them accurately.
It can also search the plugin marketplace and suggest plugins to install when your request needs functionality your app doesn't have yet.
Capabilites
Search for and suggest plugins: Present the Agent with a challenge, and it can search through the plugin store and suggest suitable plugins
Recognize plugins: It knows which plugins you already have installed and uses it as context in responses and tasks.
Install plugins: It can also install the plugin for you.
Uninstall plugins: You can also prompt it to uninstall plugins that are no longer needed.
Example prompt
"How do I add analytics to my app?"
If you have a plugin like Google Analytics installed, the Agent references it; if not, it will suggest you download it from the marketplace.
The Agent can recognize installed plugins and suggest new ones, but it doesn't yet build or configure plugin actions (e.g. payment, analytics, or other plugin-based workflow actions) for you.
App-specific explanations
The AI Agent understands your app's structure and elements, along with general context — such as the page you're viewing or the element you've selected — allowing it to:
Help troubleshoot workflows and dynamic expressions
Answer questions about how elements are configured
Explain how your app is wired together
Selecting an element gives the Agent clear instructions to focus on it in relation to your prompt. The Agent also includes deep-links to UI elements in its explanations, so you can click and see what elements it's referring to.
Ask the Agent what an element does, and it explains how it's set up, including the workflows connected to it. Element and workflow names in the answer are links you can click to find them in your app.
More examples: App-specific explanations
More examples: App-specific explanations
How do custom states work for showing and hiding elements?
What's the difference between frontend and backend workflows?
How do I display data in a repeating group?
How do privacy rules work in my app?
Are there any button missing workflows on this page?
Can you explain all the places a user can navigate to from this page?
Generating images
When generating elements that benefit from images, such as pages, repeating groups, or individual image elements, the AI Agent also generates the images. Placeholders like sample images in repeating groups are pulled from stock sources such as Unsplash or Picsum, while static assets use AI-generated images.
Example prompt:
Generate a hero image showing roasted coffee beans spilling from a paper bag onto a wooden table in warm morning light.
Issue Checker integration
The AI Agent has access to Issue Checker context, allowing it to automatically resolve issues within its current capabilities. At the moment, it has access to the first 100 issues in your app. To fix an issue, prompt the system with a command such as "Fix the first issue for me." The Agent will then attempt to resolve it automatically.
For best results, click on the issue you are trying to solve, and then prompt the Agent to solve it.
Note that only supported issues can be fixed. Issues outside the agent's current capabilities will need to be handled manually.
Education and guidance
Bubble's AI Agent uses Bubble knowledge and documentation to guide you accurately through building, editing, or troubleshooting your app.
When you ask a question, the Agent references official sources — including the Bubble Manual — and responds with citations and helpful links. It can also search the web to surface the most relevant and up-to-date information.
This means its responses are based on trusted Bubble resources, and it can still guide you through solutions, even for tasks it can't perform directly.
Ask the Agent how to do something, and it explains the steps instead of changing your app.
More examples: Education and guidance
More examples: Education and guidance
Show me how to connect an API using the API Connector.
What are the best practices for setting up database privacy rules?
Explain how to structure data for a marketplace app.
How can I optimize backend workflows for performance?
How can I set up user log in with Google?
Sending feedback about the Agent
If the Agent does something unexpected, or you have an idea for how it could work better, you can send feedback to Bubble directly from the chat window.
Open the feedback form
Click the feedback icon at the bottom of the Agent panel.
Describe what happened
In the Comment or suggestion field, describe what you expected the Agent to do and what it did instead, or share your suggestion. The more specific you are, the easier it is for the team to act on it.
Add a screenshot (optional)
Click Upload to attach a screenshot, for example of the Agent's response or the result in your app.
Submit
Click Submit. Your feedback is sent with the email address connected to your Bubble account.
[1]: A reusable piece of logic or a calculation you define once and use anywhere in your app. Instead of rebuilding the same expression in multiple places, you reference the global one, and updating it updates it everywhere it's used. Article: Global expressions
[2]: A saved set of visual properties for an element type (things like padding, borders, and states) that you can apply across your app. Elements sharing a style stay visually consistent, and changing the style updates every element using it. Article: Styles
[3]: Named values for your app's colors and fonts, defined once and referenced throughout your design. Article: Font variables. Article: Color variables
[4]: Frontend workflows are workflows tied to a specific page or view, triggered by events like button clicks, page loads, or input changes. They run in the client and control how your app responds to user actions on that screen. Article: [The frontend and the backend](/help-guides/logic/the-frontend-and-backend.md)