AI视觉MCP服务器

模型上下文协议 (MCP) 服务器为 Claude 和其他兼容 MCP 的 AI 助手提供 AI 驱动的视觉分析功能。

特征

• 截图 URL ：通过提供 URL 来捕获任何网站的截图
• 视觉分析：分析屏幕截图中的 UI 元素、布局和内容
• 文件操作：以特定行的精度读取和修改文件
• 报告生成：创建全面的 UI/UX 分析报告
• 调试会话：跨多个分析步骤维护上下文

安装

用法

启动服务器

配置

将服务器添加到您的 MCP 配置：

可用工具

屏幕截图网址

使用网络浏览器截取 URL 的屏幕截图。

参数：

• url (字符串，必需)：要捕获屏幕截图的 URL（例如， http://localhost:4999 ， https://google.com ）
• fullPage （布尔值，可选）：是否捕获整个页面或仅捕获视口。默认值：false
• waitForSelector （字符串，可选）：截屏前等待的 CSS 选择器
• waitTime （数字，可选）：截屏前等待的时间（以毫秒为单位）。默认值：1000

分析屏幕

使用 AI 视觉分析屏幕截图。

参数：无（使用最新的截图）

读取文件

从文件中读取指定行号之间的内容。

参数：

• path （字符串）：文件路径
• startLine （数字）：起始行号（从 1 开始）
• endLine （数字）：结束行号（从 1 开始）

修改文件

修改文件中指定行号之间的内容。

参数：

• path （字符串）：文件路径
• startLine （数字）：要替换的起始行号（从 1 开始）
• endLine （数字）：要替换的结束行号（从 1 开始）
• content （字符串）：替换指定行的新内容

生成报告

生成全面的 UI/UX 分析报告。

参数：

• testUrl （字符串）：被测试应用程序的 URL
• appName （字符串，可选）：正在分析的应用程序的名称
• date （字符串，可选）：分析日期（YYYY-MM-DD）
• observations （对象）：以组件、数据状态、交互等形式构建的观察。

示例工作流程

1. 截取网站截图：
   screenshot_url(url: "https://example.com")
2. 分析一下截图：
   analyze_screen()
3. 根据分析生成报告：
   generate_report(testUrl: "https://example.com", observations: {...})

要求

• Node.js 14+
• 浏览器自动化的 Playwright
• 用于 AI 视觉分析的 Gemini API 密钥

执照

麻省理工学院