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: screenshot-vision-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
Available Tools
3 toolsanalyzeImageB
Analyze an image and return a detailed description. Uses local Qwen3 VL 4B model via LM Studio.
| Name | Required | Description | Default |
|---|---|---|---|
| imagePath | Yes | Path to the image file to analyze | |
| prompt | No | Optional analysis prompt (default: "Describe this image in detail") |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It adds context about using a local model ('Qwen3 VL 4B model via LM Studio'), which hints at offline processing and potential performance or capability limits. However, it lacks details on error handling, rate limits, authentication needs, or output format, which are important for a tool with no output schema. The description doesn't contradict annotations, but it's insufficiently detailed for a tool with no annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and front-loaded, stating the core purpose in the first sentence. The second sentence adds useful context about the model. Both sentences earn their place, but it could be slightly more structured by explicitly separating purpose from implementation details.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (image analysis with a specific model), lack of annotations, and no output schema, the description is incomplete. It doesn't explain the return values (e.g., format of the 'detailed description'), error conditions, or limitations of the local model. This leaves significant gaps for an AI agent to use the tool effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, clearly documenting both parameters ('imagePath' and 'prompt'). The description adds no additional parameter semantics beyond what's in the schema, such as file format support for 'imagePath' or examples for 'prompt'. According to the rules, with high schema coverage (>80%), the baseline is 3 even without param info in the description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Analyze an image and return a detailed description.' It specifies the verb ('analyze'), resource ('image'), and output ('detailed description'). However, it doesn't explicitly differentiate from sibling tools like 'describeForCode' or 'extractText' beyond mentioning the specific model used, which is relevant but not a clear functional distinction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It mentions the model ('Qwen3 VL 4B model via LM Studio'), which implies local processing, but doesn't specify use cases, prerequisites, or exclusions compared to siblings like 'describeForCode' or 'extractText'. This leaves the agent without clear decision-making criteria.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
describeForCodeC
Analyze a UI/design image and generate corresponding code (HTML/CSS/JS, Vue, React, etc.).
| Name | Required | Description | Default |
|---|---|---|---|
| imagePath | Yes | Path to the UI/design image | |
| framework | No | Target framework (e.g., "React", "Vue", "HTML/CSS") |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden for behavioral disclosure. While it mentions the core action (analyze image → generate code), it lacks important behavioral details: what happens with complex images, whether there are rate limits, what permissions are needed, what the output format looks like, or any error conditions. For a tool that performs AI-based code generation, this is a significant gap.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise - a single sentence that efficiently communicates the core functionality. Every word earns its place, with no redundant information. It's front-loaded with the main purpose and includes relevant examples of frameworks.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool that performs AI-based image analysis and code generation with 2 parameters and no output schema, the description is insufficient. It doesn't explain what kind of output to expect (code snippets, full files, explanations), doesn't mention limitations or accuracy considerations, and provides no context about the complexity of images it can handle. The lack of annotations exacerbates these gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters thoroughly. The description adds minimal value beyond the schema - it mentions 'UI/design image' which aligns with imagePath, and 'HTML/CSS/JS, Vue, React, etc.' which aligns with framework. No additional syntax, format details, or constraints are provided beyond what's in the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Analyze a UI/design image and generate corresponding code' with specific frameworks mentioned. It distinguishes from sibling tools (analyzeImage, extractText) by focusing on code generation rather than general analysis or text extraction. However, it doesn't explicitly contrast with siblings, keeping it at 4 rather than 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention when this tool is appropriate versus using analyzeImage for general analysis or extractText for text extraction. There's no context about prerequisites, limitations, or typical use cases.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
extractTextC
Extract text from an image (OCR). Supports multiple languages.
| Name | Required | Description | Default |
|---|---|---|---|
| imagePath | Yes | Path to the image file containing text | |
| language | No | Expected language of the text (optional) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool performs OCR and supports multiple languages, but lacks details on error handling, performance characteristics (e.g., speed, accuracy), rate limits, or output format. For a tool with no annotations, this leaves significant gaps in understanding its operational behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise and front-loaded, consisting of just two short sentences: 'Extract text from an image (OCR). Supports multiple languages.' Every word contributes directly to the tool's purpose and capabilities, with no wasted verbiage or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the lack of annotations and output schema, the description is incomplete for a tool performing OCR. It doesn't explain what the output looks like (e.g., plain text, structured data), error conditions, or any behavioral nuances. While the purpose is clear, the operational context is underspecified, making it inadequate for full agent understanding.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the input schema already documents both parameters ('imagePath' and 'language') with clear descriptions. The description adds marginal value by implying the 'language' parameter relates to OCR language support, but doesn't provide additional syntax, format details, or examples beyond what the schema specifies. This meets the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Extract text from an image (OCR).' It specifies the verb 'extract' and resource 'text from an image,' with the parenthetical 'OCR' adding technical context. However, it doesn't explicitly differentiate from sibling tools like 'analyzeImage' or 'describeForCode,' which might also process images but for different purposes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It mentions 'Supports multiple languages,' which hints at a use case for multilingual text, but doesn't specify when to choose this over sibling tools like 'analyzeImage' or 'describeForCode,' nor does it outline any prerequisites or exclusions for usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Each tool has a clearly distinct purpose: analyzeImage provides general image description, describeForCode generates code from UI images, and extractText performs OCR. There is no overlap in functionality, making tool selection straightforward for an agent.
The tools follow a consistent verb-based naming pattern (analyze, describe, extract) with clear objects (Image, ForCode, Text). While describeForCode uses a prepositional phrase, it remains readable and maintains a logical structure across the set.
Three tools is a minimal but reasonable count for a vision-focused server. It covers core image analysis tasks without being overly sparse, though additional tools like image editing or format conversion could enhance completeness.
The tools cover key vision tasks (description, code generation, OCR), but there are notable gaps such as image manipulation, format conversion, or batch processing. The surface is functional but not fully comprehensive for a vision domain.
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 Connectors
MCP server for Qwen Image 3 AI image generation
MCP server unifying ERPs, CRMs, APIs and knowledge base for Claude, ChatGPT and Gemini.
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
Related MCP Servers
- 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.320MIT
- 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.3
- 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
- AlicenseNot gradedqualityCmaintenanceAn MCP server that enables Claude Code and other MCP clients to analyze local images using Ollama's multimodal models, with privacy as images are processed locally.1MIT
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