WeWeb AI

WeWeb AI is an intelligent assistant that serves as the focal point of your building process. Through natural conversation, you can create every aspect of your web application - from UI elements to complex workflows, formulas, and even custom-coded components.

How to start prompting

Effective prompting is key to getting the most out of WeWeb AI. To open the panel, click Agents in the top bar, or press Cmd+L on Mac / Ctrl+L on Windows. The panel opens on the left side of the editor.

If this is your first time, choose WeWeb AI from the agent list. You can switch agents anytime from the header dropdown (Switch AI agent).

1. Type your prompt in the chat input at the bottom of the panel.
2. Keep Build selected in the mode menu unless you need a different AI mode. Use Plan when you want to review a build plan before anything is created.
3. Press Enter or click the send button to submit.
4. While the AI works, follow its progress in the chat and in the run summary card at the top of the response. The editor also follows the AI and opens the page, panel, or table it is working on. WeWeb AI may ask you to approve reads or writes, answer scoping questions, or review a plan before building.
5. When generation finishes, review what was created on the page and in the run summary. Use Preview on the summary card or in the top bar to test the result.
6. To keep going, type your next prompt. After a response, the chat input may suggest one: press Tab to use it, then edit or send it.
7. Use New chat from the panel header when you want a fresh conversation, or open History to return to a previous one.

When you create a new project, you may also see a centered prompt on the onboarding screen (What would you like to build?). That prompt sends your first message to the same panel once onboarding completes.

Choosing an agent

The Agents panel supports two ways to work with AI:

WeWeb AI (in the editor)

Choose WeWeb AI to design and build your app visually inside the editor. This is the default option and requires no external setup.

External agents (MCP)

Choose an agent such as Claude, ChatGPT, Cursor, or Antigravity to connect your project to an external AI client over MCP. WeWeb shows a connect guide with the URL, config file, or terminal command you need.

You can switch agents anytime from Switch AI agent in the panel header.

Learn more about connecting external agents →

During a generation

While WeWeb AI works on your request, you may see:

• A run summary card at the top of the response showing live progress (for example pages, workflows, or tables being created). When the run finishes, the card shows Done, Run stopped, or an error state.
• Approval prompts when WeWeb AI needs permission to read or write project data. You can choose Yes, Yes to All, No, or Stop current request.
• Scoping questions when WeWeb AI needs more detail before building. Answer in the card, then confirm to continue.
• A build plan when you use Plan mode. Review the plan in the side panel, then choose Approve & build or Ask for changes. Nothing is built until you approve.
• A Following WeWeb AI banner above the chat input while the editor follows the AI. The editor opens the page, panel, or table WeWeb AI is working on, so you can watch it build. Elements getting a new workflow show a Workflow badge, then Workflow added. To stop following, click the settings icon in the banner and turn Follow WeWeb AI off.

You can stop a generation in progress using the stop button in modes that support it (Build, Plan, Ask, and Edit component).

Crafting effective prompts

When working with WeWeb AI, consider these best practices:

1. Be specific and detailed - The more specific your request, the better the result. Include information about layout, styling, functionality, and data.

2. Provide context - If you have images or data points you want the AI to reference, pass them in as context.

3. Mention design preferences - If you have specific styling preferences, mention them. Otherwise, WeWeb AI will make design choices that align with common patterns.

WeWeb AI settings

Open WeWeb AI Settings from the adjustments icon in the chat input area. The settings in General apply to all users in the project:

• Auto-create CRUD endpoints with Tables: When set to Yes, WeWeb AI creates Create, Get, Update, and Delete endpoints for every new table it creates. Set to No by default
• Custom coded components: When enabled, Build mode can create or edit custom coded components. Set to Yes by default

The settings in Editor and Notifications are saved for you, on your current browser only:

• Follow WeWeb AI: When On, the editor shows what WeWeb AI creates or edits (the page, the panel, or the table it works on). Set to On by default
• Sound when generation is done: Play a sound and show a browser notification when a generation finishes. The sound also plays when WeWeb AI asks you a question or needs you to confirm an action. Set to Off by default
• Notification sound: Once sounds are on, pick the sound to play and set its volume. Selecting a sound plays a preview

