Browser MCP: Otomatisasi browser dengan Cursor, Claude, dan VS Code

 (browsermcp.io)
2 poin oleh GN⁺ 2025-04-08 | 1 komentar | Bagikan ke WhatsApp
  • Browser MCP menghubungkan aplikasi AI dengan browser pengguna sehingga bisa mengotomatiskan pengisian formulir, pengujian, dan tugas web yang berulang
  • Otomatisasi berjalan di mesin lokal, mengurangi latensi jaringan, dan aktivitas browser tidak dikirim ke server jarak jauh
  • Menggunakan profil browser yang sudah ada sehingga status login tetap terjaga, serta memakai fingerprint browser sungguhan untuk menghindari deteksi bot dasar dan CAPTCHA
  • Proses memulai terdiri dari 3 langkah: memasang ekstensi browser, menambahkan server MCP ke aplikasi AI, dan membuat workflow otomatisasi
  • Menyediakan alat yang diperlukan untuk mengoperasikan browser seperti navigasi URL, klik, drag-and-drop, snapshot, screenshot, dan melihat log konsol

Mengotomatiskan tugas browser yang sulit dilakukan hanya dengan aplikasi AI

  • Otomatisasi yang membutuhkan pengoperasian browser, seperti mengisi formulir berulang kali di situs web, sulit ditangani hanya dengan aplikasi AI seperti Cursor atau Claude
  • Browser MCP menghubungkan aplikasi AI dengan browser pengguna agar dapat menjalankan tugas web atas nama pengguna
  • Ada dua kasus penggunaan utama
    • Pengujian otomatis: editor AI menguji kode secara end-to-end, memverifikasi alur pengguna dan elemen UI, serta memeriksa perilaku aplikasi dalam berbagai skenario
    • Otomatisasi tugas: menangani tugas berbasis web yang berulang seperti pengumpulan data, pengisian formulir, dan otomatisasi workflow

Alur instalasi dan cara berjalan secara lokal

  • Untuk memulai, ada tiga langkah
    • Pasang ekstensi Browser MCP di browser
    • Tambahkan server MCP Browser MCP ke aplikasi AI untuk menghubungkannya dengan ekstensi browser
    • Mulai buat workflow otomatisasi agar asisten AI menangani tugas berulang di dalam browser
  • Otomatisasi berjalan di mesin lokal pengguna
    • Bertujuan memberikan performa lebih baik dan mengurangi latensi jaringan
    • Aktivitas browser tidak dikirim ke server jarak jauh dan tetap berada di perangkat
    • Menggunakan profil browser yang sudah ada untuk mempertahankan status login ke layanan
    • Menggunakan fingerprint browser sungguhan untuk menghindari deteksi bot dasar dan CAPTCHA

Alat yang disediakan dan dukungan

  • Menyediakan alat yang diperlukan untuk mengoperasikan browser
    • Navigate, Go Back, Go Forward, Wait
    • Press Key, Click, Drag & Drop, Hover, Type Text
    • Snapshot, Screenshot, Get Console Logs
  • Target yang didukung mencakup Cursor, Claude, Windsurf, dan VSCode
  • Dokumentasi dapat dilihat di Documentation

Bacaan terkait

