Skip to main content
Glama

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

  1. LM Studio installed and running

  2. Qwen3 VL 4B model loaded in LM Studio

  3. Node.js 18+

Installation

1. Clone the repository

git clone https://github.com/hydroCoderClaud/mcp-hydrocoder-vision.git
cd mcp-hydrocoder-vision

2. Install dependencies

npm install

3. Build the project

npm run build

Configuration

1. Start LM Studio

  1. Open LM Studio

  2. Download and load Qwen3-VL-4B-Instruct model

  3. Start 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_URL

http://localhost:1234/v1/chat/completions

LM Studio API endpoint

VISION_MODEL

Qwen3-VL-4B-Instruct

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 start

Troubleshooting

"Request failed: ECONNREFUSED"

  • Make sure LM Studio is running

  • Check that the local server is enabled

  • Verify the LM_STUDIO_URL is 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 tools
analyzeImageB

Analyze an image and return a detailed description. Uses local Qwen3 VL 4B model via LM Studio.

ParametersJSON Schema
NameRequiredDescriptionDefault
imagePathYesPath to the image file to analyze
promptNoOptional analysis prompt (default: "Describe this image in detail")

TDQS

B3.1/5.0
Behavior3/5

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.

Conciseness4/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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.).

ParametersJSON Schema
NameRequiredDescriptionDefault
imagePathYesPath to the UI/design image
frameworkNoTarget framework (e.g., "React", "Vue", "HTML/CSS")

TDQS

C2.9/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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.

ParametersJSON Schema
NameRequiredDescriptionDefault
imagePathYesPath to the image file containing text
languageNoExpected language of the text (optional)

TDQS

C2.9/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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

B3.3/5.0
Disambiguation5/5

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.

Naming Consistency4/5

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.

Tool Count4/5

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.

Completeness3/5

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

ActivityInactive
ResponsivenessSyncing

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

Related MCP Servers

  • A
    license
    A
    quality
    C
    maintenance
    A 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.
    3
    20
    MIT
  • F
    license
    A
    quality
    B
    maintenance
    An 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
  • A
    license
    Not graded
    quality
    C
    maintenance
    MCP 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

Appeared in Searches

Latest Blog Posts

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