> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Context to LanderLab AI: Files, Screenshots, and Pages

> Give the LanderLab AI Assistant better context. Attach files, take screenshots, and pull content from another landing page to get more accurate results.

The AI Assistant gives better results when it has the right context. Instead of describing everything in words, you can show it files, screenshots, and your other landing pages. This guide explains each option and when to use it.

## Ways to add context

Click **+** in the AI Assistant prompt box to see all options.

| Option                | Best for                                                        |
| --------------------- | --------------------------------------------------------------- |
| **Attach files**      | Product images, logos, brand assets, or reference files.        |
| **Take a screenshot** | Showing the AI a layout issue or a design you want it to match. |
| **Add context**       | Reusing sections, copy, or styles from another landing page.    |

## How to add context from another page

Use **Add context** when you want the AI to reuse something you already built, like a hero section, an offer block, or a winning layout from another lander.

<Steps>
  <Step title="Open the + menu">
    In the AI Assistant prompt box, click **+**.
  </Step>

  <Step title="Hover over Add context">
    A list of your landing pages opens next to the menu.
  </Step>

  <Step title="Find the page">
    Type in **Search pages** or scroll the list. Hover over a page to see a preview card with its thumbnail, publish status, and when it was created and last updated. This helps you confirm you picked the right page.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/7oYUvQRdpj3cDy1e/images/3a222c7c-9581-44c9-be0d-df0614e5819c.png?fit=max&auto=format&n=7oYUvQRdpj3cDy1e&q=85&s=1ecfa0d5fc1252ef9638fa9f721a92d7" alt="The Add context menu in the AI Assistant with the Search pages field, a list of landing pages, and a preview card of the hovered page" width="952" height="525" data-path="images/3a222c7c-9581-44c9-be0d-df0614e5819c.png" />
    </Frame>
  </Step>

  <Step title="Select the page">
    Click the page to add it to your message as context.
  </Step>

  <Step title="Tell the AI what to do with it">
    Write your request and refer to the page you added. For example:

    ```text theme={null}
    Use the hero section and testimonials from the added page on this page. Keep this page's colors and fonts.
    ```
  </Step>
</Steps>

<Tip>
  Say exactly which part of the other page you want. "Copy the FAQ section" works much better than "make it like the other page".
</Tip>

## How to take a screenshot

Take a screenshot to show the AI exactly which part of the page you mean. You can also draw on it to point out the problem.

<Steps>
  <Step title="Click Take a screenshot">
    In the prompt box, click **+**, then **Take a screenshot**. The canvas switches to capture mode.
  </Step>

  <Step title="Select the area">
    Drag to select the part of the page you want to capture. Use the handles to resize it. The selected size is shown in the corner.
  </Step>

  <Step title="Mark it up (optional)">
    Use the toolbar at the bottom to highlight what matters:

    * **Rectangle** to box an area.
    * **Arrow** to point at an element.
    * **Pen** to draw freehand.
    * **Undo** and **Redo** to fix a mistake.
    * **X** to cancel the screenshot.
  </Step>

  <Step title="Click Attach">
    Click **Attach**. The screenshot is added to your message.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/uWHxd5IAWWFP2kM-/images/download-(9).png?fit=max&auto=format&n=uWHxd5IAWWFP2kM-&q=85&s=55dd3c5cd13857b9cac175c2e1bceab5" alt="Screenshot capture mode in the LanderLab editor with a selected area and the markup toolbar with rectangle, arrow, pen, undo, redo, and Attach" width="1922" height="958" data-path="images/download-(9).png" />
    </Frame>
  </Step>

  <Step title="Describe the change">
    Tell the AI what to fix. For example:

    ```text theme={null}
    The pricing cards overlap on mobile. Stack them in one column and add more space between them.
    ```
  </Step>
</Steps>

## How to attach files

<Steps>
  <Step title="Click Attach files">
    In the prompt box, click **+**, then **Attach files**.
  </Step>

  <Step title="Upload your file">
    Pick the file from your computer. It appears in the prompt box.
  </Step>

  <Step title="Explain how to use it">
    Tell the AI where the file goes, for example "Use this image as the hero background" or "Match the colors in this logo".
  </Step>
</Steps>

## Tips for better context

* **Add only what is relevant.** Extra context can distract the AI from the task.
* **Name what matters.** Point to the exact section, element, or detail in the file or page.
* **Mark up your screenshots.** An arrow or a box on the problem area removes any guesswork.
* **Combine options.** A screenshot plus a short instruction is often the fastest way to fix a design issue.

## Related

<CardGroup cols={2}>
  <Card title="Skills" icon="book-open" href="/features/ai/skills">
    Save instructions the AI reuses for recurring tasks.
  </Card>

  <Card title="Optimize with AI" icon="chart-line-up" href="/features/ai/optimize-landing-pages">
    Write prompts that produce higher-converting pages.
  </Card>
</CardGroup>
