mcp-hydrocoder-vision 0.1.6 → 0.3.0

package/INSTALL_.md

@@ -0,0 +1,71 @@
+# Installation Guide
+
+[中文版](./INSTALL_CN.md) | [English README](./README.md) | [中文 README](./README_CN.md)
+
+## Prerequisites
+
+- Node.js 18+ installed
+- LM Studio installed and running
+
+## Installation Steps
+
+### 1. Globally Install MCP Package
+
+```bash
+npm install -g mcp-hydrocoder-vision
+```
+
+### 2. Configure Claude
+
+Edit the `~/.claude.json` file in your user directory and add the following configuration:
+
+```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"
+      }
+    }
+  }
+}
+```
+
+### 3. Authorize Tool Permissions
+
+Add the following configuration to `~/.claude/settings.json` to avoid manual confirmation for each tool use:
+
+```json
+{
+  "permissions": {
+    "allow": [
+      "mcp__mcp-hydrocoder-vision__analyzeImage",
+      "mcp__mcp-hydrocoder-vision__extractText",
+      "mcp__mcp-hydrocoder-vision__describeForCode"
+    ]
+  }
+}
+```
+
+### 4. Start LM Studio
+
+1. Open LM Studio
+2. Download and load the `Qwen3-VL-4B-Instruct` model
+3. Start the local server (default port: 1234)
+
+### 5. Verify Installation
+
+Paste a screenshot into the Claude Code window, type text like "recognize image", and the MCP will be automatically invoked to recognize the content.
+
+## Troubleshooting
+
+### Connection Failed
+
+Ensure LM Studio is running and the local server is started. Check if the `LM_STUDIO_URL` environment variable is correct.
+
+### No Model Response
+
+Ensure the Qwen3-VL-4B-Instruct model is loaded in LM Studio.

package/{INSTALL.md → INSTALL_CN.md}

@@ -1,5 +1,7 @@
 # 安装说明
 
+[English Version](./INSTALL_.md) | [英文 README](./README.md) | [中文 README](./README_CN.md)
+
 ## 前置要求
 
 - Node.js 18+ 已安装
