Submit
hydroCoderClaud

MCP HydroCoder Vision

Community hydroCoderClaud
Updated

mcp-hydrocoder-vision

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

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

MCP Server · Populars

MCP Server · New