YetiBrowser MCP

resmi

YetiBrowser MCP adalah solusi sumber terbuka penuh yang memungkinkan asisten AI berinteraksi dengan mudah dengan peramban Anda yang sudah ada

GitHub
11

Apa yang bisa Anda lakukan dengan Yeti Browser MCP?

  • Navigasi dan ambil cuplikan halaman — minta asisten untuk memuat URL dengan browser_navigate dan mengembalikan cuplikan aksesibilitas dari halaman yang dihasilkan.
  • Isi dan kirim formulir web — gunakan browser_fill_form atau browser_type untuk mengisi beberapa bidang dan opsional mengirimkan formulir.
  • Periksa output konsol dan status halaman — ambil error, log, data formulir, cookie, dan kunci penyimpanan melalui browser_get_console_logs dan browser_page_state.
  • Jalankan JavaScript kustom di halaman — eksekusi skrip arbitrer dengan browser_evaluate dan dapatkan hasil yang dapat diserialisasi JSON untuk debugging atau ekstraksi data.
  • Ambil tangkapan layar — ambil tangkapan layar area pandang atau halaman penuh menggunakan browser_screenshot untuk verifikasi visual atau alur kerja QA.

Dokumentasi

[!PENTING] Proyek ini telah diarsipkan. Dibangun untuk mengatasi kurangnya kontrol peramban pada agen AI seperti Claude dan Codex, namun kini agen-agen tersebut telah memiliki fungsi-fungsi ini secara bawaan tanpa memerlukan solusi berbasis MCP khusus.

YetiBrowser MCP

YetiBrowser MCP adalah implementasi sumber terbuka penuh dari alur kerja Browser MCP. Ini menghubungkan server MCP berbasis Node dengan ekstensi Chrome/Firefox sehingga klien Model Context Protocol—Codex/Claude Code, Cursor, Windsurf, MCP Inspector, atau alat Anda sendiri—dapat mengotomatiskan tab peramban nyata sambil menjaga setiap bita tetap di mesin Anda dan dapat diaudit.

Mengapa memilih YetiBrowser MCP?

  • Transparan dan dapat diutak-atik – tanpa unduhan blob. Periksa, fork, dan perluas setiap komponen.
  • Mengutamakan lokal – ekstensi hanya berkomunikasi dengan server MCP localhost; data penjelajahan tidak pernah meninggalkan perangkat Anda.
  • Lintas peramban – logika bersama mendukung paket Chrome dan Firefox (build Firefox menunggu dukungan Manifest V3 yang lebih baik, sehingga UX koneksi mungkin terbatas hingga Mozilla merilis API MV3 penuh).
  • Perkakas berfokus pengembang – tangkapan konsol yang lebih kaya, pembedaan DOM, dump status halaman, dan tangkapan layar halaman penuh yang dibangun untuk debugging dan QA.
  • Ramah produksi – skrip dan dokumen untuk pengemasan, penerbitan, dan integrasi dengan alur kerja IDE.

Tata letak repositori

  • packages/shared – definisi TypeScript bersama untuk pesan dan skema alat.
  • packages/server – server MCP yang menjembatani klien MCP ke tab peramban yang berjalan.
  • extensions/shared – sumber ekstensi bersama (latar belakang/popup) dan aset.
  • extensions/chrome / extensions/firefox – lapisan pengemasan per peramban.
  • docs/ – perintah ruang kerja, daftar periksa penerbitan, dan catatan fitur.
  • scripts/ – utilitas pembantu seperti package-extensions.sh untuk zip rilis.