@@ -32,16 +34,18 @@ npm install -g mcp-hydrocoder-vision
 }
 ```
 
-### 3. 授权工具权限（可选）
+### 3. 授权工具权限
 
 在 `~/.claude/settings.json` 中添加以下配置，可避免每次使用工具时手动确认：
 
 ```json
 {
-  "mcpServerPermissions": {
-    "hydrocoder-vision": {
-      "tools": ["analyzeImage", "extractText", "describeForCode"]
-    }
+  "permissions": {
+    "allow": [
+      "mcp__mcp-hydrocoder-vision__analyzeImage",
+      "mcp__mcp-hydrocoder-vision__extractText",
+      "mcp__mcp-hydrocoder-vision__describeForCode"
+    ]
   }
 }
 ```
@@ -54,7 +58,7 @@ npm install -g mcp-hydrocoder-vision
 
 ### 5. 验证安装
 
-在 Claude 中输入 `/image`，应能看到 `analyzeImage`、`extractText`、`describeForCode` 等工具可用。
+在 Claude Code 窗口中贴入一张截图，输入"识别图像"等一类的文字，会自动调用 MCP 识别内容。
 
 ## 常见问题
 

package/README.md

@@ -1,5 +1,7 @@
 # MCP HydroCoder Vision
 
+[English Installation](./INSTALL_.md) | [中文安装](./INSTALL_CN.md) | [中文 README](./README_CN.md)
+
 A vision-language MCP server that enables Claude Code to analyze images using **Qwen3 VL 4B** model running locally via LM Studio.
 
 ## Features
@@ -18,14 +20,22 @@ A vision-language MCP server that enables Claude Code to analyze images using **
 
 ## Installation
 
+### 1. Clone the repository
+
 ```bash
-# Navigate to the project directory
-cd C:\workspace\develop\ccExtensions\mcpHydroVision
+git clone https://github.com/hydroCoderClaud/mcp-hydrocoder-vision.git
+cd mcp-hydrocoder-vision
+```
+
+### 2. Install dependencies
 
-# Install dependencies
+```bash
 npm install
+```
 
-# Build the project
+### 3. Build the project
+
+```bash
 npm run build
 ```
 
@@ -45,8 +55,8 @@ Add to your `~/.claude/settings.json`:
 {
   "mcpServers": {
     "hydrocoder-vision": {
-      "command": "node",
-      "args": ["C:/workspace/develop/ccExtensions/mcpHydroVision/dist/index.js"],
+      "command": "npx",
+      "args": ["-y", "mcp-hydrocoder-vision"],
       "env": {
         "LM_STUDIO_URL": "http://localhost:1234/v1/chat/completions",
         "VISION_MODEL": "Qwen3-VL-4B-Instruct"

package/README_CN.md

@@ -1,5 +1,7 @@
 # MCP HydroCoder Vision
 
+[English Installation](./INSTALL_.md) | [中文安装](./INSTALL_CN.md) | [English README](./README.md)
+
 基于 **Qwen3 VL 4B** 模型的本地视觉语言 MCP 服务器，让 Claude Code 能够识别和分析图像。
 
 ## 功能特性
@@ -18,14 +20,22 @@
 
 ## 安装步骤
 
+### 1. 克隆仓库
+
 ```bash
-# 进入项目目录
-cd C:\workspace\develop\ccExtensions\mcpHydroVision
+git clone https://github.com/hydroCoderClaud/mcp-hydrocoder-vision.git
+cd mcp-hydrocoder-vision
+```
+
+### 2. 安装依赖
 
-# 安装依赖
+```bash
 npm install
+```
 
-# 构建项目
+### 3. 构建项目
+
+```bash
 npm run build
 ```
 
@@ -45,8 +55,8 @@ npm run build
 {
   "mcpServers": {
     "hydrocoder-vision": {
-      "command": "node",
-      "args": ["C:/workspace/develop/ccExtensions/mcpHydroVision/dist/index.js"],
+      "command": "npx",
+      "args": ["-y", "mcp-hydrocoder-vision"],
       "env": {
         "LM_STUDIO_URL": "http://localhost:1234/v1/chat/completions",
         "VISION_MODEL": "Qwen3-VL-4B-Instruct"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-hydrocoder-vision",
-  "version": "0.1.6",
+  "version": "0.3.0",
   "description": "Vision MCP Server for Claude Code - Qwen3 VL 4B integration",
   "type": "module",
   "main": "src/index.ts",
@@ -11,7 +11,8 @@
     "src/",
     "README.md",
     "README_CN.md",
-    "INSTALL.md",
+    "INSTALL_.md",
+    "INSTALL_CN.md",
     "LICENSE"
   ],
   "scripts": {

package/src/index.ts

@@ -160,7 +160,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const validated = AnalyzeImageInputSchema.parse(args);
         const mimeType = getMimeType(validated.imagePath);
         const imageData = await fileToBase64(validated.imagePath);
-        const prompt = validated.prompt || 'Describe this image in detail.';
+        const prompt = validated.prompt ||
+          'Describe all visible elements concisely. Use factual, structured language. Include colors, sizes, positions, and relationships between elements. No fluff. Assume the image is a static screenshot or photograph.';
 
         const result = await analyzeImageWithLMStudio(imageData, mimeType, prompt);
         return {
@@ -173,8 +174,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const mimeType = getMimeType(validated.imagePath);
         const imageData = await fileToBase64(validated.imagePath);
         const prompt = validated.language
-          ? `Extract all text from this image. The text is in ${validated.language}.`
-          : 'Extract all text from this image (OCR).';
+          ? `Extract ALL visible text in ${validated.language}. Output only the text, no commentary. Return text in the order it appears.`
+          : `Extract ALL visible text. Output only the text, no commentary. Return text in the order it appears.`;
 
         const result = await analyzeImageWithLMStudio(imageData, mimeType, prompt);
         return {
@@ -187,7 +188,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const mimeType = getMimeType(validated.imagePath);
         const imageData = await fileToBase64(validated.imagePath);
         const framework = validated.framework || 'HTML/CSS/JavaScript';
-        const prompt = `Analyze this UI/design image and generate ${framework} code that replicates it. Focus on structure, styling, and layout.`;
+        const prompt = `Generate ${framework} code matching this design. Include all clickable elements, form submissions, state changes, and dynamic interactions. Use standard practices. Keep code readable and maintainable. Omit unnecessary comments. Do not output code for unsupported frameworks. Output only the code.`;
 
         const result = await analyzeImageWithLMStudio(imageData, mimeType, prompt);
         return {