MCPInstall
a-simple-mcp logo

a-simple-mcp

by XingMXTeam XingMXTeam/a-simple-mcp

a simple cursor mcp

View on GitHub
READMEmain

MCP Screenshot Inverter

A small Model Context Protocol experiment that lets an LLM call browser tooling to capture and transform webpage screenshots.

This project demonstrates how an LLM can interact with a local browser automation tool through MCP. The current example uses Puppeteer to open a webpage, capture a screenshot, invert its colors, and save both the original and transformed outputs.

Why this matters

MCP is useful because it turns external tools into callable capabilities for an AI assistant. Instead of asking the model to imagine what a webpage looks like, this project lets the model call a browser tool, inspect a real webpage, and produce an artifact.

This is a small experiment, but the pattern can be extended to:

  • Visual regression checks
  • Website QA automation
  • Design review workflows
  • Screenshot-based content generation
  • AI-assisted browser operations

Workflow

User request
  -> LLM session
  -> MCP tool call
  -> Puppeteer server
  -> Browser screenshot
  -> Color transformation
  -> Saved artifacts

Features

  • MCP server integration
  • Puppeteer-based webpage capture
  • Dockerized browser execution
  • Screenshot color inversion demo
  • Original and transformed image outputs

Requirements

  • Node.js 18+
  • Docker
  • Google Gemini API key or compatible model configuration

Installation

npm install

Create a .env file and add the required model provider key.

Build the Puppeteer Docker image:

docker build -t mcp/puppeteer -f src/puppeteer/Dockerfile .

Usage

Update the target webpage URL in index.js, then run:

npm start

To debug the MCP server:

npx @modelcontextprotocol/inspector node mcp_server.js

How it works

  1. The program creates an LLM session.
  2. The LLM calls the Puppeteer tool through MCP.
  3. Puppeteer opens the target webpage in a Dockerized browser environment.
  4. The browser captures a screenshot.
  5. A JavaScript transformation inverts the screenshot colors.
  6. The project saves both the original and transformed screenshots.

Project status

This is a learning-oriented MCP experiment. It is intentionally small and focused on one concrete browser-tooling use case.

Related