AI エージェントに視覚を与える：オープンソースの MCP サーバー設計とローカル Ollama の設定

コーディングエージェントの死角：「画像は見られません」

この一年で、Cursor、Claude Code、Codex といった AI コーディング環境は、開発者のワークフローを大きく変えました。

それでも、エンジニアはよくこの厄介な壁にぶつかります。

微妙な CSS の表示バグや、デザインのモックアップのスクリーンショットをコーディングのセッションに貼り付けると、次のような残念な返答が返ってきます。

「このターミナル環境では画像を見ることができません。テキストで直接ご提供ください。」

言語モデルは優れた推論力を持っていますが、分離された開発者向けの CLI 環境の中では、視覚的には見えないままなのです。

解決策：Model Context Protocol（MCP）による画像認識の標準化

統合の壁を越えるために、Anthropic は Model Context Protocol（MCP） を発表しました。AI の機能のための、USB-C のような汎用プロトコルです。

私たちは、開発者のエージェント向けに専用に作られた、オープンソースの MCP 画像認識サービス Shadow Vision を開発しました。

サーバーの定義を 1 つ追加するだけで、コーディングエージェントは 6 つの構造化された画像認識ツールを使えるようになります。

1. vision_ocr：ターミナルや UI のキャプチャから、高精度でテキストと表形式のデータを抽出します。
2. vision_inspect：CSS の表示の乱れを見つけ、グラフを読み取るなど、視覚的な診断を行います。
3. vision_annotate：開発者が書き込んだ注釈（赤い枠、矢印、ハイライト）を認識します。
4. vision_layout：デザインを階層的なレイアウトツリーと余白のトークンに分解します。
5. vision_reconstruct：主力の機能です。UI のキャプチャを、クリーンな React、HTML、Tailwind のコードの下書きに直接再構築します。
6. vision_compare：反復ごとの見た目を、ピクセル単位で視覚的に比較して回帰を検査します。

ローカルファーストのプライバシー：差し替え可能なバックエンドと、オフラインの Ollama

企業のチームは、社外秘のスクリーンショットが第三者の API に漏れる危険を冒すことはできません。

Shadow Vision は、モジュール化された差し替え可能なバックエンドを実装しています。

• ローカルファーストのプライバシー：ローカルの Ollama のインスタンス（例：Qwen2-VL、LLaVA）をネイティブに統括します。画像の推論は、外部へのリクエストなしに、100% 社内のマシン内にとどまります。
• クラウドの精度：複雑な推論は、Anthropic Claude 3.5 Sonnet や Google Gemini のマルチモーダル API に、簡単に振り分けられます。
• OpenAI 互換：LM Studio、vLLM、独自の企業向けゲートウェイと相互に連携できます。

設定（Claude Desktop / Cursor）

{
  "mcpServers": {
    "shadow-vision": {
      "command": "uv",
      "args": ["run", "shadow-vision"],
      "env": {
        "VISION_BACKEND": "ollama",
        "OLLAMA_MODEL": "qwen2-vl:7b"
      }
    }
  }
}

AI エージェントに画面を認識する能力を与えると、ターミナルでのやり取りが、本当の意味でのマルチモーダルな協働へと広がります。