Tarayıcı Araçları MCP Sunucusu Nasıl Kullanılır

AI destekli tarayıcı otomasyonunu iş akışınıza nasıl dahil edebileceğinizi hiç merak ettiniz mi? Browser tools mcp ile Cursor IDE'de çalışırken karşılaştım ve aklımı başımdan aldı! Bu harika araç, Cursor IDE'yi tarayıcınıza bağlamanıza, form doldurma, veri kazıma ve ön uç web geliştirme gibi görevleri kolaylıkla otomatikleştirmeyi sağlar. Bu eğitimde, Browser tools mcp'yi Cursor IDE ile kurma, web otomasyonu için gücünden nasıl yararlanacağınızı keşfetme konusunda size yol göstereceğiz. İster hata ayıklıyor ister geliştiriyor olun, bu seviyenizi yükseltme şansınız. Gelin, bu heyecan verici kurulumu birlikte inceleyelim!

Browser tools mcp Nedir?

Browser tools mcp, yapay zeka modellerini web tarayıcınızla birleştiren ve kesintisiz otomasyon sağlayan bir Model Context Protocol (MCP) sunucusudur. AgentDeskAI tarafından geliştirilen bu araç, Cursor IDE (ve ayrıca Windsurf, RooCode, Cline ve Claude Desktop gibi birkaçını saymak gerekirse) gibi araçların tarayıcı eylemlerini kontrol etmesini sağlar; örneğin ekran görüntüleri almak, sayfalarda gezinmek, formları doldurmak veya veri kazımak gibi. Anthropic tarafından Kasım 2024'te MCP ekosisteminin bir parçası olarak tanıtılan bu araç, harici araçlarla güvenli, standartlaştırılmış etkileşimler için tasarlanmıştır.

Browser tools mcp ile Cursor IDE artık tekrarlayan tarayıcı görevlerini otomatikleştirebilir veya gerçek zamanlı web verilerini getirebilir, bu da kodlama hayatınızı kolaylaştırır. Cursor IDE'den "manşetleri kazı" veya "bir form doldur" gibi şeyler istediğinizi hayal edin; hepsi mümkün! Gelin, kuralım ve sihrin ortaya çıkışını görelim.

Browser tools mcp için Ortamınızı Kurma

Sisteminizi Browser tools mcp'yi Cursor IDE ile kullanmaya hazır hale getirelim. Bu çok kolay, hadi başlayalım!

1. Ön Koşulları Kontrol Edin:

• Node.js: Node.js'nin (sürüm 16 veya üzeri) yüklü olduğundan emin olun. Terminalinizde node --version ile kontrol edin veya nodejs.org adresinden edinin.
• Google Chrome veya Chromium: Uzantı için Chromium tabanlı bir tarayıcıya ihtiyacınız olacak.
• Cursor IDE: Cursor IDE'yi hazır bulundurun (gerekirse cursor.com adresinden indirin; sürüm 0.45 veya üzeri önerilir).
• Temel Beceriler: Terminal komutları ve Chrome uzantıları hakkında biraz bilgi sahibi olmak yardımcı olacaktır.
• Donanım: Her şeyin sorunsuz çalışmasını sağlamak için 4+ çekirdekli bir CPU, 16GB+ RAM ve 10GB+ boş depolama alanı yeterli olacaktır.

2. Bir Proje Klasörü Oluşturun:

• Terminalinizi açın ve çalışma alanınızı ayarlayın:

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

• Burası Browser tools mcp için ana üssünüz olacak.

Browser tools mcp'yi yüklemeye hazırsınız; hadi ilerleyelim!

Browser tools mcp'yi Cursor IDE ile Yükleme

Browser tools mcp'yi yükleyelim ve Cursor IDE'ye bağlayalım. İşte adım adım nasıl yapılacağı.

Adım 1: BrowserTools Chrome Uzantısını Yükleyin

Browser tools mcp, konsol günlükleri, ağ istekleri ve DOM öğeleri gibi tarayıcı verilerini yakalamak için bir Chrome uzantısına dayanır.

1. Uzantıyı İndirin:

• Chrome Web Mağazasında onay beklediği için, GitHub'dan kaynak kodunu alın veya uzantıyı indirmek için buraya tıklayın:

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

2. Paketlenmemiş Uzantıyı Yükleyin:

• Chrome'u açın ve chrome://extensions/ adresine gidin.

• Geliştirici Modunu etkinleştirin (sağ üstteki geçiş).

• "Paketlenmemiş yükle"ye tıklayın ve klonlanmış deponun içindeki chrome-extension klasörünü seçin veya daha önce indirdiğiniz klasörü seçin.

• "BrowserToolsMCP"nin uzantı listenizde göründüğünü doğrulayın; kolay erişim için sabitleyin!

Adım 2: BrowserTools MCP Sunucusunu Cursor'da Kurun

Şimdi, MCP sunucusunu tarayıcı iletişimi için Cursor IDE'ye bağlayalım.

• Cursor IDE Ayarlarını açın (Ctrl+, veya Mac'te Cmd+,).

• Özellikler → MCP Sunucuları'na gidin.
• "Yeni MCP sunucusu ekle"ye tıklayın.

• Ayrıntıları doldurun:
• Ad: browser-tools (veya tercih ettiğiniz herhangi bir benzersiz ad).
• Seç: command.
• Komutu Yapıştırın:

npx @agentdeskai/browser-tools-mcp@1.2.0

• Not: Windows'ta, npx tanınmıyorsa, yolu bulmak için terminalinizde where npx komutunu çalıştırın (örneğin, C:\Users\YourName\AppData\Roaming\npm\npx) ve açıkça kullanın.
• Yapılandırmayı kaydedin. Araçların "browser-tools"un yanında yeşil bir gösterge ile listelendiğini görmelisiniz. Görünmüyorsa, Cursor IDE'yi yenileyin veya birkaç saniye bekleyin.

Adım 3: BrowserTools Sunucusunu Çalıştırın (İsteğe Bağlı ancak Önerilir)

Ekran görüntüsü yakalama ve toplanmış günlükler gibi ek özellikler için, BrowserTools sunucusunu ayrı olarak çalıştırın:

• Terminalinizde, şunu çalıştırın:

npx @agentdeskai/browser-tools-server@1.2.0

• Bu sunucu varsayılan olarak 3025 numaralı portu dinler. Başka hiçbir işlemin bu portu kullanmadığından emin olun (Windows'ta netstat -a -n | find "3025" veya Mac/Linux'ta lsof -i :3025 ile kontrol edin).
• Bu adım, ekran görüntüleri ve denetim modları için websocket iletişimini geliştirir; süper kullanışlı!

Adım 4: Chrome Geliştirici Araçlarını BrowserTools MCP ile Kullanın

Browser tools mcp'yi Chrome'un DevTools'u ile entegre edelim.

• Chrome'da herhangi bir web sayfasını açın (örneğin, https://example.com).
• Chrome DevTools'u açmak için sağ tıklayın ve "İncele"yi seçin.
• "BrowserTools" paneline gidin (uzantı tarafından eklendi).

Buradan şunları yapabilirsiniz:

• Ekran görüntülerini manuel olarak yakalayın (Cursor IDE'ye otomatik yapıştırma isteğe bağlıdır).
• Ekran görüntüsü kaydetme yollarını ayarlayın (varsayılan Downloads/mcp-screenshots'dir).
• Kaydedilmiş günlükleri silin.
• Günlük kaydetme sınırlarını ve kesme ayarlarını ayarlayın.

Önemli: Sayfayı her yenilediğinizde veya MCP sunucusunu yeniden başlattığınızda günlükler silinir.

Adım 5: Her Şeyin Çalıştığını Doğrulayın

Kurulumu Cursor IDE'de test edin.

• Cursor IDE'de, sohbeti ("Ctrl" veya "Cmd" + L) kullanın ve "Geçerli sayfadan konsol günlüklerini yakala" veya "https://example.com'un ekran görüntüsünü al" gibi komutlar deneyin.
• Günlüklerin sohbette veya terminalde göründüğünü kontrol edin ve ekran görüntülerinin belirtilen klasöre kaydedildiğini doğrulayın.
• Hiçbir şey görünmüyorsa, MCP sunucusunun çalıştığından ve Chrome uzantısının bağlı olduğundan emin olun.

Browser tools mcp'yi Cursor IDE ile kurdunuz; harika iş!

Browser tools mcp'yi Tarayıcı Otomasyonu için Kullanma

Browser tools mcp bağlandığında, Cursor IDE'de bazı tarayıcı görevlerini otomatikleştirelim.

1. Temel Gezinmeyi Test Edin:

• Cursor IDE'nin sohbetinde şunu yazın: “‘https://example.com’ web sitesini Chrome'da aç.”
• Browser tools mcp Chrome'u başlatacak (açık değilse) ve siteye gidecektir. Cursor IDE şunu onaylayacaktır: “Chrome'da https://example.com'u açtım.”
• Başarısız olursa, Chrome uzantısını ve MCP sunucu durumunu kontrol edin.

2. Form Doldurmayı Otomatikleştirin:

• Şunu deneyin: “‘https://example.com/contact’ adresine git ve iletişim formunu ‘Alex Smith’ adıyla, ‘alex@example.com’ e-postasıyla ve ‘Merhaba!’ mesajıyla doldur.”
• Browser tools mcp gezecek, formu bulacak ve dolduracaktır. Cursor IDE şu şekilde yanıt verebilir: “İletişim formunu sağladığınız bilgilerle doldurdum.” Chrome'un çalışmasını izleyin; oldukça havalı!

3. Web Verilerini Kazıyın:

• Şunu sorun: “‘https://news.example.com’ adresinden manşetleri kazı.”
• Browser tools mcp sayfayı ziyaret edecek, manşetleri (DOM verilerini kullanarak) çıkaracak ve bunları Cursor IDE'de şu şekilde döndürecektir: “İşte en son manşetler: ‘Son Dakika Haber 1’, ‘Son Dakika Haber 2’.”
• Karmaşık siteler için, hedefleri belirtin (örneğin, “‘news-title’ sınıfından manşetleri çıkar”).

Browser tools mcp, Cursor IDE'de bir otomasyon olanakları dünyası açar!

Browser tools mcp'den En İyi Şekilde Yararlanma İpuçları

Cursor IDE ile Browser tools mcp deneyiminizi geliştirmek için:

• Belirli Olun: Doğru otomasyon için kesin komutlar kullanın (örneğin, “‘submit-btn’ kimliğine sahip düğmeye tıkla”).
• İzinleri Kontrol Edin: Chrome uzantısının etkin sekmelere ve ekran yakalamaya erişimi olduğundan emin olun.
• Sunucuyu Çalışır Tutun: MCP sunucusuyla terminali kapatmayın; gerekirse yeniden başlatın.
• Özellikleri Keşfedin: Hata ayıklama için ekran görüntüsü yakalama veya günlük analizi deneyin; daha fazlası için GitHub deposunu kontrol edin!

Browser tools mcp ile Deneyimim

Cursor IDE'de Browser tools mcp ile çalışmak bir zevkti! Kurulum sorunsuzdu ve tarayıcı görevlerini otomatikleştirmek kusursuz hissettirdi. Cursor IDE'deki ekran görüntüleri ve günlükler, hata ayıklama için büyük bir yardımcı oldu. Bir sorunla karşılaşırsanız, portu (3025) ve uzantı bağlantısını doğrulayın.

Son Düşünceler: Browser tools mcp Maceranız

Browser tools mcp'yi Cursor IDE ile kurdunuz ve tarayıcı otomasyon büyüsünü açtınız! Sitelere gitmekten veri kazımaya kadar, web görevlerini kolaylıkla ele almaya hazırsınız. Daha fazla otomasyon fikri deneyin; fiyatları takip etmek veya ön uç web geliştirme görevleri gibi! Daha fazlası için browser-tools-mcp github deposunu kontrol edin. Daha iyi bir postacı alternatifi arıyorsanız Apidog'a göz atmayı ve Browser tools mcp yolculuğunuza devam etmeyi unutmayın!