1 komentar

 
GN⁺ 2025-04-08
Komentar Hacker News

  • [!warning!] Ekstensi Chrome proyek ini mengirim data telemetri terperinci ke PostHog dan Amplitude: https://storage.googleapis.com/cobrowser-images/telemetry.pn..., https://storage.googleapis.com/cobrowser-images/pings.png
    Selain itu, sumber server MCP lokal memang disertakan, tetapi tidak ada sumber ekstensi Chrome, dan tampaknya membundel https://github.com/ruifigueira/playwright-crx tanpa atribusi, jadi sangat mencurigakan

    • Saya pembuat Browser MCP. Ekstensi ini menggunakan ID perangkat anonim dan mengirim event analitik saat pemanggilan tool digunakan
      Dari lalu lintas jaringan, Anda bisa memastikan bahwa tidak ada informasi yang dipersonalisasi atau dapat mengidentifikasi yang dikirim. Tujuannya adalah mengumpulkan data penggunaan yang dianonimkan, seperti situs web menghitung pengunjung, untuk memahami seberapa banyak ekstensi ini digunakan. Karena saya membagi waktu di beberapa proyek, mengetahui jumlah pengguna aktif membantu menentukan harus fokus ke mana
      Ekstensi ini seluruhnya saya tulis sendiri, dan alasan mengapa saat ini repositori hanya berisi server MCP sudah saya jelaskan di issue GitHub ini: https://github.com/BrowserMCP/mcp/issues/1#issuecomment-2784...
      Ringkasnya, saya memakai monorepo yang berisi kode yang dipakai bersama oleh semua ekstensi, jadi memisahkan ekstensi ini saja lalu menjaga sinkronisasi beberapa monorepo akan membutuhkan cukup banyak pekerjaan. Anda mungkin tidak suka cara proyek ini disusun, tetapi tidak ada hal jahat di sini
    • Kalau yang dimaksud “terperinci” di sini adalah deviceId anonim dan penghitung jumlah pemanggilan tool, berarti Anda juga mempermasalahkan aplikasi yang mencoba mendapatkan insight penggunaan dasar
    • Satu-satunya ekstensi Chrome yang boleh dipasang adalah yang bisa dibangun sendiri dari source

  • Situs web ini mengklaim “menghindari deteksi bot dan CAPTCHA dengan menggunakan fingerprint browser nyata”, tetapi kenyataannya tidak begitu
    Beberapa minggu lalu, dengan sistem serupa yang saya buat sendiri, saya membiarkan AI mengendalikan browser dalam sesi yang sudah login. Akibatnya, CAPTCHA mulai muncul bahkan pada sesi yang dipakai langsung oleh manusia, dan akhirnya saya diblokir di beberapa situs web. Setelah saya berhenti menggunakan sesi browser dengan cara seperti itu, pemblokiran menghilang seiring waktu, tetapi pendekatan ini bukan solusi ampuh untuk semua hal dan Anda juga bisa kehilangan hak akses sendiri

    • Prasyarat untuk hal semacam ini biasanya adalah “saat memakai proxy berkualitas tinggi”
      Selain itu, ekstensi ini tampaknya cukup mencolok, jadi sepertinya deteksi bot Cloudflare tidak akan butuh waktu lama untuk mengenalinya seperti Playwright
    • Ekstensi ini mengaktifkan debugging di browser, dan banner bahwa otomasi sedang berjalan ditampilkan. Ini bisa dideteksi dari JavaScript
      Karena itu ada proyek seperti ini: https://github.com/Kaliiiiiiiiii-Vinyzu/patchright. Proyek ini menyembunyikan bagian debugging dari JavaScript
    • Bisa juga bergantung pada kecepatan mengklik elemen situs web
    • Saya penasaran apa yang bisa dipakai untuk mendeteksinya dengan cepat. Misalnya, mereka bisa melacak gerakan mouse dan menghitung apakah gerakannya terlalu rapi; jika ditambahkan noise yang lebih mirip manusia pada pergerakan mouse, mungkin akan lebih mudah lolos
      Melakukan terlalu banyak aksi terlalu cepat juga masalah, tetapi timing di antara aksi juga mungkin menjadi sinyal. Walau tiap klik tidak cepat, jika jeda waktunya terlalu konsisten, itu menjadi sinyal lain yang tidak manusiawi
    • Alasan CAPTCHA ada pada dasarnya juga karena orang tidak bisa dipercaya akan memakai tool otomasi dengan semestinya
      “Menghindari deteksi bot dan CAPTCHA” pada akhirnya berarti perangkat semacam itu ada karena orang-orang seperti Anda. Kalau memang butuh akses, Anda harus meminta API, dan mungkin harus membayar, mungkin juga tidak. Bisa saja diberikan, bisa juga pemilik situs menolak; dalam kasus itu, Anda harus menerima bahwa tindakan atau use case Anda tidak diinginkan

  • Rasanya saya baru tidur sehari, tapi sekarang MCP terlihat di mana-mana. Saya tidak tahu apa itu MCP, dan pada titik ini saya bahkan takut bertanya

    • MCP adalah cara menyediakan library metode/API yang dapat “dipanggil” oleh model LLM
      Jika nama metode, parameter, tipe output, dan kegunaannya diberitahukan ke model, LLM akan meminta server MCP untuk memanggil fungsi, memeriksa hasilnya, lalu memanggil fungsi berikutnya jika perlu. Saat ini sulit meminta ChatGPT, “Buka Google Maps dengan akun saya, cari toko sepeda di sekitar New York, lalu ambil nomor teleponnya,” tetapi dengan Browser MCP, ChatGPT bisa mengirim instruksi ke browser seperti “buka Google Maps”, “tampilkan screenshot”, atau “klik lokasi itu”
    • Bagian terburuknya adalah ini membuka kotak Pandora berisi potensi kerentanan: https://elenacross7.medium.com/%EF%B8%8F-the-s-in-mcp-stands...
    • MCP adalah standar untuk mencolokkan tool yang berguna ke model AI agar bisa digunakan oleh model
      Bagi orang awam, konsepnya terasa agak terbalik dan tidak intuitif, tetapi bagi developer, ini terlihat seperti tool yang biasa mereka pakai, sehingga mereka tidak terlalu merasa bingung
    • MCP memang diadopsi secara luas, tetapi ini bukan gerakan akar rumput. Tampaknya lebih seperti perusahaan AI yang sudah ada masuk dengan cepat untuk menguasai awareness dan pangsa pasar developer sebelum terbentuk konsensus
    • Ini adalah remote procedure call (RPC) khusus LLM. Dan juga tren baru hari ini yang sedang menyapu seluruh dunia

  • Akan menyenangkan jika di situs belanja kita bisa berkata kepada browser, “Telusuri semua sideboard di daftar ini dan saring hanya yang lebih tinggi dari 155 cm dan lebih pendek dari 100 cm. Prioritaskan yang berbahan kayu gelap dan punya ruang untuk memasukkan piringan vinil setinggi 31,43 cm.”
    Kalau bisa mengekstrak detail dari halaman, rasanya akan sangat berguna; saya penasaran apakah sudah ada browser yang bisa melakukan hal seperti ini

    • Saya sedang membuat sesuatu yang mirip bernama MatterRank, saat ini bekerja di pencarian web
      Misalnya seperti “prioritaskan hasil yang membahas X dan condong ke Y, lalu turunkan peringkat hasil yang mencoba menjual sesuatu.” Bisa dicoba di https://matterrank.ai
      Saya juga ingin mendengar lebih banyak use case yang dibayangkan. Penasaran apakah ini berupa ekstensi browser yang bekerja di situs yang sedang dilihat, layanan agregator belanja yang menyediakan fitur seperti ini, atau bentuk yang sama sekali berbeda
    • Bisa dilakukan dengan browser-use: https://browser-use.com/
    • Saat menata interior, saya jelas tertarik untuk menemukan barang yang sesuai dengan prompt yang sangat spesifik

  • Dibuat dengan baik. Saya mencobanya di Claude Desktop dan berjalan mulus, jauh tidak serepot Playwright. Arahnya sudah benar
    Entah apakah ini sudah dilakukan, tetapi akan bagus jika ketika CAPTCHA terdeteksi di halaman, otomatisasi dijeda dan pengguna diberi tahu bahwa diperlukan intervensi. Playwright cenderung tetap memaksakan jalan meski ada CAPTCHA

  • Tugas mencari informasi di web lalu memasukkan hasilnya ke spreadsheet Google Sheets awalnya hampir sempurna, tetapi dalam 8–10 percobaan berikutnya gagal total
    Saya penasaran apakah ada masalah latensi antara apa yang terjadi di browser dan aplikasi MCP, dalam hal ini Claude Desktop. Pada percobaan pertama, saya menekan izin “Allow for this chat” cukup cepat, dan setelah itu rasanya saat saya menekan izin, LLM sudah melaporkan “sepertinya ada masalah dengan klik. Saya akan mencoba lagi dengan referensi lain”
    Tindakan seperti mengklik judul Google spreadsheet lalu mengetik nama, yang pada percobaan pertama berjalan sempurna, gagal 100% pada percobaan berikutnya. Begitu juga identifikasi sel seperti A1, B1 dan pengisian baris. Pengalamannya sendiri sangat mulus dan konfigurasi serta eksekusinya bagus, tetapi karena latensi dan kecepatan mengklik tombol izin, di Claude Desktop tampaknya praktis sulit digunakan

    • UI yang kaya seperti Google Sheets tampaknya merupakan use case yang buruk untuk server MCP otomatisasi browser serbaguna
      Akan bagus jika ada server MCP seperti ini, tetapi juga menyediakan tool khusus agar LLM bisa membaca dan menulis sel Google Sheets. Alih-alih berinteraksi secara umum dengan halaman web, memberi abstraksi yang lebih spesifik akan membuat tugas seperti ini ditangani jauh lebih baik
    • Saya pernah mengerjakan Google Sheets MCP, dan untuk scraping data, memanfaatkan fitur pencarian bawaan Claude bekerja cukup baik
      Contoh: https://x.com/xing101/status/1903391600040083488
      Setup: https://github.com/xing5/mcp-google-sheets
    • Yang Anda alami adalah sesuatu yang biasa disebut keberuntungan
      Ini sama seperti alasan orang terus-menerus berpikir versi ChatGPT baru telah di-nerf. Kenyataannya, Anda beruntung di awal, lalu dari hasil awal yang positif itu terbentuk ekspektasi yang tidak realistis. Ini bukan bug atau cacat, melainkan lebih seperti peluang statistik untuk melakukan tindakan yang diinginkan memang rendah, tetapi pada giliran pertama Anda mendapat lemparan dadu yang bagus
    • Dalam kasus saya, di Google Sheets tidak ada bagian mana pun yang bisa diklik. Muncul error berikut
      --Error: Cannot access a chrome-extension:// URL of different extension

  • Saya sangat menantikan hal seperti ini untuk pekerjaan manual seperti klaim pengeluaran. Setiap bulan saya harus masuk ke situs penyedia layanan, login, mencari dan mengunduh laporan, membuat dokumen Google berisi rincian, mengunduhnya, lalu menulis email baru dan mengunggah semua file
    Untuk memastikan lampirannya benar, kadang tidak bisa dilihat langsung dari email sehingga harus diunduh lagi. Otomatisasinya sendiri sudah memungkinkan, dan aplikasi pelacakan pengeluaran yang layak bisa menghilangkan separuh pekerjaan ini, tetapi tool AI punya potensi besar untuk mengurangi beban penulisan rincian kecil-kecil. Workflow seperti ini sangat penting karena sering ada perubahan kecil

  • Mungkin sudah jelas bagi sebagian besar orang di sini, tetapi untuk menjalankan server MCP, Node.js harus terpasang. Detail penting ini tidak ada di panduan setup

  • Saya membuat sesuatu yang mirip, tetapi untuk mengendalikan synthesizer hardware sehingga bisa melakukan sound design tanpa menyentuh knob fisik: https://github.com/zerubeus/elektron-mcp

    • Ide bagus
      Bisa dibayangkan plugin dikendalikan dari jarak jauh, dan LLM melakukan mastering dan penyesuaian timbre dengan tool yang ada. UI VST yang kompleks dan terlalu grafis bisa menjadi hambatan performa, tetapi bisa dihubungkan ke antarmuka MIDI mapping berlabel untuk mengendalikan knob dan level

  • Akan bagus jika halaman bisa dinavigasi lewat accessibility tree di Chrome DevTools, bukan bergantung pada screenshot: https://developer.chrome.com/blog/full-accessibility-tree

    • Sebenarnya Anda memahaminya terbalik. Saat ini tidak ada screenshot, hanya accessibility tree