Skip to main content
Glama
Sign In
MCP HydroCoder Vision

MCP HydroCoder Vision

by hydroCoderClaud
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

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.

Inputs: imagePath (required), prompt.

describeForCodeC

Analyze a UI/design image and generate corresponding code (HTML/CSS/JS, Vue, React, etc.).

Inputs: imagePath (required), framework.

extractTextC

Extract text from an image (OCR). Supports multiple languages.

Inputs: imagePath (required), language.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    B3.3/5.0

    Scored across 3 tools

    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
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers

    • Vision Bridge MCP

      shen866
      A
      license
      A
      quality
      D
      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
      7 npm
      MIT

    • screenshot-vision-mcp

      AVS845
      F
      license
      A
      quality
      D
      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
      -

    • qwen-vision-mcp

      Bigcheese18
      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