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

# File attachments

> Attach images and files to prompts using the ImageAttachment and FileAttachment tags.

## Overview

Attach images and other files to your prompts for tasks like image analysis or document processing.

## Components

<Warning>
  You must place `<ImageAttachment>` and `<FileAttachment>` inside a `<User>` tag. Placing them inside `<System>` or `<Assistant>` throws `"ImageAttachment and FileAttachment tags must be inside User tag."` at template compile time.
</Warning>

### ImageAttachment

The `<ImageAttachment>` component attaches an image to your prompt:

```jsx theme={null}
<ImageAttachment image={props.imageLink} />
```

Parameters:

* `image` (required): URL to the image file
* `mimeType` (optional): MIME type of the image (for example, `image/jpeg`, `image/png`)

### FileAttachment

The `<FileAttachment>` component attaches any type of file:

```jsx theme={null}
<FileAttachment data="https://example.com/document.pdf" mimeType={props.fileMimeType} />
```

Parameters:

* `data` (required): URL to the file
* `mimeType` (required): MIME type of the file (for example, `application/pdf`, `text/plain`)

## Example

A complete prompt using both attachment types:

```jsx describe-media.prompt.mdx theme={null}
---
name: describe-media
text_config:
  model_name: openai/gpt-5-mini
---

<System>
You are an observer that comments on images and files.
</System>

<User>
  {props.userMessage}
  <ImageAttachment image={props.imageLink} />
  <FileAttachment data="https://example.com/document.pdf" mimeType={props.fileMimeType} />
</User>
```

## Next steps

Attachments render into the prompt's `messages` alongside the surrounding text. See the **SDK usage** section of [Running prompts](/build/running-prompts) (under the **Local** tab) to render the prompt with `prompt.format()` and pass it to your SDK.

<div className="mt-8 rounded-lg bg-blue-50 p-6 dark:bg-blue-900/30">
  <h3 className="font-semibold mb-3">Have questions?</h3>
  <p className="mb-4">Reach out any time:</p>

  <ul>
    <li>
      Email the team at <a href="mailto:hello@agentmark.co" className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200">[hello@agentmark.co](mailto:hello@agentmark.co)</a> for support
    </li>

    <li>
      Schedule an <a href="https://cal.com/ryan-randall/enterprise" className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200">Enterprise Demo</a> to learn about AgentMark's business solutions
    </li>
  </ul>
</div>