Passing Context to AI

WeWeb AI can analyze and understand the data of your entire project, but providing specific context helps it focus on particular elements and deliver more precise responses. With the new AI context window, you have granular control over exactly what information gets passed to the AI, making your interactions more efficient and productive.

The AI Context Window

WeWeb AI allows for precise control over what information gets passed to the AI. You can access this by clicking the plus icon ("+") in the chat input area:

Default context behavior

When you don't select anything specific in the context window:

• All page elements are automatically passed as context
• Project Library is always included (to maintain design system consistency)
• Dependencies are not included - only the elements themselves, not their related workflows, variables, or collections

When you select a specific element or section on your page, this takes priority and gets passed instead of all page elements.

Project Library Always Included

The Project Library (design system components, colors, typography, etc.) is always passed as context to maintain consistency across your project. This ensures the AI can build and modify elements using your established design system.

Adding Broad Context

You can enhance your AI prompts by providing specific context from various sources in your project:

Broad context selection

The first tab of the context window provides toggles that let you include entire categories of project data:

Full Project context

Include everything from your project - all popups, workflows, formulas, variables, collections, and more. This is the most comprehensive option when you want the AI to have complete visibility into your project.

When to use: Complex requests that might touch multiple parts of your project, or when you're unsure what context the AI might need.

All Popups

Include all popup components from your project in the context.

When to use: When working with popup-related functionality or when your request involves multiple popups.

All Project Workflows

Include all workflows (project, app, and page-level) from your project.

When to use: When you want the AI to understand existing logic patterns, or when building workflows that should integrate with existing ones.

All Project Formulas

Include all formulas from your project as context.

When to use: When creating new formulas that should follow existing patterns, or when you want the AI to reuse existing formula logic.

Page dependencies

Include all dependencies used on the current page - popups, workflows, formulas, variables, collections, and other resources that the current page relies on.

When to use: When working on page-specific functionality and you want the AI to understand all the resources this page uses.

Selected element dependencies

Include all dependencies used by the currently selected element - any popups, workflows, formulas, variables, or collections that the selected element relies on.

When to use: When modifying a specific element and you want the AI to understand all the resources that element uses.

OVERLOADING CONTEXT

Always be conscious of the estimated context size and try to avoid passing in huge amounts of context.

Not only can too much context reduce the quality of the output, but it could also result in the context window being overloaded and this error being shown:

Adding Granular Context

The additional tabs of the context window allow you to pass in specific pieces of data or logic from your project:

The numbered tabs provide access to specific project resources:

1. Popups - Individual popup components from your project
2. Project Workflows - Project level workflows
3. Project Formulas - Project level formulas
4. Variables - Variables and any context information
5. Collections - Data collections
6. Auth data - Authentication-related data and user information

TIP

You may not see all the tabs shown above in your project. Tabs only appear when you have relevant content for them. For example, if you haven't created any project workflows yet, the project workflows tab won't be visible.

Adding From A Tab

1. Navigate to your desired tab

2. Select the specific data point(s)

3. Your selected item(s) will appear in the context panel within the chat

Adding Images as Context

Images provide powerful visual context for the AI. There are two ways to add images:

Method 1: File Upload

1. Click the image icon in the chat input area
2. Select the file you want to upload from your computer
3. The selected image will appear in the chat

Method 2: Copy and Paste

1. Copy an image from any source (screenshot, file explorer, browser, etc.)
2. Click in the chat input area
3. Paste the image using keyboard shortcut (Ctrl+V or Cmd+V) or right-click and select Paste
4. The pasted image will appear in the chat

Any subsequent prompts will include your image(s) as context

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 And Formulas

When you have a formula window or workflow open:

1. The contents of the open formula window or workflow are automatically passed as context to the AI
2. Any prompts you make while these are open will include them as context

Formula	Workflow

This automatic context passing makes it easier to get help with complex formulas or workflows without having to manually explain what you're working on.

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, make sure you have Coded component mode selected. This mode is specifically designed for generating and editing custom components.

Context Selection Strategies

Understanding when and how to use different context options will help you get the most precise and helpful responses from WeWeb AI.

When to use broad context options

Full Project context: Use this when you're working on complex features that might touch multiple parts of your project, or when you're unsure what context the AI might need. Think of it like giving the AI a complete blueprint of your project.

