I added a first-party MCP server to my API. Here is what AI coding assistants can now do.

Source: Dev.to

Introduction

Most developers using AI coding assistants have run into a common limitation: the assistant can generate code to take a screenshot, but it cannot actually capture one. This extra back‑and‑forth—running the code, looking at the result, describing it to the assistant—adds unnecessary friction to tasks that should take only a few seconds.

Model Context Protocol (MCP)

Model Context Protocol is an open standard published by Anthropic for connecting AI assistants to external tools. An MCP‑compatible assistant (e.g., Claude Desktop, Cursor, Windsurf) can call tools natively as part of a conversation, without any custom integration on your side. Think of it as USB‑C for AI tools: once an MCP server exists for a capability, any compatible assistant can use it.

PageBolt MCP Server

A first‑party MCP server lets the assistant call PageBolt’s capabilities directly, receive the result, and reason about it in the same context—no copy‑paste, no manual steps.

What the server can do

• Take a screenshot of any URL or rendered HTML
• Generate a PDF
• Create an Open Graph (OG) image
• Record a video of a browser flow
• Run a multi‑step browser sequence (login, navigate, click, capture)
• Inspect a page’s element structure and return CSS selectors

Configuration

Cursor

Add the following to your mcp configuration file:

{
  "mcpServers": {
    "pagebolt": {
      "command": "npx",
      "args": ["-y", "pagebolt-mcp"],
      "env": {
        "PAGEBOLT_API_KEY": "your_api_key_here"
      }
    }
  }
}

Claude Desktop

Place the same snippet in claude_desktop_config.json.

Once configured, the assistant has immediate access to all PageBolt tools—no additional code, endpoints, or auth flows to manage.

Practical Use Cases

Visual QA in conversation

You push a CSS change and ask the assistant, “What does the homepage look like now on an iPhone 14 Pro?”
The assistant calls the screenshot tool with viewportDevice: "iphone_14_pro", receives the image, and describes what it sees. You can iterate without leaving the chat.

Page inspection for debugging

Describe a layout issue; the assistant calls inspect_page on the URL, receives a structured map of elements with CSS selectors, and uses that data to pinpoint the problem—no more guessing selectors like .header-nav > ul > li.

Automated demo content

After generating a landing page, ask the assistant to create an OG image. It calls the OG‑image tool with your title and description and returns the image file, eliminating the need for Figma or manual steps.

Narrated video demos from a PR

A CI step can trigger an AI agent that runs a browser sequence against a staging environment, records a video with step notes and AI‑generated narration, and posts the MP4 as a PR comment. Reviewers watch a 30‑second narrated demo instead of reading a textual description.

CI Step Example

The assistant can generate the following configuration and invoke the record_video tool:

{
  "tool": "record_video",
  "arguments": {
    "steps": [
      { "action": "navigate", "url": "https://staging.yourapp.com", "note": "Landing page" },
      { "action": "click", "selector": "#get-started", "note": "Start the signup flow" },
      { "action": "fill", "selector": "#email", "value": "demo@example.com", "note": "Enter email" },
      { "action": "click", "selector": "#continue", "note": "Proceed to checkout" }
    ],
    "audioGuide": {
      "enabled": true,
      "voice": "nova",
      "script": "Welcome. {{1}} Click Get Started to begin. {{2}} Enter your email. {{3}} Click Continue."
    },
    "frame": { "enabled": true, "style": "macos" },
    "background": { "enabled": true, "type": "gradient", "gradient": "ocean" }
  }
}

The assistant sends this payload to the MCP server, receives an MP4 with browser chrome, a gradient background, an animated cursor, and AI voice narration.

Reflections

I built the MCP server because I kept manually calling the PageBolt API from within Cursor. The server removes that friction. Whether others find it as useful as I do remains to be seen; some may prefer the raw HTTP API for automation pipelines, while others will appreciate the lower‑friction integration inside AI coding assistants. Both approaches are valid.

Getting Started

• Free tier: PageBolt offers 100 requests per month; the MCP server works on any tier.
• Setup time: About two minutes if you already have Cursor or Claude Desktop configured.

The MCP specification is available at modelcontextprotocol.io for those interested in the underlying mechanics. The ecosystem is growing quickly, and MCP is becoming a standard way for AI tools to connect to the world.

If you configure the server and discover interesting uses, I’d love to hear about them.