vision-mcp
Provides image and video analysis tools using OpenAI-compatible vision endpoints, enabling tasks like OCR, UI-to-code, error diagnosis, and diagram understanding with models such as GPT-4o.
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-mcpConvert this screenshot into frontend code"
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
An MCP (Model Context Protocol) server that gives Claude and other MCP clients vision: screenshot → UI code, OCR, error-diagnosis, diagram analysis, data-viz insights, UI diff checks, and video analysis.
Vendored from @z_ai/mcp-server by Z.AI (Apache-2.0) and extended to be provider-agnostic — point it at any OpenAI-compatible vision endpoint with base URL + model + API key.
Status
Working. All 8 tools verified booting over MCP stdio (see build/).
Version 0.1.4 (upstream).
Related MCP server: Screen Vision MCP Server
What it does
Eight tools cover image and video analysis:
Tool | What it does |
| Convert UI screenshots into frontend code, AI prompts, design specs |
| OCR: code, terminal output, logs, docs from screenshots |
| Analyze error messages/stack traces, suggest fixes |
| Explain architecture, flowchart, UML, ER diagrams |
| Insights from charts and graphs |
| Visual regression: expected vs actual UI |
| General-purpose image analysis (fallback) |
| Video content analysis (URL or local file; local file ≤8MB, ZAI/Zhipu only) |
Install
Requires Node.js 18+.
Easiest — no clone, no npm publish. npx runs the server straight
from the GitHub repo (cached after the first run):
npx -y github:nikkoxgonzales/vision-mcpOr clone and install locally:
git clone https://github.com/nikkoxgonzales/vision-mcp.git
cd vision-mcp
npm installUsage
Three environment variables configure the server. AI_API_KEY is
required; AI_BASE_URL and AI_VISION_MODEL select the provider and
model.
Variable | Required | Description |
| Yes | API key for the provider |
| No | OpenAI-compatible base URL (e.g. |
| No | Vision model name (default: |
Convenience presets via AI_MODE (or PLATFORM_MODE) fill in
AI_BASE_URL when it isn't set: ZAI → https://api.z.ai/api/paas/v4/,
ZHIPU (default) → https://open.bigmodel.cn/api/paas/v4/. An explicit
AI_BASE_URL always wins.
Legacy aliases
Z_AI_API_KEY,Z_AI_BASE_URL,Z_AI_VISION_MODEL,Z_AI_MODE,ZAI_API_KEYandZ_AI_*tunables are still accepted;AI_*takes precedence when both are set.
Size limits: local images ≤5MB, local videos ≤8MB (URLs are passed
through unchecked). AI_VISION_MODEL_MAX_TOKENS defaults to omitted —
the provider's own output cap applies; set it explicitly to cap output.
AI_RETRY_COUNT (default 1) controls API retries; only transient
failures (network, timeout, 5xx) are retried.
Claude Code
# Z.AI
claude mcp add vision-mcp --env AI_API_KEY=your_key AI_MODE=ZAI -- npx -y github:nikkoxgonzales/vision-mcp
# Zhipu
claude mcp add vision-mcp --env AI_API_KEY=your_key AI_MODE=ZHIPU -- npx -y github:nikkoxgonzales/vision-mcp
# Any OpenAI-compatible provider
claude mcp add vision-mcp \
--env AI_API_KEY=your_key \
--env AI_BASE_URL=https://api.openai.com/v1/ \
--env AI_VISION_MODEL=gpt-4o \
-- npx -y github:nikkoxgonzales/vision-mcpWith a local clone, swap npx -y github:nikkoxgonzales/vision-mcp
for node path/to/vision-mcp/build/index.js.
Other MCP clients — .mcp.json
Clients that read a project-level .mcp.json (VS Code, Cursor, Windsurf,
...): drop this at the project root.
{
"mcpServers": {
"vision-mcp": {
"command": "npx",
"args": ["-y", "github:nikkoxgonzales/vision-mcp"],
"env": {
"AI_API_KEY": "your_api_key",
"AI_MODE": "ZAI"
}
}
}
}For any other OpenAI-compatible provider, set the base URL and model
instead of AI_MODE:
{
"mcpServers": {
"vision-mcp": {
"command": "npx",
"args": ["-y", "github:nikkoxgonzales/vision-mcp"],
"env": {
"AI_API_KEY": "your_api_key",
"AI_BASE_URL": "https://api.openai.com/v1/",
"AI_VISION_MODEL": "gpt-4o"
}
}
}
}With a local clone, swap npx/args for command: "node",
args: ["path/to/vision-mcp/build/index.js"].
Upstream platform docs: Z.AI Vision MCP · Zhipu Vision MCP
Project layout
build/— compiled server (vendored from@z_ai/mcp-server0.1.4)package.json— package metadata; deps:@modelcontextprotocol/sdk,zod
Changelog
2026-08-12— hardening pass: API-key validation now matches real placeholders (real keys containing "api"/"key" no longer rejected); whitespace-only keys rejected; undocumentedANTHROPIC_AUTH_TOKENfallback removed;AI_MODEmatching case-insensitive; invalid numeric env values fall back to defaults;max_tokensomitted when unset; retries limited to transient failures andAI_RETRY_COUNTnow wired;analyze_videorestricted to ZAI/Zhipu (generic endpoints don't acceptvideo_url); server identityvision-mcpv0.1.4.2026-08-12— v0.1.4 vendored; provider-agnostic config (AI_BASE_URL+AI_VISION_MODEL+AI_API_KEY, legacyZ_AI_*aliases accepted); explicit base URL wins overAI_MODE; provider-specific request params omitted for custom endpoints.
Credits
Z.AI — upstream
@z_ai/mcp-server(Apache-2.0)Contributors: Chao Gong, Lei Yuan
This server cannot be deployed
Maintenance
Related MCP Connectors
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
OCR, transcription, file extraction, and image generation for AI agents via MCP.
MCP server for Clipkit — gives AI agents a video toolbox via the Clipkit schema.
MCP server unifying ERPs, CRMs, APIs and knowledge base for Claude, ChatGPT and Gemini.
Related MCP Servers
- AlicenseAqualityDmaintenanceMCP server for vision AI — screenshots to code, OCR, error diagnosis, and image analysis via OpenAI-compatible APIs.82MIT
- FlicenseAqualityBmaintenanceEnables Claude to capture screenshots, watch your screen in real-time, read text via OCR, and analyze video files, all running locally as an MCP server.14-
- FlicenseAqualityBmaintenanceOpenAI-compatible vision MCP server with 14 provider presets that enables MCP clients to analyze images, including screenshots, text, and UI mockups, via a single analyze_image tool.2-
- AlicenseNot gradedqualityCmaintenanceMCP server that adds Qwen3-VL vision capabilities to Claude Code or any MCP client, enabling OCR, UI/screenshot recognition, and chart understanding. It provides tools for analyzing single or batch images via DashScope's OpenAI-compatible API, with caching and fast mode.MIT