Appearance
AI modes
Pick a mode to tell WeWeb AI what you want to do. Each mode focuses the AI on a specific task so you get clearer, more accurate results.
Quick reference
Mode | Best for | Availability |
---|---|---|
Build | creating/updating page design, data bindings, workflows, and formulas | always |
Ask | questions about WeWeb and your selected context | always |
Coded component | generating or editing custom coded components | always |
Supabase | managing tables, functions, and auth in your connected project | always (will require you to connect your Supabase project to interact with Supabase) |
Formula | editing the formula that is open | when formula editor is open |
Workflow | editing the workflow that is open | when workflow editor is open |
The mode selector
Open the Select an AI mode
menu in the chat. Available modes change based on what you’re doing.

TIP
Modes that target a single item, like Formula
and Workflow
, only appear when the relevant editor is open.
Build
Build focuses on your current page. Use it to design layouts, style elements, connect data, and attach or create workflows and formulas. It’s the default choice when you’re building features or updating existing UI.
Try:
"Create a product card with image, title, price, and an add-to-cart button"
"On submission of this form, I want to use my registration workflow"
Ask
Ask answers questions about WeWeb and about the context you provide. Use it when you need clarity before changing anything, or to troubleshoot and learn best practices.
Try:
"How does this workflow handle authentication?" "Explain how collections are used on this page"
TIP
Ask works best with context. Pass the page, element, workflow, or formula you care about to get tailored explanations.
Coded component
Coded component creates or edits custom components. Generate new components from a description, add properties or events, and extend behavior when native elements aren’t enough.
Try:
"Create a dual-range slider with min/max and onChange event" "Add a loading state property to this custom component"
Supabase
Supabase manages your connected backend: create or modify tables, generate functions/APIs, and configure auth and relationships. Requires the Supabase plugin and a connected project.
Try:
"Create a
products
table withname
,price
,description
,category
" "Generate a function to calculate shipping by destination"
Formula
Formula edits the formula that’s currently open. Use it to add conditions and calculations, or to fix errors and improve readability.
Try:
"I want the price calculated to have a discount if the user is logged in" "Handle empty values safely in this formula"
Workflow
Workflow edits the workflow that’s currently open. Add actions, conditions, error handling, or integrate with other workflows. Open the workflow editor first.
Try:
"Add error handling if this workflow fails" "I want to show a confirmation popup at the end of the workflow"
Tips for choosing a mode
- start with
Build
for most page work - switch to
Ask
when you need clarity first - use
Formula
,Workflow
, orCoded component
when you’re focused on one item - use
Supabase
for tables, functions, and auth in your connected project
Examples
Build a new feature
Ask
: "What’s the best way to implement favorites?"Build
: "Add a heart icon that toggles favorites"Supabase
: "Create auser_favorites
table"
Debug a problem
Ask
: "Why doesn’t this button trigger the workflow?"Build
: "Fix the click event so it runs the workflow"
Create custom functionality
Ask
: "Do we have a native image cropper?"Coded component
: "Create an image cropper with drag handles"Build
: "Add it to the profile page"