Alat MCP yang Tersedia

  • browser_snapshot – menangkap snapshot halaman saat ini yang berorientasi aksesibilitas
  • browser_snapshot_diff – membandingkan dua snapshot terbaru untuk menyoroti perubahan DOM/ARIA
  • browser_navigate – memuat URL baru di tab yang terhubung dan mengembalikan snapshot yang diperbarui
  • browser_go_back / browser_go_forward – bergerak melalui riwayat sambil menjaga MCP tetap sinkron
  • browser_wait – menjeda otomatisasi selama beberapa detik yang ditentukan
  • browser_wait_for – memblokir hingga pemilih muncul (opsional terlihat) sebelum melanjutkan
  • browser_press_key – mensimulasikan penekanan tombol keyboard pada elemen yang difokuskan
  • browser_click – mengklik elemen yang diidentifikasi oleh pemilih CSS
  • browser_hover – mengarahkan pointer ke elemen yang ditargetkan
  • browser_drag – menyeret elemen ke target peletakan untuk UI yang dapat diurutkan/drag-and-drop
  • browser_type – mengetik teks (opsional mengirimkan dengan Enter) ke dalam elemen yang dapat diedit
  • browser_fill_form – mengisi beberapa input/select/checkbox/radio dalam satu panggilan
  • browser_select_option – memilih satu atau lebih opsi dalam elemen <select>
  • browser_screenshot – menangkap tangkapan layar viewport atau halaman penuh melalui protokol DevTools
  • browser_get_console_logs – mengembalikan output konsol terbaru, termasuk kesalahan dengan stack trace
  • browser_page_state – membuang formulir, kunci penyimpanan, dan cookie untuk halaman yang terhubung
  • browser_connection_info – melaporkan port WebSocket jembatan, status koneksi, dan versi ekstensi
  • browser_evaluate – menjalankan JavaScript kustom di dalam halaman dan mengembalikan hasil yang dapat diserialisasi JSON
  • browser_handle_dialog – menerima atau menolak dialog alert/confirm/prompt dengan teks prompt opsional

Instalasi Ekstensi Peramban MCP

Peramban Chrome

Peramban Firefox (saat ini tidak tersedia)

  • Karena keterbatasan kemampuan Manifest v3 di rilis stabil Firefox, ekstensi Firefox ditunda hingga dukungan penuh tersedia secara umum (di luar build Nightly).

Instalasi Server MCP

Codex CLI

  • Edit ~/.codex/config.toml Anda dan tambahkan entri MCP: 
    [mcp_servers.yetibrowser-mcp]
command = "npx"
args = ["-y", "@yetidevworks/server"]
  • Mulai ulang perintah CLI codex; Anda seharusnya melihat yetibrowser-mcp tercantum di bawah alat /mcp.
  • Jika Anda ingin menyediakan port tertentu, gunakan format ini untuk entri args: args = ["-y", "@yetidevworks/server", "--ws-port", "9010"]

Claude Code

  • Pastikan ekstensi terinstal dan terhubung ke tab, lalu mulai server MCP dengan npx -y @yetidevworks/server (atau jalankan CLI yang dibangun secara lokal).
  • Tambahkan entri server ke ~/Library/Application Support/Claude/claude_desktop_config.json (lihat contoh di docs/publishing.md).
  • Mulai ulang claude sehingga mengambil server MCP baru; Anda seharusnya melihat yetibrowser-mcp tercantum di bawah menu alat /mcp setelah ekstensi terhubung.

Klien lain yang sadar MCP

  • Setiap klien MCP dapat terhubung dengan menjalankan CLI (npx -y @yetidevworks/server) atau secara opsional menyediakan port tertentu, mis. npx -y @yetidevworks/server --ws-port 9010.
  • Server mengekspos transport MCP standar melalui stdio, jadi gunakan mekanisme konfigurasi apa pun yang didukung klien Anda untuk menjalankan perintah di atas saat tab terhubung.

MCP Inspector

  • Untuk pengujian dan debugging di luar agen pengkodean.
  • npx @modelcontextprotocol/inspector npx -y @yetidevworks/server -- --ws-port 9010 untuk menjalankan dan memeriksa server MCP bersama dengan ekstensi peramban YetiBrowser MCP.

Pemecahan Masalah

  • CLI berjalan melalui port 9010-9020 hingga menemukan yang bebas, mencatat switched to saat melanjutkan. Berikan --ws-port <port> jika Anda ingin menetapkan port tertentu.
  • Popup ekstensi Peramban mencerminkan perilaku itu: biarkan pada "Otomatis" untuk melacak port CLI, atau pilih "Manual" dan masukkan port yang dilaporkan oleh browser_connection_info / log CLI untuk menimpanya.
  • Cukup tanyakan alat AI Anda tentang port koneksi. Misalnya: what is the yetibrowser mcp connction info?, lalu atur port manual ke port yang dilaporkan.

Dokumentasi & skrip build

  • Perintah ruang kerja ada di docs/workspace-commands.md.
  • Langkah-langkah penerbitan (npm + toko ekstensi) ada di docs/publishing.md.
  • Perilaku tangkapan layar didokumentasikan di docs/screenshot.md.
  • Hasilkan zip Chrome/Firefox yang dapat didistribusikan dengan ./scripts/package-extensions.sh (output ke artifacts/).
  • Kebijakan privasi tingkat repositori tersedia di PRIVACY.md.