AI providers and usage

In the Data & API tab, open the AI panel to manage how AI requests run for backend workflows:

• AI Providers: By default, AI actions run through WeWeb Cloud. You can add your own API keys for OpenAI, Anthropic, or Google Gemini per environment (Editor / Production). Providers →
• AI Usage: Review past AI requests, including model, tokens, and cost. The AI Budget section shows how much of your included AI budget has been used. Usage →

If you or your workspace run out of AI tokens, a message appears above the chat input. On a paid plan, it also tells you when your tokens reset. Click Get more tokens to see your options, such as connecting your own AI agent or upgrading your plan.

Understanding generated workflows

When WeWeb AI creates workflows for your request, it initially generates them with a single Custom JavaScript action that contains all the logic. This approach allows the AI to implement complex functionality quickly.

After the workflow is generated, you can:

1. Use it as-is with the JavaScript implementation
2. Click the Convert to no-code with WeWeb AI button in the workflow editor to have the AI transform the JavaScript into individual no-code actions

What can WeWeb AI do?

TIP

WeWeb AI and WeWeb MCP share the same capabilities: everything WeWeb AI can do in the editor, an external agent can do over MCP. For the full list, see the available MCP tools.

Page building & UI elements

Simply prompt WeWeb AI for what you want on the page, and it will generate a complete UI with interactive elements. The AI automatically:

• Creates responsive layouts with proper styling
• Adds hover states and interactive elements
• Sets up variables and binds them where necessary
• Creates workflows for the functionality you describe

You can iterate on generations by:

• Clicking on specific elements to provide context for changes
• Making general requests without selecting elements for broader changes

For example, you can ask "Add a status filter select to this task list" and the AI will not only create the UI element but also set up the filtering functionality.

Design systems

WeWeb AI can now create and manage design systems to ensure consistency across your projects. The AI can generate:

• Typographies: Create text styles with consistent font families, sizes, weights, and spacing that can be reused across your application
• Colors: Build color palettes with organized naming conventions that can be bound to any design element
• Spacings: Define consistent spacing values for margins, padding, and other layout properties

When you ask WeWeb AI to create designs, it can automatically generate these design system assets and apply them to your elements. For example, you can request "Create a card component with consistent typography and spacing" and the AI will:

1. Generate appropriate typographies for headings and body text
2. Create a cohesive color scheme
3. Define consistent spacing values
4. Apply these design system assets to the component

This ensures that your generated designs maintain visual consistency and can be easily maintained and scaled as your project grows.

Learn more about libraries and design systems →

Formulas and workflows with context

When you have a workflow open, WeWeb AI automatically includes it as context and switches to Edit workflow mode. That gives the AI full context of the workflow structure, available actions, and data in your project.

For formulas, open the formula and click Edit with AI in the binding window. WeWeb AI switches to Edit formula mode and saves its changes directly in the formula.

This enables you to build sophisticated logic through simple conversation.

Learn more about passing context to AI →

Custom component generation

When you need functionality that doesn't exist in WeWeb's native elements, WeWeb AI can generate custom-coded components:

1. In the Agents panel, keep Build mode selected
2. Request a specific component (e.g., "Create a dual range slider component")
3. The AI generates the component with appropriate properties and settings
4. Drag the component onto your page from the chat or from the Coded components menu in the Add Element
5. To change the component's code, add it to context and switch to Edit component mode

Custom components include both styling options and settings, giving you powerful functionality with the simplicity of no-code.

Learn more about generating custom-coded components →

Backend integration

With the Data & API tab, WeWeb AI can work with your backend while you stay in Build mode:

1. Connect your backend (for example, Supabase)
2. Ask AI to create tables, functions, or APIs
3. Create table views linked to your backend data
4. Adjust your UI to work with backend data instead of variables

You can also add table views or other data from the Data tab in the AI context manager when you want the AI to focus on specific backend data.

The AI automatically adapts filtering, search, and other functionality to work with your table views.