MCP Vl

🚀 MCP 自動圖片分析服務器

MCP 自動圖片分析服務器基於 GLM - 4.5V 模型構建，藉助 MCP (Model Context Protocol) 協議運行。它具備智能圖片分析能力，支持通過文件路徑或剪貼板輸入圖片，為代碼圖片分析提供了高效、專業的解決方案。

🚀 快速開始

MCP 自動圖片分析服務器能為你提供便捷的代碼圖片分析服務。你可以按照以下步驟完成安裝和配置，開啟使用之旅。

✨ 主要特性

• 🤖 智能獲取：服務器可自動從文件路徑或剪貼板獲取圖片，無需手動干預，操作更加便捷。
• 💻 代碼內容提取：精準從圖片中提取代碼文本，為後續分析奠定基礎。
• 🏗️ 架構分析：深入分析代碼的結構和設計模式，助你更好地理解代碼邏輯。
• 🐛 錯誤檢測：快速識別代碼中的錯誤和問題，幫助你及時修復。
• 📚 文檔生成：自動生成代碼文檔，包含函數說明、使用示例等，提高開發效率。
• 🔍 語言識別：自動識別圖片中代碼的編程語言，無需手動指定。
• 🎯 專注代碼：專門針對代碼圖片分析進行優化，分析結果更加準確可靠。

📦 安裝指南

1. 安裝依賴

pnpm install

2. 配置環境變量

複製 .env.example 為 .env 並填入配置：

cp .env.example .env

編輯 .env 文件：

# 智譜 AI API 配置
ZHIPUAI_API_KEY=your_zhipuai_api_key_here
ZHIPUAI_BASE_URL=https://open.bigmodel.cn/api/paas/v4

# MCP 服務器配置
MCP_SERVER_NAME=mcp-vl
MCP_SERVER_VERSION=1.0.0

# 日誌級別
LOG_LEVEL=info

3. 獲取智譜 AI API Key

1. 訪問 智譜 AI 開放平臺
2. 註冊賬號並創建 API Key
3. 將 API Key 填入 .env 文件

4. 構建項目

pnpm run build

💻 使用示例

在 Claude Code 中配置

方式一：使用 claude mcp add 命令（推薦）

構建項目後，使用以下命令添加 MCP 服務器：

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

方式二：手動配置

將以下配置添加到你的 Claude Code 配置中：

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

可用工具

auto_analyze_image

自動獲取並分析圖片（支持文件路徑或剪貼板）

{
  "name": "auto_analyze_image",
  "arguments": {
    "imagePath": "/path/to/image.png", // 可選，不提供則使用剪貼板
    "focusArea": "code" // "code", "architecture", "error", "documentation"
  }
}

使用方式：

1. 文件路徑：提供圖片文件路徑進行分析。
2. 剪貼板：不提供路徑，自動從剪貼板獲取圖片。

分析類型說明：

• code：提取代碼內容，識別編程語言，分析代碼結構。
• architecture：分析代碼架構設計，模塊關係，設計模式。
• error：檢查代碼錯誤，性能問題，安全隱患。
• documentation：生成代碼文檔，函數說明，使用示例。

🔧 技術細節

技術棧

項目結構

src/
├── index.ts              # MCP 服務器主入口
├── config/
│   └── index.ts         # 配置管理
├── services/
│   ├── glm-service.ts   # GLM 模型服務
│   └── auto-image-service.ts # 自動圖片分析服務
├── types/
│   └── index.ts         # TypeScript 類型定義
└── utils/
    └── logger.ts        # 日誌工具
scripts/
└── test-local.ts        # 本地測試腳本

開發相關

開發模式運行

pnpm run dev

構建項目

pnpm run build

代碼檢查

pnpm run lint
pnpm run typecheck

📄 許可證

本項目採用 MIT License 進行許可。

⚠️ 重要提示

⚠️ 重要提示

在 Claude 中使用時，禁止使用 read 工具進行讀取圖片，因為讀取圖片工具失效了。請使用 mcp - vl 裡的 auto_analyze_image 工具進行讀取。

💡 使用建議

1. API Key 安全：請妥善保管你的智譜 AI API Key。
2. 代碼圖片優化：專門針對代碼截圖優化，建議使用清晰的代碼截圖。
3. 支持格式：支持 JPEG、PNG、WebP、GIF 等常見格式。
4. 網絡連接：需要穩定的網絡連接訪問智譜 AI API。
5. 最佳實踐：
   • 使用高對比度的代碼編輯器主題。
   • 確保代碼字體清晰可見。
   • 避免截圖過大或過小。

貢獻

歡迎提交 Issue 和 Pull Request，共同完善本項目！