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.

WARNING

WeWeb AI is currently in beta. While it significantly accelerates development, you may encounter occasional limitations or behaviors that need refinement. Our team is actively working to improve the AI's capabilities, enhance its understanding of complex requirements, and expand its feature set. We recommend testing AI-generated elements thoroughly and welcome your feedback to help us enhance the platform.

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. 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. 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.

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 gear icon in the chat input area. These settings apply to all users in the project:

• Allow AI to edit Library: Controls whether Build mode can update your project library (Full, Creation, or None)
• Auto-create CRUD endpoints with Tables: When enabled, WeWeb AI can create matching backend endpoints when it creates tables
• Custom coded components: When enabled, Build mode can create or edit custom coded components
• Sound when generation is done: Play a sound or browser notification when a run completes

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).
• 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.

If your workspace runs out of AI tokens, WeWeb shows an upgrade prompt with a link to manage 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?

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, add the formula as context from the context manager, or use Ask to get help. Edit formula mode is coming soon.

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.