webdev-mcp
웹 개발-MCP
유용한 웹 개발 도구를 제공하는 MCP 서버입니다.
용법
커서
프로젝트에 설치하려면
.cursor/mcp.json에 MCP 서버를 추가하세요.
지엑스피1
글로벌하게 설치하려면 커서 설정에 다음 명령을 추가하세요.
npx webdev-mcp윈드서핑
~/.codeium/windsurf/mcp_config.json파일에 MCP 서버를 추가합니다.
{
"mcpServers": {
"webdev": {
"command": "npx",
"args": ["webdev-mcp"]
}
}
}Related MCP server: PuppeteerMCP Server
도구
현재 사용할 수 있는 도구는 takeScreenshot 과 listScreens 두 가지뿐입니다. 에이전트는 listscreens 도구를 사용하여 스크린샷을 찍고 싶은 화면의 화면 ID를 가져올 수 있습니다.
이 도구는 스크린샷을 base64로 인코딩된 문자열로 반환합니다.

팁
최상의 환경을 위해 커서 설정에서 YOLO 모드가 켜져 있고 MCP 도구 보호가 꺼져 있는지 확인하세요. MacOS에서는 커서가 화면을 녹화하도록 허용해야 할 수도 있습니다.
Available Tools
2 toolslistScreensB
List available screens/displays that can be captured
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
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.
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.
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.
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.
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.
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.
| 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
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.
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.
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.
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.
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.
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
Scored across 2 tools
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.
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.
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.
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
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
- FlicenseBqualityNot gradedmaintenanceAn MCP server that provides web development tools including taking screenshots of screens, enabling AI agents to capture and analyze visual content during development.219 npm11-
- 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-