Skip to main content

​
Minimal request

{
  "model": "claude-sonnet-4-20250514",
  "max_tokens": 1024,
  "messages": [
    {
      "role": "user",
      "content": [
        {
          "type": "image",
          "source": {
            "type": "url",
            "url": "https://example.com/ui.png"
          }
        },
        { "type": "text", "text": "Describe the UI structure in this screenshot." }
      ]
    }
  ]
}

​
cURL example

curl https://api.anthropic.com/v1/messages \
  -H "x-api-key: $ANTHROPIC_API_KEY" \
  -H "anthropic-version: 2023-06-01" \
  -H "content-type: application/json" \
  -d '{
    "model": "claude-sonnet-4-20250514",
    "max_tokens": 1024,
    "messages": [
      {
        "role": "user",
        "content": [
          {
            "type": "image",
            "source": {
              "type": "url",
              "url": "https://example.com/ui.png"
            }
          },
          { "type": "text", "text": "Describe the UI structure in this screenshot." }
        ]
      }
    ]
  }'

​
Python example

from anthropic import Anthropic

client = Anthropic(api_key="<ANTHROPIC_API_KEY>")

response = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {
                        "type": "url",
                        "url": "https://example.com/ui.png",
                    },
                },
                {"type": "text", "text": "Describe the UI structure in this screenshot."},
            ],
        }
    ],
)

print(response.content[0].text)

​
Node.js example

import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

const response = await client.messages.create({
  model: "claude-sonnet-4-20250514",
  max_tokens: 1024,
  messages: [
    {
      role: "user",
      content: [
        {
          type: "image",
          source: {
            type: "url",
            url: "https://example.com/ui.png"
          }
        },
        { type: "text", text: "Describe the UI structure in this screenshot." }
      ]
    }
  ]
});

console.log(response.content[0].text);

​
Best practices

  • Put the image block before the instruction in most vision prompts
  • Use Files API for large or repeated inputs
  • Claude works especially well for OCR, UI understanding, and moderation-style vision tasks