BlogAI / Agents

HTML to Image MCP Servers Compared (2026)

Which MCP screenshot tool is actually free, local, and production-ready?

The short answer: @openkova/mcp is the only local-first, zero-cost option that returns real PNG screenshots as inline MCP image content. Every API-backed alternative requires a paid subscription and sends your HTML through external servers.

Why you'd want an MCP server for screenshots

The Model Context Protocol (MCP) lets AI clients — Claude Desktop, Cursor, Windsurf — discover and call tools at runtime. A screenshot MCP server gives the model eyes: it can look at a live URL, verify a rendered HTML template, or inspect the output of a code change without leaving the conversation. The model receives the image inline and can reason about it directly.

As of 2026, several MCP servers claim to offer screenshot or HTML-to-image capability. They vary significantly in cost, architecture, and what they actually return.

The contenders

1. Pipedream / htmlcsstoimage MCP

Pipedream provides an official MCP server for the htmlcsstoimage.com API. You authenticate via Pipedream OAuth, and each screenshot call goes to htmlcsstoimage's servers, which render it with headless Chromium and return a PNG URL.

The cost stack:

There are two external services involved, each with their own pricing, each adding a network hop, and each holding a copy of your HTML content.

The integration works and the output quality is good — htmlcsstoimage is a mature product. But the two-subscription structure makes it impractical for anything beyond light, occasional use.

2. ScreenshotOne MCP

ScreenshotOne publishes an MCP server that wraps their screenshot API. You authenticate with a ScreenshotOne API key; each call navigates to a URL and returns a screenshot.

Cost: ScreenshotOne plans run $17–259/mo, plus per-screenshot overages above plan limits. The MCP server itself is open-source, but the underlying API is fully proprietary and paid.

ScreenshotOne only accepts URLs — it cannot render HTML snippets or local files. If your model generates an HTML template and wants to screenshot it, you would need to serve that HTML somewhere accessible first.

3. @modelcontextprotocol/server-puppeteer (archived)

This was the official Anthropic-maintained MCP server for browser automation via Puppeteer. It was archived in 2025 and is no longer actively maintained. The repository remains public for reference but should not be used as a dependency in new projects — it will not receive security updates or bug fixes.

At its peak, server-puppeteerwas useful for controlling a local Chromium browser from Claude. Microsoft's @playwright/mcp is now the recommended successor for browser automation.

4. @playwright/mcp (Microsoft)

@playwright/mcp is Microsoft's official Playwright MCP integration, with 33.9k GitHub stars as of 2026. It connects an AI client to a full Playwright browser session and exposes navigation, click, fill, and other interaction tools.

Critical distinction: @playwright/mcp operates primarily via accessibility snapshots rather than pixel screenshots. It extracts the accessibility tree of the page and passes that structured text to the model. This makes it extremely fast and effective for web automation tasks (filling forms, clicking buttons, extracting content), but it does not return PNG images of the rendered page by default.

It does expose a browser_take_screenshottool that captures a real pixel screenshot, but the primary design philosophy is structured accessibility data, not image output. If your use case is visual inspection — "does this HTML look correct?" — @playwright/mcp is not the right tool.

Cost: Free, open-source (Apache 2.0). Requires Playwright and a Chromium/Firefox/WebKit binary.

5. Community tools

Several community-built MCP servers exist for screenshots:

These tools work for simple URL-to-screenshot use cases. None support HTML snippet rendering, file uploads, or depth-based crawling. Maintenance status varies and security updates are not guaranteed.

6. @openkova/mcp

@openkova/mcp is the open-source (MIT), local-first MCP server built on @openkova/core. It runs on your machine — no external API calls, no authentication, no per-screenshot cost.

It exposes three tools:

Screenshots are returned as inline image/png MCP content — the model receives actual image bytes and can analyze the visual output immediately. Because the server runs locally, it can also screenshot private URLs, localhost, and staging environments that external services cannot reach.

Side-by-side comparison

ServerCostLocal / cloudHTML snippetReal PNG outputMaintained
Pipedream / htmlcsstoimagePaid tier required (see pipedream.com)Cloud API✓ (URL returned)
ScreenshotOne MCP$17–259/moCloud API✓ (URL returned)
server-puppeteerFreeLocal✗ Archived
@playwright/mcpFreeLocal∼ accessibility-first✓ (Microsoft)
Community toolsFreeLocal∼ varies
@openkova/mcpFreeLocal✓ inline bytes✓ (MIT)

When to use each tool

Use @playwright/mcp when...

You need the model to interact with a live browser session — filling forms, clicking buttons, navigating multi-step flows. The accessibility-snapshot approach is faster than full pixel screenshots for these automation tasks, and Microsoft's active maintenance means it's well-supported.

Use Pipedream / htmlcsstoimage when...

You already pay for a Pipedream Connect subscription and want to render complex HTML with precise font and layout fidelity via a managed service. The cost is high but the infrastructure is someone else's problem.

Use @openkova/mcp when...

You need real pixel screenshots from the model — to visually verify HTML output, check rendered layouts, screenshot local or staging URLs, or generate OG images. It's the only local-first option that handles HTML snippet rendering natively and returns inline image bytes the model can see directly.

Setup: @openkova/mcp in two minutes

// claude_desktop_config.json  |  .cursor/mcp.json  |  .windsurf/mcp.json
{
  "mcpServers": {
    "openkova": {
      "command": "npx",
      "args": ["-y", "@openkova/mcp"]
    }
  }
}

Restart your AI client. The model will automatically call screenshot_url, screenshot_snippet, or crawl_url when it needs visual context. No API key, no server to manage — just Chrome on your machine.

Frequently asked questions

Which MCP server is best for HTML to image conversion?

@openkova/mcp— it's the only local-first, zero-cost option that renders HTML snippets natively and returns real PNG bytes inline. API-backed options (Pipedream, ScreenshotOne) require paid accounts and send your content to external servers.

What is the difference between @playwright/mcp and @openkova/mcp?

@playwright/mcp is built for browser automation using accessibility snapshots — structured text, not pixels. @openkova/mcp is built for screenshot output — it returns actual PNG images. Use Playwright for automation; use Openkova when the model needs to see the rendered page.

Is @modelcontextprotocol/server-puppeteer still maintained?

No. It was archived in 2025. Do not use it as a dependency — it will not receive security updates. For browser automation, use @playwright/mcp. For HTML-to-image output, use @openkova/mcp.

Does @openkova/mcp require an API key?

No. It runs entirely on your machine using your local Chrome or Chromium binary. No usage fees, no rate limits, no external service.

See the full setup guide: Add a Screenshot Tool to Claude Desktop, Cursor, and Windsurf — or read what Pipedream HTML to Image MCP actually costs.