Skip to content

Updating visuals

If you see any images containing outdated UI, please bear with us.

We are updating all content as quickly as possible to mirror our new UI.

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

ModeBest forAvailability
Buildcreating or updating your appalways
Askquestions about WeWeb and your selected contextalways
Edit workflowupdating the workflow that is openwhen a workflow is open
Edit componentupdating a custom coded componentwhen a coded component is in context
Edit formulaediting formulascoming soon

The mode selector

Open the Select AI mode menu in the chat input area. Available modes change based on what you're doing.

AI mode selector

TIP

Modes that target a single item are disabled until you have the right context. For example, Edit workflow becomes available when a workflow is open, and Edit component becomes available when you add a coded component to context.

WeWeb AI can also switch modes for you. When you open a workflow, it selects Edit workflow. When you add a coded component to context (without selecting an instance on the page), it selects Edit component.

Build

Build is the default mode for making changes to your app. Use it to design layouts, style elements, connect data, create workflows and formulas, work with your backend, and generate new custom coded components.

Try:

"Create a product card with image, title, price, and an add-to-cart button"

"Create a products table with name, price, and description"

"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. Ask is read-only, so it will not apply changes to your app.

Try:

"How does this workflow handle authentication?" "Explain how table views 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.

Edit workflow

Edit workflow updates the workflow that's currently open. Use it to add actions, conditions, error handling, or connect an existing workflow to new logic. Open the workflow editor first.

This mode does not support file attachments.

Try:

"Add error handling if this workflow fails" "I want to show a confirmation popup at the end of the workflow"

Edit component

Edit component updates a custom coded component that's in your AI context. Use it to add properties, change behavior, or refine styling on an existing component.

To use this mode, use Edit with AI from Add ElementCoded components, from the component code editor, or from a coded component artifact in chat. That adds the component to AI context and switches to Edit component.

If you only select an instance on the page, WeWeb AI stays in Build so it can update that element's properties and styling.

Try:

"Add a loading state property to this component" "Change the default color to match my design system"

Edit formula

Edit formula is shown in the mode selector, but it is not available yet. For now, use Ask to understand a formula, or Build when you want AI to help plan related changes.

Try:

"How can I update this formula to handle empty values?"

Tips for choosing a mode

  • Start with Build for most app changes, including backend tables and APIs
  • Switch to Ask when you need clarity first
  • Use Edit workflow when you have a workflow open and want AI to update it
  • Use Edit component when you want to change the code of an existing custom component
  • Use Ask for read-only explanations before asking Build to make changes

Examples

Build a new feature

  1. Ask: "What's the best way to implement favorites?"
  2. Build: "Add a heart icon that toggles favorites"
  3. Build: "Create a user_favorites table"

Debug a problem

  1. Ask: "Why doesn't this button trigger the workflow?"
  2. Build: "Fix the click event so it runs the workflow"

Create custom functionality

  1. Ask: "Do we have a native image cropper?"
  2. Build: "Create an image cropper with drag handles"
  3. Build: "Add it to the profile page"
  4. Edit component: "Add a reset button that clears the crop selection"