F
licenseB
qualityNot graded
maintenanceAn MCP server that provides web development tools including taking screenshots of screens, enabling AI agents to capture and analyze visual content during development.
2
19 npm
11
-
webdev-mcp
by fefergrgrgrg
Webentwicklung-MCP
Ein MCP-Server, der nützliche Tools zur Webentwicklung bereitstellt.
Verwendung
Cursor
Um die Installation in einem Projekt durchzuführen, fügen Sie den MCP-Server zu Ihrer
.cursor/mcp.jsonhinzu:
{
"mcpServers": {
"webdev": {
"command": "npx",
"args": ["webdev-mcp"],
}
}
}Um eine globale Installation durchzuführen, fügen Sie diesen Befehl zu Ihren Cursoreinstellungen hinzu:
npx webdev-mcpWindsurf
Fügen Sie den MCP-Server zu Ihrer Datei
~/.codeium/windsurf/mcp_config.jsonhinzu:
{
"mcpServers": {
"webdev": {
"command": "npx",
"args": ["webdev-mcp"]
}
}
}Related MCP server: PuppeteerMCP Server
Werkzeuge
Derzeit sind die einzigen beiden Tools takeScreenshot und listScreens . Ihr Agent kann das Tool „Bildschirme auflisten“ verwenden, um die Bildschirm-ID des Bildschirms abzurufen, von dem er einen Screenshot erstellen möchte.
Das Tool gibt den Screenshot als Base64-codierte Zeichenfolge zurück.
Tipps
Stellen Sie sicher, dass der YOLO-Modus aktiviert und der MCP-Tool-Schutz in Ihren Cursor-Einstellungen deaktiviert ist, um ein optimales Ergebnis zu erzielen. Möglicherweise müssen Sie Cursor erlauben, Ihren Bildschirm unter macOS aufzuzeichnen.
Available Tools
2 toolslistScreensB
List available screens/displays that can be captured
ParametersJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
B3.4/5.0
Behavior2/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It mentions 'available screens/displays that can be captured', which hints at a read-only operation, but doesn't disclose behavioral traits like whether this requires permissions, how the list is formatted, if it's real-time, or any rate limits. This leaves significant gaps for a tool with no annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness5/5
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any wasted words. It's appropriately sized and front-loaded, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness3/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's low complexity (0 parameters, no output schema, no annotations), the description is minimally adequate. It explains what the tool does but lacks details on behavior, output format, or integration with the sibling tool. For a tool with no structured data, more context would be beneficial to fully guide usage.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters4/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has 0 parameters with 100% schema description coverage, so the schema fully documents the absence of inputs. The description doesn't need to add parameter details, and it correctly implies no inputs are required by not mentioning any. This meets the baseline for zero parameters.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose4/5
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('List') and the resource ('available screens/displays that can be captured'), making the purpose immediately understandable. It doesn't explicitly differentiate from the sibling tool 'takeScreenshot', but the distinction is implied through the different verbs (list vs. take).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines3/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context through 'that can be captured', suggesting this tool is for identifying screens before capturing them. However, it doesn't provide explicit guidance on when to use this versus 'takeScreenshot' or any prerequisites, leaving some ambiguity about the relationship between the tools.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
takeScreenshotA
Take a screenshot of a specific screen and return it as a base64 encoded string.
ParametersJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| screenId | No | ID of the screen to capture. Use listScreens to find available screens. Default is 1 (main screen) | |
| timeout | No | Maximum time to wait in milliseconds (default: 0, no timeout) |
TDQS
A3.8/5.0
Behavior3/5
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must disclose all behavioral traits. It states the output is base64 encoded and mentions timeout behavior via the parameter, but does not detail side effects, permissions, or error conditions. It is adequate but minimal.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Conciseness5/5
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence with no fluff, clearly conveying the tool's purpose and output format. It is appropriately concise.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Completeness4/5
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple tool with two optional parameters and no output schema, the description is fairly complete. It explains the main action and output format, though it lacks details on error handling or invalid inputs. Overall, adequate for the tool's complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Parameters3/5
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents the parameters thoroughly. The description adds minimal additional meaning beyond what the schema provides. Baseline is 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Purpose5/5
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action (take a screenshot), the resource (specific screen), and the output format (base64 encoded string). It distinguishes from the sibling tool listScreens, which lists available screens but does not take screenshots.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Usage Guidelines3/5
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description does not explicitly provide when or when not to use this tool. It implies usage for capturing a screenshot, but lacks guidance on alternatives or exclusions. The reference to listScreens is in the parameter description, not the main description.
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
v1.0.0- First observed
listScreens - First observed
takeScreenshot
TDQS
B3.4/5.0
Scored across 2 tools
Disambiguation5/5
The two tools have clearly distinct purposes: listScreens enumerates available displays, while takeScreenshot captures a specific screen. There is no overlap or ambiguity between these functions, making it easy for an agent to select the correct tool based on the task.
Naming Consistency3/5
The naming is mixed: listScreens uses camelCase, while takeScreenshot uses camelCase but with a different verb style (list vs. take). Both are readable, but they lack a consistent pattern like verb_noun or uniform casing, which could cause minor confusion in a larger set.
Tool Count2/5
With only 2 tools, the server feels thin for a web development domain, which typically involves more operations like browser control, DOM manipulation, or network monitoring. This limited scope may restrict agent capabilities and suggests an incomplete tool surface.
Completeness2/5
For a webdev-mcp server, the tools only cover screen listing and screenshot capture, leaving significant gaps in web development workflows such as page navigation, element interaction, or performance testing. The surface is severely incomplete for the implied domain, likely causing agent failures in broader tasks.
Maintenance
ActivityInactive
ResponsivenessNo issues
Related MCP Connectors
- mcpOAuthcom.screenshotink
Screenshot, diff, audit and sitemap-capture any web page — 5 MCP tools for AI agents.
MCP server for building and testing AI agents with multi-model experimentation and insights.
SnapRender gives AI agents eyes on the web through a hosted MCP server. Send a public URL and get the page back as an image, a PDF or clean markdown, with no browser to run or maintain. Capture the viewport or the full page as PNG, JPEG, WebP or PDF, at desktop size or with a phone, tablet or laptop preset, in light or dark mode. Ads and cookie banners are removed by default, and you can hide elements or click one before the capture. extract_content reads the same page as markdown, text, article, links or metadata, so an agent can see a page and read it in one session. Made for monitoring and client work: batch up to 50 URLs in one job, check the cache for free before spending a capture, share signed links that render without an API key, and get webhooks when a batch finishes or a scheduled capture spots a change. Track competitors' pricing and landing pages, or send clients current screenshots of their sites. Connect with OAuth (Google, GitHub or email) or an API key. Works with Claude, ChatGPT, Cursor, VS Code and any MCP client. Free plan: 200 screenshots a month, no credit card. Paid plans from $9 a month for 2,000 up to $199 a month for 200,000. Home: https://snap-render.com Docs: https://snap-render.com/ai-agents
Screenshot and HTML render MCP server for AI agents
Related MCP Servers
- AlicenseBqualityDmaintenanceAn MCP server that enables AI assistants to capture and analyze web page screenshots using Puppeteer, supporting multi-breakpoint captures, error reporting, and page interactions.124 npm6MIT
- AlicenseBqualityBmaintenanceAn MCP server that enables capturing website screenshots with full-page, element-specific, and device-responsive capabilities through natural language commands.318 npm61MIT
- FlicenseBqualityDmaintenanceAn MCP server that enables AI coding tools to control a browser for automated actions, UI extraction, network interception, and screenshots.231-