MCP Vl

🚀 MCP Automatic Image Analysis Server

The MCP (Model Context Protocol) server based on the GLM-4.5V model offers intelligent image analysis capabilities, supporting two input methods: file path and clipboard.

🚀 Quick Start

The MCP Automatic Image Analysis Server is a powerful tool that provides intelligent image analysis features. It can automatically obtain images, extract code content, analyze code architecture, detect errors, generate documentation, and more.

✨ Features

• 🤖 Intelligent Acquisition: Automatically retrieve images from file paths or the clipboard.
• 💻 Code Content Extraction: Extract code text from images.
• 🏗️ Architecture Analysis: Analyze the structure and design patterns of the code.
• 🐛 Error Detection: Identify errors and issues in the code.
• 📚 Documentation Generation: Automatically generate code documentation.
• 🔍 Language Recognition: Automatically recognize the programming language.
• 🎯 Code-Focused: Specifically optimized for code image analysis.

📦 Installation

1. Install Dependencies

pnpm install

2. Configure Environment Variables

Copy .env.example to .env and fill in the configuration:

cp .env.example .env

Edit the .env file:

# Zhipu AI API Configuration
ZHIPUAI_API_KEY=your_zhipuai_api_key_here
ZHIPUAI_BASE_URL=https://open.bigmodel.cn/api/paas/v4

# MCP Server Configuration
MCP_SERVER_NAME=mcp-vl
MCP_SERVER_VERSION=1.0.0

# Log Level
LOG_LEVEL=info

3. Obtain Zhipu AI API Key

1. Visit the Zhipu AI Open Platform.
2. Register an account and create an API Key.
3. Fill in the API Key in the .env file.

4. Build the Project

pnpm run build

💻 Usage Examples

Configure in Claude Code

Method 1: Use the claude mcp add command (Recommended)

After building the project, use the following command to add the MCP server:

claude mcp add mcp-vl --scope user --env ZHIPUAI_API_KEY=your_api_key_here \
    -- node /path/mcp-vl/dist/index.js

Method 2: Manual Configuration

Add the following configuration to your Claude Code settings:

{
  "mcpServers": {
    "mcp-vl": {
      "command": "node",
      "args": ["/path/mcp-vl/dist/index.js"],
      "env": {
        "ZHIPUAI_API_KEY": "your_api_key_here"
      }
    }
  }
}

Claude Prompts

> ⚠️ **Important Note**
> 
> When using in Claude, it is prohibited to use the read tool to read images because the image reading tool is invalid. Please use the auto_analyze_image tool in mcp-vl to read images.

Available Tools

auto_analyze_image

Automatically obtain and analyze images (supports file paths or the clipboard)

{
  "name": "auto_analyze_image",
  "arguments": {
    "imagePath": "/path/to/image.png", // Optional, use the clipboard if not provided
    "focusArea": "code" // "code", "architecture", "error", "documentation"
  }
}

Usage:

1. File Path: Provide the image file path for analysis.
2. Clipboard: Do not provide a path, and the image will be automatically obtained from the clipboard.

Analysis Type Explanation:

• code: Extract code content, identify the programming language, and analyze the code structure.
• architecture: Analyze the code architecture design, module relationships, and design patterns.
• error: Check for code errors, performance issues, and security risks.
• documentation: Generate code documentation, function descriptions, and usage examples.

🔧 Technical Details

Technology Stack

Project Structure

src/
├── index.ts              # Main entry of the MCP server
├── config/
│   └── index.ts         # Configuration management
├── services/
│   ├── glm-service.ts   # GLM model service
│   └── auto-image-service.ts # Automatic image analysis service
├── types/
│   └── index.ts         # TypeScript type definitions
└── utils/
    └── logger.ts        # Logging utility
scripts/
└── test-local.ts        # Local test script

Development

Run in Development Mode

pnpm run dev

Build the Project

pnpm run build

Code Check

pnpm run lint
pnpm run typecheck

📄 License

This project is licensed under the MIT License.

🤝 Contribution

Welcome to submit Issues and Pull Requests!

💡 Usage Tip

1. API Key Security: Please keep your Zhipu AI API Key secure.
2. Code Image Optimization: Specifically optimized for code screenshots. It is recommended to use clear code screenshots.
3. Supported Formats: Common formats such as JPEG, PNG, WebP, and GIF are supported.
4. Network Connection: A stable network connection is required to access the Zhipu AI API.
5. Best Practices:
   • Use a high-contrast code editor theme.
   • Ensure that the code font is clearly visible.
   • Avoid screenshots that are too large or too small.