MCP Vl

🚀 MCP 自動画像分析サーバー

GLM - 4.5V モデルに基づく MCP (Model Context Protocol) サーバーで、スマートな画像分析機能を提供し、ファイルパスとクリップボードの 2 種類の入力方式をサポートしています。

✨ 主な機能

• 🤖 自動取得: ファイルパスまたはクリップボードから自動的に画像を取得します。
• 💻 コード内容抽出: 画像からコードテキストを抽出します。
• 🏗️ アーキテクチャ分析: コードの構造と設計パターンを分析します。
• 🐛 エラー検出: コード内のエラーや問題を識別します。
• 📚 ドキュメント生成: コードドキュメントを自動生成します。
• 🔍 言語識別: プログラミング言語を自動識別します。
• 🎯 コード専用: コード画像分析に特化して最適化されています。

📦 インストール

技術スタック

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 での設定

方法 1: 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

方法 2: 手動で設定する

以下の設定をあなたの Claude Code 設定に追加します。

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

Claude プロンプト

> ⚠️ **重要な注意事項**
> 
> Claude で使用する際には、read ツールを使用して画像を読み取らないでください。この読み取りツールは機能しなくなっています。代わりに mcp - vl の auto_analyze_image ツールを使用して画像を読み取ってください。

> 💡 **使用上のヒント**
> 
> 高コントラストのコードエディターのテーマを使用し、コードのフォントがはっきり見えるようにし、スクリーンショットが大きすぎたり小さすぎたりしないようにしましょう。

利用可能なツール

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: コードドキュメント、関数説明、使用例を生成します。

🔧 技術詳細

開発モードでの実行

pnpm run dev

プロジェクトのビルド

pnpm run build

コードチェック

pnpm run lint
pnpm run typecheck

プロジェクト構造

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        # ローカルテストスクリプト

注意事項

1. API Key のセキュリティ: 智譜 AI API Key を適切に保管してください。
2. コード画像の最適化: コードのスクリーンショットに特化して最適化されています。明瞭なコードのスクリーンショットを使用することをおすすめします。
3. サポートされる形式: JPEG、PNG、WebP、GIF などの一般的な形式がサポートされています。
4. ネットワーク接続: 智譜 AI API にアクセスするには安定したネットワーク接続が必要です。
5. ベストプラクティス:
   • 高コントラストのコードエディターのテーマを使用します。
   • コードのフォントがはっきり見えるようにします。
   • スクリーンショットが大きすぎたり小さすぎたりしないようにします。

📄 ライセンス

MIT License

貢献

Issue と Pull Request の提出を歓迎します！