Cara Menggunakan Tools Browser untuk Server MCP

Pernahkah Anda bertanya-tanya bagaimana Anda bisa membawa otomatisasi browser bertenaga AI ke dalam alur kerja Anda? Saya menemukan Browser tools mcp saat bekerja di Cursor IDE, dan itu benar-benar mengejutkan saya! Alat luar biasa ini memungkinkan Anda menghubungkan Cursor IDE ke browser Anda, mengotomatiskan tugas-tugas seperti mengisi formulir, mengikis data, dan pengembangan web front-end dengan mudah. Dalam tutorial ini, kita akan memandu Anda melalui pengaturan Browser tools mcp dengan Cursor IDE, menjelajahi cara memanfaatkan kekuatannya untuk otomatisasi web. Baik Anda sedang melakukan debug atau membangun, ini adalah kesempatan Anda untuk meningkatkan kemampuan. Mari selami pengaturan menarik ini bersama-sama!

💡

Sebelum kita mulai, sedikit apresiasi untuk Apidog—alat luar biasa untuk para penggemar API! Alat ini menyederhanakan pengujian dan debugging API, menjadikannya pendamping yang sempurna untuk petualangan Browser tools mcp Anda. Kunjungi apidog.com! Sekarang, mari kita mulai dengan proyek keren ini…

button

Apa itu Browser tools mcp?

Browser tools mcp adalah server Model Context Protocol (MCP) yang menjembatani model AI dengan browser web Anda, memungkinkan otomatisasi yang mulus. Dikembangkan oleh AgentDeskAI, alat ini memungkinkan alat seperti Cursor IDE (serta Windsurf, RooCode, Cline, dan Claude Desktop, sebut saja beberapa) untuk mengontrol tindakan browser—misalnya mengambil tangkapan layar, menavigasi halaman, mengisi formulir, atau mengikis data. Diperkenalkan sebagai bagian dari ekosistem MCP oleh Anthropic pada November 2024, alat ini dirancang untuk interaksi yang aman dan terstandarisasi dengan alat eksternal.

Dengan Browser tools mcp, Cursor IDE sekarang dapat mengotomatiskan tugas browser yang berulang atau mengambil data web real-time, membuat kehidupan coding Anda lebih mudah. Bayangkan meminta Cursor IDE untuk "mengikis judul berita" atau "mengisi formulir"—semuanya mungkin! Mari kita atur dan lihat keajaibannya terungkap.

Menyiapkan Lingkungan Anda untuk Browser tools mcp

Mari siapkan sistem Anda untuk menggunakan Browser tools mcp dengan Cursor IDE. Ini sangat mudah, jadi mari kita mulai!

1. Periksa Prasyarat:

Node.js: Pastikan Node.js (versi 16 atau lebih tinggi) terinstal. Periksa dengan node --version di terminal Anda, atau unduh dari nodejs.org.
Google Chrome atau Chromium: Anda memerlukan browser berbasis Chromium yang terinstal untuk ekstensi ini.
Cursor IDE: Siapkan Cursor IDE (unduh dari cursor.com jika perlu—versi 0.45 atau lebih tinggi direkomendasikan).
Keterampilan Dasar: Sedikit keakraban dengan perintah terminal dan ekstensi Chrome akan membantu.
Perangkat Keras: CPU 4+ core, RAM 16GB+, dan penyimpanan kosong 10GB+ akan membuat semuanya berjalan lancar.

2. Buat Folder Proyek:

Buka terminal Anda dan siapkan ruang kerja Anda:

mkdir browser-tools-mcp
cd browser-tools-mcp

Ini akan menjadi basis Anda untuk Browser tools mcp.

Anda siap untuk menginstal Browser tools mcp—mari kita lanjutkan!

Menginstal Browser tools mcp dengan Cursor IDE

Mari kita instal Browser tools mcp dan hubungkan ke Cursor IDE. Berikut cara melakukannya langkah demi langkah.

Langkah 1: Instal Ekstensi Chrome BrowserTools

