What Is MCP (Model Context Protocol)? With a Server

MCP (Model Context Protocol) is an open standard that defines how an AI application discovers and calls external tools and data sources, so one integration, called an MCP server, works in every AI app that supports the protocol.

Anthropic published MCP in November 2024. Before it, every AI app needed its own plugin format, and every tool vendor wrote a separate integration for each app. MCP replaces that with one contract: a server describes its tools, and any compliant host can let a model use them. Browser control is one of its most common uses, which is why this term belongs in the screenshot and rendering glossary.

A plain explanation

Three roles appear in every MCP setup:

• Host. The AI app the person uses, such as a chat app, an IDE or a coding agent.
• Client. The part of the host that holds one connection to one server.
• Server. A program that offers capabilities. It can expose tools (actions the model can call, such as "take a screenshot"), resources (data the host can read) and prompts (reusable templates).

When the host starts, it asks each server for its list of tools with their names, descriptions and input schemas. The model sees that list. When it decides to use a tool, the host sends the call to the server and passes the result, text or an image, back to the model.

How it works technically

MCP messages are JSON-RPC 2.0. A session starts with an initialize exchange in which both sides state their protocol version and capabilities. The host then calls tools/list, and later tools/call with a tool name and arguments. Two standard transports carry the messages:

1. stdio. The host starts the server as a child process and talks over standard input and output. This suits local tools such as a browser on your machine. Because stdout carries the protocol, the server must log to stderr.
2. Streamable HTTP. The server runs as a web service. This suits shared or remote servers and needs authentication.

A tool result is a list of content items, such as text or image with base64 data and a MIME type. That is how a screenshot reaches a vision model.

How to use it with Playwright, Puppeteer and RenderScreenshot

Playwright MCP gives a host a full browser, built on Playwright. Add it to the host's MCP configuration file. Pin the version, because tool names and defaults change between releases.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/[email protected]"]
    }
  }
}

Chrome DevTools MCP comes from the Chrome DevTools team and drives Chrome with Puppeteer. It adds performance traces and console and network inspection.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["[email protected]"]
    }
  }
}

RenderScreenshot. We do not ship an MCP server today. If your host speaks only MCP, wrap the HTTP API in a small server of your own. This one exposes a single screenshot tool, returns the PNG as image content, and reports API errors as tool errors so the model can react.

import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { z } from 'zod';

const server = new McpServer({ name: 'screenshot', version: '0.1.0' });

server.registerTool(
  'screenshot',
  {
    description: 'Capture a web page as a PNG. Use preset og_card for 1200x630 social cards.',
    inputSchema: {
      url: z.string().url(),
      preset: z.enum(['og_card', 'twitter_card', 'full_page', 'mobile', 'desktop_hd']).optional(),
    },
  },
  async ({ url, preset }) => {
    const params = new URLSearchParams({ url, format: 'png' });
    if (preset) params.set('preset', preset);
    const res = await fetch(`https://api.renderscreenshot.com/v1/screenshot?${params}`, {
      headers: { Authorization: `Bearer ${process.env.RS_API_KEY}` },
    });
    if (!res.ok) {
      return { isError: true, content: [{ type: 'text', text: `RenderScreenshot returned HTTP ${res.status}` }] };
    }
    const data = Buffer.from(await res.arrayBuffer()).toString('base64');
    return { content: [{ type: 'image', data, mimeType: 'image/png' }] };
  },
);

await server.connect(new StdioServerTransport()); // stdout now carries JSON-RPC: log to stderr only

Save it as server.mjs, run npm install @modelcontextprotocol/sdk zod, and register it like the servers above, with "command": "node", "args": ["/path/to/server.mjs"] and RS_API_KEY in the env block. The API key stays in the server's environment, not in the model's context.

Tested on 2026-10-15 with Node 22.18, @modelcontextprotocol/sdk 1.32.1 and zod 4.6.7. An SDK client connected over stdio, tools/list returned the screenshot tool with url required, and a call with an invalid key returned the tool error RenderScreenshot returned HTTP 401. The success path, with a valid key, was not run for this page. The two JSON configurations were not run either; the package versions are the latest releases on npm as of 2026-10-15 that are older than two weeks.

Common mistakes

• Printing to stdout in a stdio server. Any console.log corrupts the JSON-RPC stream. Use console.error.
• Huge images. A full-page capture at 2x can be several megabytes of base64 in the model's context. Prefer viewport captures or element captures for agents.
• Vague tool descriptions. The model picks tools by their description. Say what the tool returns and when to use it.
• Too many tools. Each tool's schema costs context on every turn. Expose the few actions the agent needs.

Related terms

• Headless browser: what browser MCP servers run underneath.
• Playwright: the engine behind Playwright MCP.
• Screenshot API: what a thin MCP server like the one above wraps.

For a comparison of browsing servers, see the best MCP servers for web browsing. For tool definitions without MCP, in every major agent framework, see screenshots for AI agents. To try the server above, get a free API key.