Lewati ke konten utama
AI & Rekayasa•9 menit baca

Memberdayakan Agen AI dengan Visi: Arsitektur Server MCP Open Source dan Pengaturan Ollama Lokal

Agen pengodean unggul dalam teks tetapi buta terhadap tangkapan layar, mockup UI, dan diagram. Bagaimana Model Context Protocol (MCP) menjembatani visi ke Cursor dan Claude Code dengan privasi lokal.

#Model Context Protocol#Visi MCP Cursor#Agen Claude Code#Visi Ollama Lokal#Tangkapan Layar ke Kode

Titik Buta Agen Pengodean: “Saya Tidak Bisa Melihat Gambar”

Selama setahun terakhir, lingkungan pengodean AI seperti Cursor, Claude Code, dan Codex telah merevolusi alur kerja pengembang.

Namun para insinyur terus-menerus menghadapi hambatan yang membuat frustrasi ini:

Anda menangkap bug rendering CSS yang halus atau mockup desain visual, menaruh tangkapan layar itu ke sesi pengodean, dan menerima balasan yang mengecewakan:

“Saya tidak dapat melihat gambar di lingkungan terminal ini. Tolong berikan teksnya secara langsung.”

Model bahasa menunjukkan kemampuan bernalar yang mengesankan, tetapi di dalam lingkungan CLI pengembang yang terpisah, mereka tetap buta secara visual.


Solusinya: Menstandardisasi Visi lewat Model Context Protocol (MCP)

Untuk mengatasi batas integrasi, Anthropic memperkenalkan Model Context Protocol (MCP)—protokol universal yang dianalogikan seperti USB-C untuk kemampuan AI.

Kami merekayasa Shadow Vision, sebuah layanan visi MCP open source yang dibuat khusus untuk agen pengembang.

Dengan menambahkan satu definisi server, agen pengodean Anda mendapatkan akses ke 6 alat visual terstruktur:

  1. vision_ocr: Ekstraksi teks dan data tabel presisi tinggi dari terminal dan tangkapan UI.
  2. vision_inspect: Diagnostik visual yang mengidentifikasi kerusakan CSS dan menginterpretasikan grafik.
  3. vision_annotate: Mengenali anotasi pengembang: kotak pembatas merah, panah, dan sorotan.
  4. vision_layout: Memecah desain visual menjadi pohon tata letak hierarkis dan token spasi.
  5. vision_reconstruct: Kemampuan unggulannya—merekonstruksi tangkapan UI visual langsung menjadi draf kode React, HTML, dan Tailwind yang bersih.
  6. vision_compare: Inspeksi regresi visual tingkat piksel antar iterasi.

Privasi Local-First: Backend yang Dapat Dipasang dan Ollama Offline

Tim perusahaan tidak bisa mengambil risiko tangkapan layar milik mereka bocor ke API pihak ketiga.

Shadow Vision menerapkan backend modular yang dapat dipasang:

  • Privasi Local-First: Secara native mengorkestrasi instans Ollama lokal (misalnya Qwen2-VL, LLaVA). Inferensi gambar tetap 100% di tempat tanpa permintaan keluar.
  • Fidelitas Cloud: Dengan mudah mengarahkan penalaran yang kompleks ke Anthropic Claude 3.5 Sonnet atau API multimodal Google Gemini.
  • Kompatibilitas OpenAI: Dapat dioperasikan dengan LM Studio, vLLM, atau gateway perusahaan milik sendiri.

Konfigurasi (Claude Desktop / Cursor):

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

Memberi agen AI kemampuan untuk melihat layar menjembatani interaksi terminal menjadi kolaborasi multimodal yang sesungguhnya.

Semua Catatan Lapangan →