Browser tools mcp bergantung pada ekstensi Chrome untuk mengambil data browser seperti log konsol, permintaan jaringan, dan elemen DOM.

1. Unduh Ekstensi:

Karena masih menunggu persetujuan di Chrome Web Store, ambil kode sumber dari GitHub atau klik di sini untuk mengunduh ekstensi:

git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

2. Muat Ekstensi yang Belum Dikemas (Unpacked):

Buka Chrome dan buka chrome://extensions/.

Aktifkan Mode Pengembang (tombol di kanan atas).

Klik “Load unpacked” dan pilih folder chrome-extension di dalam repo yang dikloning atau pilih folder yang Anda unduh sebelumnya.

Konfirmasikan bahwa “BrowserToolsMCP” muncul di daftar ekstensi Anda—biarkan tersemat untuk akses mudah!

Langkah 2: Siapkan Server BrowserTools MCP di Cursor

Sekarang, mari hubungkan server MCP ke Cursor IDE untuk komunikasi browser.

Buka Pengaturan Cursor IDE (Ctrl+, atau Cmd+, di Mac).

Navigasi ke Features → MCP Servers.
Klik “Add new MCP server”.

Isi detailnya:
Name: browser-tools (atau nama unik apa pun yang Anda sukai).
Select: command.
Tempel Perintah:

npx @agentdeskai/browser-tools-mcp@1.2.0

Catatan: Di Windows, jika npx tidak dikenali, jalankan where npx di terminal Anda untuk menemukan jalurnya (misalnya, C:\Users\NamaAnda\AppData\Roaming\npm\npx) dan gunakan secara eksplisit.
Simpan konfigurasi. Anda akan melihat alat-alat terdaftar dengan indikator hijau di samping “browser-tools.” Jika tidak muncul, segarkan Cursor IDE atau tunggu beberapa detik.

Langkah 3: Jalankan Server BrowserTools (Opsional tetapi Direkomendasikan)

Untuk fitur tambahan seperti pengambilan tangkapan layar dan log gabungan, jalankan server BrowserTools secara terpisah:

Di terminal Anda, jalankan:

npx @agentdeskai/browser-tools-server@1.2.0

Server ini mendengarkan pada port 3025 secara default. Pastikan tidak ada proses lain yang menggunakan port ini (periksa dengan netstat -a -n | find "3025" di Windows atau lsof -i :3025 di Mac/Linux).
Langkah ini meningkatkan komunikasi websocket untuk tangkapan layar dan mode audit—sangat berguna!

Langkah 4: Gunakan Chrome Developer Tools dengan BrowserTools MCP

Mari kita integrasikan Browser tools mcp dengan DevTools Chrome.

