📸 屏幕视图mcp
](https://nodejs.org/)  
一个强大的模型上下文协议(MCP)工具,使人工智能助手能够使用Claude Vision API捕捉和分析屏幕截图。截取屏幕截图,分析屏幕内容,并获得有关桌面界面的AI见解。
✨ 特性
- 📸 即时全屏截图
- 🔍 使用Claude Vision进行AI驱动的场景分析
- 🤖 与MCP兼容的AI助手无缝集成
- 🛠️ 易于配置和设置
- 🔄 支持stdio和SSE传输
🎯 用例
- 捕获并分析桌面截图
- 分析UI元素和布局
- 调试屏幕截图的视觉问题
- 获取有关屏幕内容的AI见解
- 文档界面元素和布局
- 屏幕记录和分析
- 带有视觉反馈的桌面自动化
🚀 快速启动
通过npm安装(推荐)
安装Screen View MCP最可靠的方法是通过npm:
# Install the latest version
npm install -g screen-view-mcp
# To ensure you get the exact latest version and avoid caching issues
npm install -g screen-view-mcp@2.0.15 # Replace with latest version number然后按照下面的“手动配置”部分所示配置您的AI客户端。
手动配置
通过npm安装后,配置你的AI客户端:
用于stdio传输(默认)
克劳德桌面:
- 窗户:
%APPDATA%/Claude/claude_desktop_config.json - MacOS:
~/Library/Application Support/Claude/claude_desktop_config.json
光标:
- 窗户:
%APPDATA%/Cursor/mcp.json或~/.cursor/mcp.json - MacOS:
~/Library/Application Support/Cursor/mcp.json
渐变群:
~/.config/cline/mcp.json
帆板运动:
~/.config/windsurf/mcp.json
{
"mcpServers": {
"screen-view-mcp": {
"command": "npx",
"args": [
"screen-view-mcp@2.0.15" // Specify exact version to avoid caching issues
],
"transport": "stdio",
"env": {
"ANTHROPIC_API_KEY": "your-anthropic-api-key"
}
}
}
}用于SSE运输
对于支持SSE传输或远程连接场景的客户端:
{
"mcpServers": {
"screen-view-mcp": {
"command": "npx",
"args": [
"screen-view-mcp@2.0.15",
"--sse",
"--port", "8080",
"--host", "localhost"
],
"env": {
"ANTHROPIC_API_KEY": "your-anthropic-api-key"
}
}
}
}要连接到远程SSE服务器(在另一台机器上运行):
{
"mcpServers": {
"screen-view-mcp": {
"url": "http://your-server-ip:8080/sse",
"transport": "sse",
"env": {
"ANTHROPIC_API_KEY": "your-anthropic-api-key"
}
}
}
}📝 可用工具
捕获和分析屏幕
捕获并分析当前屏幕内容。
参数:
{
prompt?: string; // Custom prompt for analysis
modelName?: string; // Claude model to use
saveScreenshot?: boolean; // Save screenshot locally
}Claude中的示例用法:
Can you analyze what's on my screen right now and describe the layout?故障排除
常见问题
- 无法访问屏幕截图:确保您的AI客户端具有屏幕截图权限
- API关键错误:验证您的Anthropic API密钥有效并且在配置中设置正确
- 未找到MCP工具:确保该软件包已全局安装(
npm list -g screen-view-mcp) - 软件包版本问题:在配置中指定确切的版本,以避免缓存问题
- 运输问题:确认您正在为客户使用正确的运输方式
- 对于Claude Desktop,使用stdio传输(默认) - 对于支持SSE的客户,您可以使用 --sse 旗帜
运输兼容性
以下是不同客户端支持的传输类型:
| 客户端 | 支持的传输 |
|---|---|
| 克劳德桌面 | stdio |
| 光标 | stdio,SSE |
| 苏格兰证券交易所临床研究所 | |
| Windsurf | 苏格兰和南方共同市场 |
如果您看到连接错误,请确保您为客户端使用了正确的传输配置。
🔧 发展
- 克隆并安装:
git clone https://github.com/yourusername/screen-view-mcp.git
cd screen-view-mcp
npm install- 构建:
npm run build- 本地测试:
# Test with stdio transport (default)
node dist/screen-capture-mcp.js --api-key=your-anthropic-api-key
# Test with SSE transport
node dist/screen-capture-mcp.js --sse --port 8080 --host localhost --api-key=your-anthropic-api-key📜 许可证
麻省理工学院
Smithery部署
此项目配置为在Smithery上部署,这允许通过WebSocket传输承载MCP服务器。
部署要求
- Dockerfile(包含在存储库中)
- smithery.yaml(包含在存储库中)
- Anthropic API密钥(配置过程中需要)
部署步骤
- 将服务器添加到Smithery
- 访问“部署”选项卡
- 使用您的Anthropic API密钥进行配置
- 部署服务器
配置选项
anthropicApiKey(必需):您的Anthropic API密钥verbose(可选):启用详细日志记录(默认值:false)
可用工具
helloWorld:响应消息的简单测试工具captureAndAnalyzeScreen:捕获屏幕截图并使用Claude Vision进行分析
使用示例
捕获和分析屏幕截图
const response = await mcpClient.invoke("captureAndAnalyzeScreen", {
prompt: "What's on my screen right now? Focus on the main content.",
modelName: "claude-3-opus-20240229"
});
console.log(response);