MCP HydroCoder Vision
Allows generating CSS code from UI design screenshots and images using vision-based analysis to convert visual designs into styling code.
Click on "Install 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., "@MCP HydroCoder VisionConvert this UI screenshot into React code: /Users/dev/projects/layout.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.
MCP HydroCoder Vision
English Installation | 中文安装 | 中文 README
A vision-language MCP server that enables Claude Code to analyze images using Qwen3 VL 4B model running locally via LM Studio.
Features
🔍 Image Analysis - Describe images in detail
📝 Text Extraction (OCR) - Extract text from images in multiple languages
💻 UI to Code - Generate HTML/CSS/JS code from UI/design screenshots
🏠 100% Local - All processing happens on your machine, no cloud API needed
⚡ Fast - Qwen3 VL 4B runs efficiently on 8GB VRAM
Related MCP server: Vision Bridge MCP
Prerequisites
LM Studio installed and running
Qwen3 VL 4B model loaded in LM Studio
Node.js 18+
Installation
1. Clone the repository
git clone https://github.com/hydroCoderClaud/mcp-hydrocoder-vision.git
cd mcp-hydrocoder-vision2. Install dependencies
npm install3. Build the project
npm run buildConfiguration
1. Start LM Studio
Open LM Studio
Download and load
Qwen3-VL-4B-InstructmodelStart the local server (default:
http://localhost:1234)
2. Configure Claude Code
Add to your ~/.claude/settings.json:
{
"mcpServers": {
"hydrocoder-vision": {
"command": "npx",
"args": ["-y", "mcp-hydrocoder-vision"],
"env": {
"LM_STUDIO_URL": "http://localhost:1234/v1/chat/completions",
"VISION_MODEL": "Qwen3-VL-4B-Instruct"
}
}
}
}Usage
Available Tools
analyzeImage
Analyze an image and get a detailed description.
/analyzeImage imagePath: "C:/path/to/image.png" prompt: "What's in this image?"extractText
Extract text from an image (OCR).
/extractText imagePath: "C:/path/to/document.png" language: "English"describeForCode
Generate code from a UI/design screenshot.
/describeForCode imagePath: "C:/path/to/design.png" framework: "Vue"Environment Variables
Variable | Default | Description |
|
| LM Studio API endpoint |
|
| Model name to use |
Development
# Run in development mode (watch mode)
npm run dev
# Build for production
npm run build
# Start the built server
npm startTroubleshooting
"Request failed: ECONNREFUSED"
Make sure LM Studio is running
Check that the local server is enabled
Verify the
LM_STUDIO_URLis correct
"No response from model"
Ensure Qwen3 VL 4B model is loaded in LM Studio
Check LM Studio logs for errors
Try a simpler prompt first
Image not found
Use absolute paths
Ensure the file exists and is accessible
Check file permissions
License
MIT
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- AlicenseAqualityBmaintenanceMCP server for vision AI — screenshots to code, OCR, error diagnosis, and image analysis via OpenAI-compatible APIs.Last updated82MIT
- AlicenseAqualityCmaintenanceA universal vision MCP server that enables Claude Code and Claude Desktop to describe images, extract text, and answer questions about images by converting visual content to text via multiple AI providers.Last updated320MIT
- FlicenseAqualityBmaintenanceAn MCP server that captures screenshots of URLs or local app windows and analyzes them with a local Ollama vision model, enabling Claude to visually inspect web pages and desktop applications without sending image data externally.Last updated3
- Flicense-qualityCmaintenanceMCP 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.Last updated
Related MCP Connectors
OCR, transcription, file extraction, and image generation for AI agents via MCP.
Hosted MCP server connecting claude.ai, ChatGPT and other AI apps to your own computer
Hosted Amazon Seller and Vendor MCP server for Claude, ChatGPT, Cursor, Codex, Gemini, Copilot.
Appeared in Searches
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/hydroCoderClaud/mcp-hydrocoder-vision'
If you have feedback or need assistance with the MCP directory API, please join our Discord server