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

# Capturing Images

> LangWatch captures the images your TypeScript application sends to a model and shows them on the trace.

Send the image the way your model provider expects and keep the call inside a trace. There is no upload step and no extra API call: LangWatch reads the image out of the messages at ingestion, stores it, and leaves a reference in its place.

## Send the image with the model call

The examples below use `setupObservability()`. Read [Integration Guide](/docs/integration/typescript/guide) first if you have not set that up yet.

### Vercel AI SDK

Put the image in a `file` part inside the user message. `experimental_telemetry` turns tracing on for the call.

```typescript theme={null}
import { readFileSync } from "node:fs";
import { openai } from "@ai-sdk/openai";
import { generateText } from "ai";
import { setupObservability } from "langwatch/observability/node";

setupObservability({ serviceName: "image-service" });

const data = readFileSync("shapes.png").toString("base64");

const { text } = await generateText({
  model: openai.chat("gpt-5-mini"),
  messages: [
    {
      role: "user",
      content: [
        { type: "text", text: "What does this image show?" },
        { type: "file", data, mediaType: "image/png", filename: "shapes.png" },
      ],
    },
  ],
  experimental_telemetry: { isEnabled: true },
});

console.log(text);
```

### OpenAI SDK

Put the image in an `image_url` part, as a data URL.

```typescript theme={null}
import { readFileSync } from "node:fs";
import OpenAI from "openai";
import { getLangWatchTracer } from "langwatch";
import { setupObservability } from "langwatch/observability/node";

setupObservability({ serviceName: "image-service" });

const tracer = getLangWatchTracer("image-service");
const client = new OpenAI();

const describe = async (prompt: string, path: string): Promise<string> => {
  return await tracer.withActiveSpan("DescribeImage", async (span) => {
    span.setType("llm");

    const encoded = readFileSync(path).toString("base64");
    const completion = await client.chat.completions.create({
      model: "gpt-5-mini",
      messages: [
        {
          role: "user",
          content: [
            { type: "text", text: prompt },
            {
              type: "image_url",
              image_url: { url: `data:image/png;base64,${encoded}` },
            },
          ],
        },
      ],
    });

    return completion.choices[0]?.message.content ?? "";
  });
};

await describe("What does this image show?", "shapes.png");
```

## Image shapes LangWatch understands

Send any of these and the picture is captured. The list covers the shapes the major providers and agent frameworks produce.

| Source                   | Shape                                                                                 |
| ------------------------ | ------------------------------------------------------------------------------------- |
| Vercel AI SDK            | `{ type: "file", mediaType: "image/png", data: "<base64>" }`                          |
| OpenAI                   | `{ type: "image_url", image_url: { url: "data:image/png;base64,..." } }`              |
| OpenAI                   | `{ type: "image_url", image_url: { url: "https://..." } }`                            |
| Anthropic                | `{ type: "image", source: { type: "base64", media_type: "image/png", data: "..." } }` |
| Anthropic                | `{ type: "image", source: { type: "url", url: "https://..." } }`                      |
| Google Gemini and Vertex | `{ inlineData: { mimeType: "image/png", data: "..." } }`                              |
| AG-UI                    | `{ type: "image", source: { type: "data", value: "...", mimeType: "image/png" } }`    |

Always set the media type. Without one, LangWatch leaves the bytes inline in the trace instead of storing them, because it cannot serve them back as a picture.

## What happens to the bytes

LangWatch moves the image out of the span at ingestion. The bytes go into content-addressed object storage and the message part becomes a `/api/files/<projectId>/<id>` reference, around 60 characters where the base64 was.

Storage is addressed by SHA-256, so identical bytes are stored once. For example, the same picture sent on ten traces costs one stored object.

On read, LangWatch serves the original media type for images, audio, video and PDF files. Anything else is served as a download.

## Where the image appears

The trace list draws a thumbnail next to the input preview, so you can spot a run with a picture without opening it.

<Frame caption="Trace list rows showing image thumbnails next to the input text, and a paperclip on the row whose attachment is a document">
  <img src="https://mintcdn.com/langwatch/0_fIM0yG2oBnnIbz/images/integration/multimodal/trace-list-thumbnails.png?fit=max&auto=format&n=0_fIM0yG2oBnnIbz&q=85&s=aa2d61bf7b04af3a479a7cdbd51489b1" alt="LangWatch trace list with image thumbnails on the input previews" width="1600" height="1000" data-path="images/integration/multimodal/trace-list-thumbnails.png" />
</Frame>

Open the trace and the Summary tab shows the picture inline under the question. The Conversation tab shows it in the message it belongs to, and the Trace tab shows the full message payload.

<Frame caption="The trace drawer Summary tab, with the captured picture rendered inline below the input text and the model answer below it">
  <img src="https://mintcdn.com/langwatch/0_fIM0yG2oBnnIbz/images/integration/multimodal/trace-drawer-image.png?fit=max&auto=format&n=0_fIM0yG2oBnnIbz&q=85&s=08b9d32f6d1a2b7eb0fb95144a8b15af" alt="LangWatch trace drawer showing a captured image below the input question" width="1600" height="1000" data-path="images/integration/multimodal/trace-drawer-image.png" />
</Frame>

## Related

* [Capturing Documents](/docs/integration/typescript/tutorials/capturing-documents), for PDF files and other attachments
* [Capturing Audio and Voice](/docs/integration/typescript/tutorials/capturing-audio), for recordings and voice agents
* [Multimodal Evaluation](/docs/evaluations/experiments/multimodal-evaluation), to score image inputs and outputs with a vision model
* [View images in datasets](/docs/datasets/dataset-images), to hold images in a dataset column