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

# Adding context

> Target elements, tag APIs, and upload files to focus your prompts

The more context you can provide Clark on where / what to build, the better. For example, to iterate on a specific feature after an initial generation, you can **target** or **tag** the relevant components so Clark knows exactly what parts of the application to focus on (e.g., sidebar, specific div, backend API). Similarly, in addition to prompting with text alone, **uploading files** (e.g. screenshots, CSVs) is an effective way to provide Clark with more information on the  requirements at any point in a chat.

## Targeting frontend elements

To focus Clark on any specific parts of the UI, select the **Target** icon in the chat or use keyboard shortcuts (hold `⌘` on Mac or `Ctrl` on PC).

<div style={{ width: '80%' }}>
  <img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/targeting_prompt.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=a1cf61da92d046c0d1a29bcdf24211c2" alt="Enter target mode with Clark" width="1118" height="430" data-path="images/building-with-clark/targeting_prompt.png" />
</div>

After entering target mode, select any element on the canvas to add it to the chat context before submitting a new prompt. Targeted elements are highlighted in purple and added to the chat context.

<img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/targeting_components.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=a0382b516b286a1ab6b5d72a58f37e8b" alt="Selecting components in target mode" width="3516" height="1886" data-path="images/building-with-clark/targeting_components.png" />

## Tagging backend APIs

Similar to integrations, you can focus Clark on specific APIs by @mentioning them in chat.

<img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/tag_api_chat.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=76b021c74480b8623f535f37d27cf0a7" alt="Tag API in chat with @" style={{width: '60%'}} width="2116" height="1136" data-path="images/building-with-clark/tag_api_chat.png" />

## Uploading files

To add more detail to your prompts, upload files like images, JSON, CSVs, and more. For example, include a screenshot or wireframe to convey layout, hierarchy, and component states.

<div style={{ width: '80%' }}>
  <img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/upload_files.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=5ee40d93a4df05d932784a5ec17bd8a4" alt="Attach files in chat" width="2206" height="968" data-path="images/building-with-clark/upload_files.png" />
</div>
