Integrations/AI Tool Use
🔧

AI Tool Use + ScreenshotDEV

OpenAI, Gemini, Llama, Mistral & more

Define ScreenshotDEV as a function/tool for any LLM that supports function calling. Works with OpenAI, Google Gemini, Meta Llama, Mistral, and any model with tool use support. One simple HTTP call — no SDK needed.

Get free API key →API docs
ClaudeOpenClawAI Tool UseMCP

Key features

  • ✓Works with any LLM that supports function calling
  • ✓Simple tool definition — one function, three parameters
  • ✓Standard REST API — no SDK or auth library needed
  • ✓JSON response designed for LLM reasoning
  • ✓Supports OpenAI, Gemini, Llama, Mistral formats
  • ✓Use with LangChain, Vercel AI SDK, or raw API calls
Step by step

How to set it up

Install, configure, and start capturing.

1

Define the tool schema

Define a screenshot function/tool in your LLM's format. The schema is simple — just a URL and optional parameters.

{
  "name": "screenshot",
  "description": "Capture a screenshot of a website",
  "parameters": {
    "type": "object",
    "properties": {
      "url": {
        "type": "string",
        "description": "The URL to capture"
      },
      "full_page": {
        "type": "boolean",
        "description": "Capture the full page"
      },
      "dark_mode": {
        "type": "boolean",
        "description": "Render in dark mode"
      }
    },
    "required": ["url"]
  }
}
2

Implement the function

When the model calls the tool, make a GET request to the ScreenshotDEV API and return the JSON response.

async function screenshot({ url, ...opts }) {
  const params = new URLSearchParams({
    url,
    access_key: process.env.SSDEV_KEY,
    format: "webp",
    ...opts
  });

  const res = await fetch(
    `https://api.screenshotdev.com/v1/screenshot?${params}`
  );

  return res.json();
}
3

Register with your LLM

Add the tool to your model's tool list. When the model decides a screenshot is needed, it will call your function.

// OpenAI example
const response = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [...],
  tools: [{
    type: "function",
    function: screenshotTool
  }]
});
4

Handle the tool call

When the model returns a tool call, execute the function and feed the result back for the model to reason about.

// When model calls the tool:
const toolCall = response.choices[0].message.tool_calls[0];
const args = JSON.parse(toolCall.function.arguments);
const result = await screenshot(args);

// Feed result back to the model
messages.push({
  role: "tool",
  tool_call_id: toolCall.id,
  content: JSON.stringify(result)
});
Full example

Complete tool use example (OpenAI)

import OpenAI from "openai";

const openai = new OpenAI();

// 1. Define the tool
const tools = [{
  type: "function",
  function: {
    name: "screenshot",
    description: "Capture a website screenshot",
    parameters: {
      type: "object",
      properties: {
        url: { type: "string" },
        full_page: { type: "boolean" },
        dark_mode: { type: "boolean" },
        block_ads: { type: "boolean" }
      },
      required: ["url"]
    }
  }
}];

// 2. Implement it
async function screenshot({ url, ...opts }) {
  const params = new URLSearchParams({
    url,
    access_key: process.env.SSDEV_KEY,
    format: "webp",
    ...Object.fromEntries(
      Object.entries(opts).map(([k, v]) => [k, String(v)])
    )
  });
  const res = await fetch(
    `https://api.screenshotdev.com/v1/screenshot?${params}`
  );
  return res.json();
}

// 3. Let the model use it
const response = await openai.chat.completions.create({
  model: "gpt-4o",
  messages: [
    { role: "user", content: "Screenshot acme.com/pricing" }
  ],
  tools
});

// → Model returns:
// tool_calls: [{ function: {
//   name: "screenshot",
//   arguments: '{"url":"https://acme.com/pricing"}'
// }}]

Pro tip: Add a 'usage' tool as well so the model can check remaining quota before making requests. This prevents rate limit errors in autonomous workflows.

Start with 100 free API calls →

No credit card required

Use cases

What people build with AI Tool Use

AI web research agents

Give your agent the ability to visually browse the web. Capture pages and let the model analyze layouts, content, and design.

Visual QA bots

Build a chatbot that screenshots your app on demand, compares against expected layouts, and reports issues.

Customer support context

When a support ticket mentions a page, the AI captures a screenshot to understand what the customer sees.

Content generation pipelines

AI captures competitor pages, analyzes their messaging, and generates comparison content or blog posts.

FAQ

AI Tool Use + ScreenshotDEV — Common questions

Which LLMs support tool/function calling?
OpenAI GPT-4o, Google Gemini, Meta Llama 3, Mistral Large, Anthropic Claude, and most modern models support function calling in various formats.
Do I need the ScreenshotDEV SDK?
No. It's a simple GET request. Any HTTP client works. The SDK is available for TypeScript if you want typed responses and auto-retry.
Can the model see the actual screenshot?
If the model is multimodal (GPT-4o, Gemini, Claude), you can download the screenshot and pass it as an image. Otherwise, the JSON metadata (URL, dimensions) is returned.
How do I handle errors in tool calls?
Return error details as JSON in the tool response. The model can then decide to retry with different parameters or inform the user.

AI Tool Use + screenshots.
Ready in minutes.

100 free API calls per month. No credit card. No complex setup.

Get free API key →
AI Tool Use Integration — ScreenshotDEV