Passing Context to AI

WeWeb AI can work with your whole project, but giving it specific context helps it focus on the right elements, data, and logic. The AI context manager lets you choose project items to emphasize in a prompt, while element selection and file attachments add even more precision.

The AI context manager

Open the AI context manager by clicking the + button next to the chat input. The panel title is AI context manager.

Default context behavior

When you do not add items from the context manager:

• WeWeb AI still has access to your project so it can build and answer questions.
• Your project Library is always included so generated UI stays consistent with your design system.
• If you select an element on the page or in the Layout Tree, that element is automatically added as context for your next prompt.

When you add items in the context manager, those selections appear as chips above the chat input. WeWeb AI focuses on them, but it can still reach other project resources when needed.

Project Library always included

The Project Library (design system components, colors, typography, and related assets) is always passed as context. This helps the AI create and update elements using your established design system.

Adding context from the context manager

Use the tabs in the AI context manager to pick specific project resources. Available tabs depend on what exists in your project. For example, the Global Workflows tab only appears after you have project workflows.

Common tabs include:

• Popups — Individual popup components
• Global Workflows — Project-level workflows
• Global Formulas — Project-level formulas
• Page — Variables and data tied to the current page
• Data — Table views, collections, and global context such as the current page, browser, and screen
• Authentication — Auth-related data
• Environment Variables — Environment variables for your project

To edit a coded component's source with AI, use Edit with AI from Add Element → Coded components or from the chat artifact menu — not only the context manager.

TIP

You may not see every tab listed above. Tabs only appear when your project has relevant content for them.

Adding from a tab

1. Click the + button to open the AI context manager.
2. Select the tab that contains the item you want (for example, Data for a table view).
3. Click the item you want to add.
4. The selected item appears as a chip above the chat input. Click the × on a chip to remove it.

OVERLOADING CONTEXT

Be mindful of how much context you attach. Too much context can reduce output quality or hit size limits.

If the context is too large, WeWeb AI shows an error in the chat.

Adding files as context

You can attach images, PDFs, and text files in Build and Ask modes. Edit workflow and Edit formula do not support file attachments. You can attach up to 10 files per message.

Method 1: File upload

1. Click the attachment icon in the chat input area
2. Select the file you want to upload from your computer
3. The file appears as a chip above the chat input

Method 2: Copy and paste

1. Copy an image from any source (screenshot, file explorer, browser, and so on)
2. Click in the chat input area
3. Paste using Ctrl+V or Cmd+V, or right-click and choose Paste
4. The pasted image appears above the chat input

This feature is especially valuable when:

• Recreating designs from visual references
• Asking for UI improvements based on existing layouts
• Troubleshooting visual issues in your application

Adding Elements as Context

There are two ways to pass elements as context:

• Click on the element on the page, or
• Click on the element in the layout tree

This direct element selection is especially helpful when:

• Asking for styling of particular elements
• Attempting to create logic for specific elements

Automatic context from workflows

When you have a workflow open, its contents are automatically passed as context to the AI. Any prompts you make while the workflow editor is open will include that workflow, and WeWeb AI switches to Edit workflow mode.

Workflow

For formulas, Edit formula mode is not available yet. You can still add a formula manually from the context manager, or use Ask to get help understanding it.

Adding Custom Components As Context

Like elements, there are two ways to pass in custom components as context:

• Click on the component on the page, or
• Click on the component in the layout tree

Whenever you pass in a custom component like this, the element will also be passed in like so:

The reason for this is that there may be cases where the AI needs to only modify the current selected properties or styling of the component, and not need to edit the actual code of the component in order to achieve the desired outcome. Because of this, the element is provided to the AI to help provide all needed context.

Passing in a custom component better allows the AI to:

• Update the properties being passed into the component
• Edit the source code of the component if it is deemed the functionality needs to be extended

Mode requirement

To edit custom component code, add the component to context and switch to Edit component mode. To create a new component, use Build mode.

Context selection strategies

Understanding when and how to use different context options helps you get more precise responses from WeWeb AI.

When to add items from the context manager

Add specific workflows, formulas, popups, or table views when you want the AI to reuse or modify existing project logic instead of creating new items from scratch.

Add table views from the Data tab when your prompt depends on specific backend data shapes or fields.

Add coded components before switching to Edit component mode using Edit with AI from the Coded components panel or a chat artifact.

When to select elements on the page

Select an element on the page or in the Layout Tree when your prompt is about that element's layout, styling, or behavior. The selection is added automatically — you do not need to open the context manager.

Combine element selection with context manager items when you want both a specific UI target and related project resources in the same prompt.

Best Practices

To get the most out of context-enhanced AI interactions:

Do:

• Start with targeted context: pick specific items from the context manager instead of adding many unrelated resources
• Combine context types strategically: for complex questions, provide both data and visual references
• Add related workflows or formulas when a feature should reuse existing logic
• Clear unneeded context: remove chips you no longer need by clicking the × next to them

Don't:

• Over-contextualize simple requests: for basic styling changes, selecting the element is usually enough
• Forget related logic: when modifying elements that use workflows or formulas, add those items as context

Example Use Cases

Building with existing patterns

Add a specific workflow from the Global Workflows tab, then prompt:

"Create a new product card with a trash icon that uses the existing deletion workflow"

The AI can create the product card and wire it to the workflow you referenced.

Element-specific modifications

Select an element on the page, then prompt:

"Add a loading state to this button that shows while the form is submitting"

The AI uses the selected element as context for the change.

Page-level features

Add the table views used on the page from the Data tab in the context manager, then prompt:

"Add a search filter that works with all the table views used on this page"

The AI understands the data sources you attached and can build a unified search experience.

Formula assistance

Edit formula mode is not available yet. For now, add a formula from the Global Formulas tab and use Ask:

"How can I update this formula to also check if the user is logged in?"

Design Recreation

Upload an image of a design, then prompt:

"Please recreate this design for me"

The AI will analyze the image and recreate the design on the current page.

Frontend Context Types Visuals

Frontend context types will appear visually as follows:

Context Type	Indicator In Chat	Description
Variables		Data variables and table views
Images		Visual references
Elements		UI elements from your project
Popups		Popup components from your project
Formulas		Formulas from your project
Workflows		Workflows from your project
Components		Coded Component from your project

Automatic context indicators

When a workflow is in context, WeWeb AI shows a workflow indicator in the chat:

Context type	Indicator in chat	When you see this
Active workflow		When you have a workflow open — it is automatically included as context

WARNING

When a workflow is open, WeWeb AI assumes you want to update that workflow. If you want to work on something else, close the workflow editor before submitting your prompt.

Mode requirements

When you open a workflow, WeWeb AI automatically selects Edit workflow mode. For formulas, Edit formula mode is not available yet — use Ask to understand a formula or Build for related changes.

Backend and table view context

In Build mode, WeWeb AI can create and update backend tables, functions, and APIs when your backend is connected. You do not need to pass those items as context for general backend requests.

To focus the AI on specific data, open the AI context manager and use the Data tab to add table views. You can also add environment variables from the Environment Variables tab.

Mode requirement

Use Build mode to create or update backend tables, functions, and APIs. Connect your backend first in the Data & API tab.