vision-mcp
MCP server that gives Claude and other clients vision capabilities including screenshot-to-code, OCR, error diagnosis, diagram analysis, data-viz insights, UI diff checks, and video analysis via any OpenAI-compatible vision endpoint.
README
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).
What it does
Eight tools cover image and video analysis:
| Tool | What it does |
|---|---|
ui_to_artifact |
Convert UI screenshots into frontend code, AI prompts, design specs |
extract_text_from_screenshot |
OCR: code, terminal output, logs, docs from screenshots |
diagnose_error_screenshot |
Analyze error messages/stack traces, suggest fixes |
understand_technical_diagram |
Explain architecture, flowchart, UML, ER diagrams |
analyze_data_visualization |
Insights from charts and graphs |
ui_diff_check |
Visual regression: expected vs actual UI |
analyze_image |
General-purpose image analysis (fallback) |
analyze_video |
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-mcp
Or clone and install locally:
git clone https://github.com/nikkoxgonzales/vision-mcp.git
cd vision-mcp
npm install
Usage
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 |
|---|---|---|
AI_API_KEY |
Yes | API key for the provider |
AI_BASE_URL |
No | OpenAI-compatible base URL (e.g. https://api.openai.com/v1/). Default: Zhipu or Z.AI preset via AI_MODE. |
AI_VISION_MODEL |
No | Vision model name (default: glm-4.6v) |
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-mcp
With 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
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.