vision-mcp
Provides image understanding capabilities by calling vision models through the OpenAI-compatible API, supporting tasks like image analysis, OCR, error screenshot diagnosis, technical diagram understanding, data visualization analysis, UI-to-code generation, and UI diff checking.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@vision-mcp Compare the UI differences between v1.png and v2.png"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
vision-mcp
图像理解 MCP Server(stdio 形式),对标 z.ai vision-mcp-server,底层经 OpenAI 兼容接口调用视觉模型(支持火山方舟 ARK 等 provider,默认 doubao-seed-2.0-code)。
工具一览
共 7 个图像工具(未实现 video_analysis):
工具 | 说明 |
| 通用图像理解 |
| 截图 OCR,提取代码/终端/文档/普通文本 |
| 分析错误截图,给可操作修复建议 |
| 解读架构图/流程图/UML/ER 图等 |
| 读取图表/仪表盘,提取洞察与趋势 |
| UI 截图转代码/提示词/规格说明/描述 |
| 比较两张 UI 截图差异 |
图片输入统一支持三种形式:本地路径、HTTP(S) URL、data:image/...;base64,... URI。
URL 与本地路径都会先在本地下载/读取并转 base64,以 data URI 内联发送,规避模型后端拉取外网图片超时。
Related MCP server: SiliconFlow-Vision-MCP
配置
通过环境变量配置后端服务:
环境变量 | 说明 | 默认值 |
| OpenAI 兼容服务根地址 |
|
| Bearer 鉴权密钥 | (空) |
| 视觉模型名 |
|
变量名仍沿用
OLLAMA_*以保持向后兼容,实际已不依赖 Ollama 原生接口, 而是走标准 OpenAI/chat/completions。
安装
需 Python ≥ 3.10 与 uv。
cd 识图mcp
uv sync # 安装依赖
uv run vision-mcp --help # 验证可运行客户端配置
Claude Desktop / Cline / Roo Code
{
"mcpServers": {
"vision-mcp": {
"type": "stdio",
"command": "uv",
"args": ["run", "--directory", "/Volumes/samsungssd/code/temp/识图mcp", "vision-mcp"],
"env": {
"OLLAMA_BASE_URL": "https://ark.cn-beijing.volces.com/api/coding/v3",
"OLLAMA_API_KEY": "你的ARK_API_KEY",
"OLLAMA_MODEL": "doubao-seed-2.0-code"
}
}
}
}ZCode
{
"mcpServers": {
"vision-mcp": {
"command": "uv",
"args": ["run", "--directory", "/Volumes/samsungssd/code/temp/识图mcp", "vision-mcp"],
"env": {
"OLLAMA_BASE_URL": "https://ark.cn-beijing.volces.com/api/coding/v3",
"OLLAMA_API_KEY": "你的ARK_API_KEY",
"OLLAMA_MODEL": "doubao-seed-2.0-code"
}
}
}
}提示:
--directory指向本项目的绝对路径,请按实际位置修改。也可用uvx --from /path/to/识图mcp vision-mcp。
使用示例
在客户端对话中直接提到图片路径/URL 即可,例如:
"这张图
demo.png里有什么?" → 触发image_analysis"提取这张终端报错截图的文本" → 触发
extract_text_from_screenshot"对比
v1.png和v2.png两个界面的差异" → 触发ui_diff_check
开发与测试
uv sync
# 直接以 stdio 模式运行(可用 MCP inspector / 客户端连接)
uv run vision-mcpAvailable Tools
7 toolsanalyze_data_visualizationA
读取数据可视化图表(柱状/折线/饼图、仪表盘等),提取洞察与趋势。
Args: image: 图表图片(路径 / URL / base64 URI)。 question: 可选,关注的指标或问题。
Inputs: image (required), question. Returns: result
diagnose_error_screenshotA
分析错误/异常截图,定位问题并给出可操作的修复建议。
Args: image: 错误截图(路径 / URL / base64 URI)。 context: 可选,补充背景,如相关代码、操作步骤、环境信息等。
Inputs: image (required), context. Returns: result
extract_text_from_screenshotA
对截图进行 OCR,提取其中的文本。适用于代码、终端输出、文档、普通文本等。
Args: image: 图片输入(路径 / URL / base64 URI)。 question: 可选,特定提取要求,如"只提取报错堆栈"。
Inputs: image (required), question. Returns: result
image_analysisA
通用图像理解。适用于其他专用工具不匹配的场景。
Args: image: 图片输入,支持本地路径 / HTTP(S) URL / data:image base64 URI。 question: 想了解的内容或问题。
Inputs: image (required), question (required). Returns: result
ui_diff_checkA
比较两张 UI 截图,标记视觉或实现上的差异。
Args: image1: 第一张截图(路径 / URL / base64 URI)。 image2: 第二张截图(路径 / URL / base64 URI)。 question: 可选,关注的具体差异点。
Inputs: image1 (required), image2 (required), question. Returns: result
ui_to_artifactA
将 UI 截图转换为指定产物:代码、提示词、规格说明或描述。
Args: image: UI 截图(路径 / URL / base64 URI)。 target_type: 目标产物类型,可选:code(前端代码)、prompt(复刻用提示词)、 specification(规格说明)、description(文字描述)。 question: 可选,额外要求,如"用 React + Tailwind""响应式"。
Inputs: image (required), target_type (required), question. Returns: result
understand_technical_diagramA
解读技术图表,如架构图、流程图、UML、ER 图、系统设计图等。
Args: image: 图表图片(路径 / URL / base64 URI)。 question: 可选,想了解的具体方面。
Inputs: image (required), question. Returns: result
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
TDQS
Scored across 7 tools
The specialized tools (OCR, error diagnosis, diagrams, data viz, UI conversion, UI diff) have distinct purposes, and the generic image_analysis is explicitly positioned as a fallback. However, understand_technical_diagram and analyze_data_visualization could overlap for certain images, and image_analysis could be used for any task, creating some ambiguity.
Most tools follow a verb_object pattern (extract_text_from_screenshot, diagnose_error_screenshot, understand_technical_diagram, analyze_data_visualization), but image_analysis is noun-based and ui_to_artifact is not verb-first. ui_diff_check is also ambiguous in word order, so the pattern is mixed but still readable.
Seven tools is a well-scoped number for a vision MCP server. It covers a broad range of image analysis tasks without being bloated, and each tool has a clear role.
The tool set covers major vision tasks: generic understanding, OCR, error screenshot diagnosis, technical diagram interpretation, data visualization analysis, UI conversion, and UI diff checking. Minor gaps exist, such as no generic image comparison (only UI-specific) and no image generation/transformation, but these are somewhat outside the core analysis purpose.
Maintenance
Related MCP Connectors
MCP server for Qwen Image 3 AI image generation
MCP server for OpenAI API (chat completions, image generation, embeddings) via AceDataCloud
Screenshots, PDFs, image editing, QR codes, email validation and more through one hosted MCP server.
Hosted MCP server for AI photo editing: nothing to install, no desktop photo editor needed.
Related MCP Servers
- AlicenseAqualityDmaintenanceMCP server for vision AI — screenshots to code, OCR, error diagnosis, and image analysis via OpenAI-compatible APIs.82MIT
- AlicenseNot gradedqualityDmaintenanceAn MCP server that provides 8 vision tools for UI screenshot to code, OCR, error diagnosis, diagram understanding, data visualization analysis, UI diff, and image/video analysis, plus model list query, powered by SiliconFlow's multimodal API.GPL 3.0
- AlicenseNot gradedqualityDmaintenanceAn MCP server for image recognition and OCR via OpenAI-compatible vision APIs, supporting local files, URLs, and data URLs. Enables natural language image description and text extraction.19 npm2MIT
- AlicenseAqualityDmaintenanceAn MCP server that adds visual understanding to text-only LLMs via image understanding, OCR, and image comparison tools, with multi-provider fallback and context-aware Focus Hint for precise descriptions.3MIT