Ini adalah tutorial pengenalan penggunaan BrowserMCP yang disiapkan untuk Anda.

🚀 Membiarkan AI Tumbuh "Mata" dan "Tangan": Panduan Pemula BrowserMCP

Apakah Anda pernah berpikir, jika asisten AI yang sering Anda gunakan (seperti Cursor atau Claude Desktop) tidak hanya bisa menulis kode, menemani obrolan, tetapi juga dapat langsung mengendalikan browser Anda untuk mencari informasi, mengisi formulir, atau mengambil data dari web, betapa praktisnya?

BrowserMCP adalah alat yang dibuat untuk tujuan ini. Ia seperti jembatan yang menghubungkan asisten AI Anda dan Chrome browser, memungkinkan AI untuk "melihat" dunia melalui browser dan melakukan operasi.

🛠️ Persiapan Kerja

Sebelum memulai, pastikan Anda telah menginstal perangkat lunak berikut:

Node.js: Ini adalah fondasi untuk menjalankan layanan (harus diinstal).
Alat AI yang mendukung MCP: Saat ini mendukung Cursor, Claude Desktop, Windsurf, atau VS Code.
Chrome browser (atau browser berbasis Chromium).

⚡️ Tiga Langkah Cepat Memulai

Langkah pertama: Konfigurasi “Otak” (MCP Server)

Pertama, kita perlu memberi tahu alat AI Anda bagaimana menghubungkan ke layanan BrowserMCP. Di sini menggunakan Cursor sebagai contoh (Claude Desktop juga sama):
Buka panel pengaturan Cursor.
Temukan tab "Tools" (Alat).
Klik "New MCP server" (Server MCP Baru).
Isi informasi berikut di kotak konfigurasi:

{
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
}
}
}

Klik simpan/refresh. Sekarang AI sudah siap mengirim perintah.

Langkah kedua: Pasang “Tangan Kiri” (Plugin Browser)

Selanjutnya, kita perlu memasang “penerima” di browser untuk menjalankan perintah dari AI.

Kunjungi situs resmi BrowserMCP atau toko ekstensi, pasang ekstensi Browser MCP.

📌 Langkah penting: Setelah memasang, disarankan untuk menempelkan ikon ekstensi (Pin) di toolbar browser agar mudah diakses.

Klik ikon Browser MCP di pojok kanan atas browser.
Klik tombol “Connect” (Hubungkan).
Perhatian: Langkah ini menghubungkan tab saat ini dengan AI. Semua operasi selanjutnya akan dilakukan di tab ini.

Langkah ketiga: Saksikan Keajaiban (Mulai Otomatisasi)
Segalanya sudah siap! Sekarang kembali ke alat AI Anda (misalnya antarmuka Chat Cursor), berikan perintah seperti biasa:

Pengguna: Buka Google, cari “Browser MCP” dan beritahu saya hasil pencarian pertama apa.

Apa yang terjadi di belakang layar?

Cursor mengirimkan ucapan Anda ke Server yang berjalan secara lokal melalui protokol MCP.

Server menerjemahkan perintah ke plugin browser.

Plugin browser secara otomatis membuka Google, mengetikkan teks, dan menekan pencarian.
Plugin membaca isi halaman web, mengirim kembali ke Cursor.
Cursor merangkum isi dan membalas Anda.

💡 Tips Penggunaan

Apa yang bisa dilakukan?

“Bantu saya rangkum isi halaman web ini.”

“Lihat di GitHub apa Issue terbaru dari proyek ini.”

“Bantu saya isi formulir tes ini (dengan data yang disediakan).”

Sekarang, AI Anda tidak lagi terkurung di kotak obrolan, ayo coba buat dia berselancar di internet! 🌊

Video demonstrasi