All Project Workflows: Perfect when you want the AI to build new workflows that integrate with existing workflows, or when you want to reuse existing workflows.

All Project Formulas: Use this when you want the AI to reuse existing formula logic. This helps maintain consistency in how you handle calculations throughout your project.

Page dependencies: Ideal when working on page-specific functionality. This gives the AI context about all the resources your current page uses without overwhelming it with unrelated project data.

Selected element dependencies: Best for focused element modifications. When you select an element and use this option, the AI understands exactly what that element needs to function properly.

When to use specific tabs

Use the individual tabs (Popups, Workflows, Formulas, Variables, Collections, Auth data) when you want to be very specific about what context to provide:

• Popups tab: When working specifically with popup components
• Workflows tab: When you need to reference specific workflows rather than all workflows
• Formulas tab: When working with particular formulas
• Variables tab: When you need specific data context
• Collections tab: When working with particular data collections
• Auth data: When building authentication-related features

Best Practices

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

Do:

• Start with targeted context: Use specific tabs or dependency options rather than full project context when possible
• Combine context types strategically: For complex questions, provide both data and visual context
• Use broad context for integration: When building features that should work with existing logic, include relevant workflows or formulas
• Clear unneeded context: Remove context items that are no longer relevant by clicking the "×" next to them

Don't:

• Over-contextualize simple requests: For basic styling changes, you usually don't need full project context
• Forget about dependencies: When modifying elements that use workflows or formulas, include those dependencies as context

Example Use Cases

Building with existing patterns

Use All Project Workflows context when you want new features to reuse existing workflows:

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

The AI will create the desired product card and set it to use the existing workflow, instead of creating a new one.

Element-specific modifications

Select an element and use Selected element dependencies context:

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

The AI will understand the button's current configuration and its related workflows to add appropriate loading behavior.

Page-level features

Use Page dependencies context when building features for the current page:

"Add a search filter that works with all the data collections used on this page"

The AI will understand all the data sources on your current page and create a unified search experience.

Formula Assistance

Open the formula editor, then ask the AI:

"Please modify this formula to also check if the user is logged in?"

The AI will have context of your current formula and make the appropriate changes.

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 collections
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 you're actively working in formulas or workflows, WeWeb AI automatically includes them as context and shows special indicators in the chat:

Context Type	Indicator In Chat	When You See This
Active Formula		When you have a formula window open - the formula you're viewing will be automatically included as context
Active Workflow		When you have a workflow window open - the workflow you're viewing will be automatically included as context

WARNING

When viewing a formula or workflow, WeWeb AI will always assume you wish to update the formula or workflow you are viewing.

If you wish to edit something outside of the workflow or formula you are viewing, make sure to close it before submitting your prompt.

Mode Requirements

When working with formulas or workflows directly, the AI automatically selects Formula mode or Workflow mode respectively. These modes are specifically designed for editing individual formulas and workflows.

Backend Context Types Visuals

You can also pass backend-related context to the AI to get more specific guidance on data operations:

Context Type	Visual Indicator	Description
Tables		Database tables from your backend
Functions		Functions from your backend
APIs		APIs (Edge Functions) from your backend
Secret Keys		Authentication keys and tokens from your backend

WARNING

For now, the AI is only be able to interact with your backend if you are using Supabase via the native Supabase plugins in the editor. To learn more about how to integrate Supabase in your project, you can refer to the dedicated documentation

Mode Requirement

To work with backend tables, functions, and APIs, make sure you have Supabase mode selected. This mode is specifically designed for managing your connected Supabase backend.

Adding context from your backend all happens from the backend panel:

Passing Tables As Context

1. Click the Tables tab in the backend panel
2. Select the table you want to pass as context
3. The selected table will appear as context in the chat

Passing Functions As Context

1. Click the Functions tab in the backend panel
2. Select the function you want to pass as context
3. The selected function will appear as context in the chat

Passing APIs As Context

1. Click the API tab in the backend panel
2. Select the API you want to pass as context
3. The selected API will appear as context in the chat

Passing Secrets As Context

1. Click the Secrets tab in the backend panel
2. Select the secret you want to pass as context
3. The selected secret will appear as context in the chat