app-screenshot-mcp
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@app-screenshot-mcpCapture a screenshot of https://example.com"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
@0pvalencia/app-screenshot-mcp
MCP Playwright para capturas de UI real.
Cursor / Claude / VS Code
Local (recomendado si clonas el repo)
{
"mcpServers": {
"app-screenshot": {
"command": "node",
"args": ["/ABSOLUTE/PATH/TO/app-screenshot-mcp/dist/cli.js"]
}
}
}Tras clonar: npm install && npm run build.
npx (sin clonar)
{
"mcpServers": {
"app-screenshot": {
"command": "npx",
"args": ["-y", "@0pvalencia/app-screenshot-mcp"]
}
}
}Si abres este repo en Cursor y usas
npx, hace faltanpm install && npm run buildpara que el bin local exista. Sin eso,npxfalla conapp-screenshot-mcp: not foundy el MCP se queda cargando.
Related MCP server: Playwright Server MCP
Install / run
npx -y @0pvalencia/app-screenshot-mcpLocal
npm install
npm run build
npm startTools
capture_url— URL → PNGcapture_with_login— login + selectores → PNG
Tras npm install, ejecuta npx playwright install chromium si hace falta.
app-screenshot: Chromium (npx playwright install chromiumsi hace falta)
License
MIT
Available Tools
2 toolscapture_urlCapturar URLC
Abre una URL y guarda screenshot PNG (viewport configurable).
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | ||
| width | No | ||
| height | No | ||
| waitMs | No | ||
| fullPage | No | ||
| selector | No | Si se indica, screenshot del elemento | |
| outputPath | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are present, so the description carries the full burden. It mentions opening a URL and saving a screenshot but fails to disclose behaviors such as page load waiting, network dependencies, file system writes, error handling, or how the output is returned. This is a minimal behavioral disclosure.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single succinct sentence that is front-loaded with the core action. It avoids fluff, but it is so brief that it sacrifices informative content. Still, it is appropriately structured for quick parsing.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With 7 parameters, no output schema, and no annotations, a one-sentence description is grossly insufficient. It provides no information about return values, side effects, failure modes, or parameter interactions, making it nearly impossible for an agent to invoke correctly beyond the simplest cases.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is only 14%, with only 'selector' having a description. The tool description only adds 'viewport configurable', which covers the width and height parameters indirectly. waitMs, fullPage, selector, and outputPath semantics are not explained in either the schema or the description, leaving major gaps.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool opens a URL and saves a PNG screenshot with a configurable viewport, which is a specific verb+resource+output. However, it does not explicitly differentiate it from the sibling tool 'capture_with_login', relying on the name to imply the difference.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided about when to use this tool versus 'capture_with_login' or any other alternatives. The description does not mention the absence of login handling or any prerequisites, so an agent has no basis for selecting it over the sibling.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
capture_with_loginLogin + capturaA
Rellena usuario/contraseña en selectores CSS, envía el form y captura. Útil para dashboards autenticados.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | ||
| Yes | |||
| width | No | ||
| height | No | ||
| fullPage | No | ||
| password | Yes | ||
| outputPath | No | ||
| emailSelector | No | input[type=email], input[name=email], #email | |
| submitSelector | No | button[type=submit], input[type=submit] | |
| passwordSelector | No | input[type=password], input[name=password], #password | |
| afterLoginUrlIncludes | No |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are present, so the description must carry the full burden. It discloses the main steps (fill selectors, submit form, capture), but it does not mention failure modes, what happens after login, or the output format. This is adequate but not rich.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two concise sentences, front-loaded with action and purpose. Every word earns its place, with no padding or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool has 11 parameters, no output schema, and no annotations. The description barely covers the core workflow and omits crucial context like how to direct output, behavior after login, and customization of selectors. It is incomplete for practical use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, so the description must compensate for parameter meaning. It only generically mentions 'selectores CSS' and does not explain parameters like afterLoginUrlIncludes, width, height, outputPath, or the default selectors. Most of the 11 parameters remain undocumented.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it fills username/password in CSS selectors, submits the form, and captures. This specific verb+resource combination distinguishes it from the sibling 'capture_url' by explicitly mentioning authentication.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It explicitly marks the tool as 'Útil para dashboards autenticados' (useful for authenticated dashboards), providing clear context for when to use it. It does not explicitly name alternatives for non-authenticated cases, but the sibling context implies it, so it stops short of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
2 tool updates
v0.1.1- First observed
capture_url - First observed
capture_with_login
TDQS
Scored across 2 tools
The tools are clearly distinguished by their purpose: one captures a public URL, the other handles form-based authentication before capturing. Though both ultimately produce screenshots, the workflow differs enough to avoid confusion.
Both tool names start with 'capture_' and follow a verb-led pattern. The second name uses a prepositional phrase ('with_login') but it remains readable and consistent in style.
With only two tools, the server feels minimal. This is borderline for a narrow purpose but is not egregiously thin; the two covered scenarios (public and authenticated) justify the count.
The domain is screenshot capture, and the two tools cover basic capture and authenticated capture. However, there are minor gaps such as no support for element screenshots, cookie injection, or alternative rendering options, which agents might need but can work around.
Maintenance
Related MCP Connectors
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
Browserless MCP — wraps the Browserless headless-Chromium REST API (browserless.io)
MCP server for Mint — AI-powered QA that runs your app in a real browser on every PR.
Screenshot, PDF, OG-image, and page extraction (markdown/JSON) over MCP. Bearer key or x402.
Related MCP Servers
- AlicenseBqualityNot gradedmaintenanceA MCP server that provides browser automation tools, allowing users to navigate websites, take screenshots, click elements, fill forms, and execute JavaScript through Playwright.82Apache 2.0
- AlicenseBqualityDmaintenanceA browser automation server providing Playwright capabilities for controlling web browsers, capturing screenshots, extracting content, and performing complex interactions through an MCP interface.6Apache 2.0
- AlicenseNot gradedqualityFmaintenanceA Model Context Protocol (MCP) server for taking screenshots of web pages using Playwright, allowing AI agents to automatically capture and analyze screenshots for UI verification or other tasks.108 npm23AGPL 3.0
- AlicenseNot gradedqualityCmaintenanceMCP server that connects to your browser to capture screenshots, inspect console logs, network requests, and more via Chrome DevTools Protocol.3 npm2MIT