Buka halaman web apa pun di Chrome (misalnya, https://example.com).
Klik kanan dan pilih “Inspect” untuk membuka Chrome DevTools.
Navigasi ke panel “BrowserTools” (ditambahkan oleh ekstensi).

Dari sini, Anda dapat:

Mengambil tangkapan layar secara manual (tempel otomatis ke Cursor IDE bersifat opsional).
Mengatur jalur penyimpanan tangkapan layar (default adalah Downloads/mcp-screenshots).
Menghapus log yang tersimpan.
Menyesuaikan batas logging dan pengaturan pemotongan.

Penting: Log dihapus setiap kali Anda menyegarkan halaman atau memulai ulang server MCP.

Langkah 5: Verifikasi Semuanya Berfungsi

Uji pengaturan di Cursor IDE.

Di chat Cursor IDE ("Ctrl" atau "Cmd" + L), coba perintah seperti “Capture console logs from the current page” (Ambil log konsol dari halaman saat ini) atau “Take a screenshot of https://example.com.” (Ambil tangkapan layar dari https://example.com).
Periksa apakah log muncul di chat atau terminal, dan konfirmasikan tangkapan layar tersimpan di folder yang ditentukan.
Jika tidak ada yang muncul, pastikan server MCP berjalan dan ekstensi Chrome terhubung.

Anda baru saja mengatur Browser tools mcp dengan Cursor IDE—kerja bagus!

Menggunakan Browser tools mcp untuk Otomatisasi Browser

Dengan Browser tools mcp terhubung, mari kita otomatiskan beberapa tugas browser di Cursor IDE.

1. Uji Navigasi Dasar:

Di chat Cursor IDE, ketik: “Open the website ‘https://example.com’ in Chrome.” (Buka situs web 'https://example.com' di Chrome.)
Browser tools mcp akan meluncurkan Chrome (jika belum terbuka) dan menavigasi ke situs tersebut. Cursor IDE akan mengonfirmasi: “I’ve opened https://example.com in Chrome.” (Saya telah membuka https://example.com di Chrome.)
Jika gagal, periksa ekstensi Chrome dan status server MCP.

2. Otomatiskan Pengisian Formulir:

Coba: “Go to ‘https://example.com/contact’ and fill out the contact form with name ‘Alex Smith’, email ‘alex@example.com’, and message ‘Hello!’” (Buka 'https://example.com/contact' dan isi formulir kontak dengan nama 'Alex Smith', email 'alex@example.com', dan pesan 'Halo!')
Browser tools mcp akan menavigasi, menemukan formulir, dan mengisinya. Cursor IDE mungkin menjawab: “I’ve filled out the contact form with the details you provided.” (Saya telah mengisi formulir kontak dengan detail yang Anda berikan.) Perhatikan Chrome beraksi—cukup keren!

3. Kikis Data Web:

Tanya: “Scrape the headlines from ‘https://news.example.com’.” (Kikis judul berita dari 'https://news.example.com'.)
Browser tools mcp akan mengunjungi halaman tersebut, mengekstrak judul berita (menggunakan data DOM), dan mengembalikannya di Cursor IDE, seperti: “Here are the latest headlines: ‘Breaking News 1’, ‘Breaking News 2’.” (Berikut adalah judul berita terbaru: 'Breaking News 1', 'Breaking News 2'.)
Untuk situs yang kompleks, tentukan target (misalnya, “Extract headlines from class ‘news-title’” - Ekstrak judul berita dari kelas 'news-title').

Browser tools mcp membuka dunia kemungkinan otomatisasi di Cursor IDE!

Tips untuk Mendapatkan Manfaat Maksimal dari Browser tools mcp

Untuk meningkatkan pengalaman Browser tools mcp Anda dengan Cursor IDE:

Bersikaplah Spesifik: Gunakan perintah yang tepat (misalnya, “Click the button with ID ‘submit-btn’” - Klik tombol dengan ID 'submit-btn') untuk otomatisasi yang akurat.
Periksa Izin: Pastikan ekstensi Chrome memiliki akses ke tab aktif dan pengambilan layar.
Biarkan Server Berjalan: Jangan tutup terminal dengan server MCP—mulai ulang jika perlu.
Jelajahi Fitur: Coba pengambilan tangkapan layar atau analisis log untuk debugging—periksa repo GitHub untuk lebih lanjut!

Pengalaman Saya dengan Browser tools mcp

Bekerja dengan Browser tools mcp di Cursor IDE sangat menyenangkan! Pengaturannya lancar, dan mengotomatiskan tugas browser terasa mulus. Tangkapan layar dan log di Cursor IDE sangat membantu untuk debugging. Jika Anda menemui masalah, verifikasi port (3025) dan koneksi ekstensi.

Pikiran Akhir: Petualangan Browser tools mcp Anda

Anda telah mengatur Browser tools mcp dengan Cursor IDE dan membuka keajaiban otomatisasi browser! Dari menavigasi situs hingga mengikis data, Anda siap menangani tugas web dengan mudah. Bereksperimenlah dengan ide otomatisasi lainnya—seperti melacak harga atau tugas pengembangan web front-end! Untuk informasi lebih lanjut, periksa repo github browser-tools-mcp. Jangan lupa kunjungi Apidog jika Anda mencari alternatif postman yang lebih baik dan teruslah bersemangat dalam perjalanan Browser tools mcp Anda!

button