Information
AI 视觉 MCP 服务器
一个提供基于 AI 的视觉分析能力的模型上下文协议 (MCP) 服务器，适用于 Claude 和其他兼容 MCP 的 AI 助手。
特性
屏幕截图 URL：通过提供 URL 捕获任何网站的屏幕截图
视觉分析：分析屏幕截图中的 UI 元素、布局和内容
文件操作：以行级精度读取和修改文件
报告生成：创建全面的 UI/UX 分析报告
调试会话：在多个分析步骤中保持上下文
安装
# Clone the repository
git clone https://github.com/samihalawa/mcp-server-ai-vision.git
cd mcp-server-ai-vision
# Install dependencies
npm install
# Build the server
npm run build
使用
启动服务器
npm start
配置
将服务器添加到您的 MCP 配置中：
\{
"servers": \{
"ai-vision": \{
"command": "/path/to/node",
"args": ["/path/to/mcp-server-ai-vision/build/index.js"],
"enabled": true,
"port": 3005,
"environment": \{
"NODE_PATH": "/path/to/node_modules",
"PATH": "/usr/local/bin:/usr/bin:/bin",
"GEMINI_API_KEY": "your-gemini-api-key"
\}
\}
\}
\}
可用工具
screenshot_url
使用 Web 浏览器对 URL 进行屏幕截图。
参数：
url (字符串, 必填): 要捕获屏幕截图的 URL（例如，http://localhost:4999, https://google.com）
fullPage (布尔值, 可选): 是否捕获整个页面或仅视口。默认值: false
waitForSelector (字符串, 可选): 在截屏前等待的 CSS 选择器
waitTime (数字, 可选): 截屏前等待的时间（毫秒）。默认值: 1000
analyze_screen
使用 AI 视觉分析屏幕截图。
参数：无（使用最近的屏幕截图）
read_file
从指定行号之间的文件中读取内容。
参数：
path (字符串): 文件路径
startLine (数字): 开始行号（1 索引）
endLine (数字): 结束行号（1 索引）
modify_file
修改指定行号之间的文件内容。
参数：
path (字符串): 文件路径
startLine (数字): 要替换的开始行号（1 索引）
endLine (数字): 要替换的结束行号（1 索引）
content (字符串): 用于替换指定行的新内容
generate_report
生成全面的 UI/UX 分析报告。
参数：
testUrl (字符串): 被测试的应用程序的 URL
appName (字符串, 可选): 被分析的应用程序的名称
date (字符串, 可选): 分析日期（YYYY-MM-DD）
observations (对象): 以组件、数据状态、交互等形式结构化的观察结果
示例工作流程
对网站进行屏幕截图：
screenshot_url(url: "https://example.com")
分析屏幕截图：
analyze_screen()
根据分析生成报告：
generate_report(testUrl: "https://example.com", observations: \{...\})
要求
Node.js 14+
Playwright 用于浏览器自动化
Gemini API 密钥用于 AI 视觉分析
许可证
MIT