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 AI chat, click the AI chat button in the top bar, or press Cmd+L on Mac / Ctrl+L on Windows. The AI chat panel opens on the left side of the editor, where you can start a conversation.

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.
3. Press Enter or click the send button to submit.
4. While the AI works, follow its progress in the chat. It may create variables, workflows, and other project items as it builds.
5. When generation finishes, review what was created on the page and in the chat summary.
6. Use Preview in the top bar to test interactions and workflows.
7. Start a 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 AI chat panel once onboarding completes.

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.

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 AI chat, 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.