Skip to main content

​
Overview

Attach images and other files to your prompts for tasks like image analysis, document processing, or any scenario where the model needs to work with external media.

​
Components

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

​
ImageAttachment

The <ImageAttachment> component attaches an image to your prompt: 
<ImageAttachment image={props.imageLink} />
Parameters:
  • image (required): URL to the image file
  • mimeType (optional): MIME type of the image (e.g., image/jpeg, image/png)

​
FileAttachment

The <FileAttachment> component attaches any type of file: 
<FileAttachment data="https://example.com/document.pdf" mimeType={props.fileMimeType} />
Parameters:
  • data (required): URL to the file
  • mimeType (required): MIME type of the file (e.g., application/pdf, text/plain)

​
Example

A complete prompt using both attachment types:
math.prompt.mdx
---
name: describe-media
text_config:
  model_name: gpt-4o-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>

​
Have Questions?

We’re here to help! Choose the best way to reach us: