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. Whether you need help with formulas, workflows, or recreating designs, passing the right context makes AI interactions more efficient and productive.

Adding Context to Your Prompts

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

Frontend Context Types

The AI can accept various types of context from your project:

Context Type	Indicator In Chat	Description
Variables		Data variables and collections
Images		Visual references
Elements		UI elements from your project
Formulas		Formula from your project
Workflows		Workflow from your project
Components		Coded Component from your project

Using Variables And Project Data

1. Click the plus icon ("+") in the chat input area

2. The context binding menu will appear, displaying all available data in your project

3. Select the specific data points you want to include as context

4. Your selected items will appear in the context panel within the chat

When you send your prompt, the AI will focus specifically on the data you've provided, helping it generate more targeted and relevant responses.

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

Backend Context Types

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

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

Best Practices

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

• Combine context types: For complex questions, provide both data and visual context
• Clear unneeded context: Remove context items that are no longer relevant by clicking the "×" next to them
• Start simple: Begin with minimal context and add more if the AI needs additional information

Example Use Cases

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.

Data Manipulation

Select a data collection as context, then ask:

"I want to create status cards bound to this collection and only show items where status is 'active'"

The AI will create a card to show the data and automatically bind the repeating of the card to the filtered collection.

Workflow Optimization

With a workflow open, prompt:

"I want to add the selected item's data to the user's cart"

The AI will analyze your workflow and available variables, and then implement the needed logic.