@just-every/mcp-screenshot-website-fast

Web sayfalarının hızlı ve verimli ekran görüntüsü - CLI kodlama araçları için optimize edilmiş. Sayfaları otomatik olarak optimal işleme için 1072x1072 parçalara böler.

Genel Bakış

AI görüş iş akışları için özel olarak geliştirilmiş bu araç, Claude Vision API ve diğer AI modelleri tarafından optimal işleme için otomatik çözünürlük sınırlaması ve parçalama ile yüksek kaliteli ekran görüntüsü yakalar. Ekran görüntülerinin maksimum uyumluluk için 1072x1072 piksel (1.15 megapiksel) olarak mükemmel şekilde boyutlandırılmasını sağlar.

Özellikler

• 📸 Hızlı ekran görüntüsü yakalaması Puppeteer başsız tarayıcı kullanarak
• 🎯 Claude Vision optimize edilmiş otomatik çözünürlük sınırlaması ile (optimal 1.15 megapiksel için 1072x1072)
• 🔲 Otomatik parçalama - Tam sayfalar otomatik olarak 1072x1072 parçalara bölünür
• 🎬 Ekran kaydı yakalaması - Yapılandırılabilir aralıklarla zaman içinde bir dizi ekran görüntüsü kaydeder
• 🔄 Her zaman taze içerik - Önbelleğe alma yok, güncel ekran görüntüleri sağlar
• 📱 Yapılandırılabilir viewport'lar duyarlı test için
• ⏱️ Bekleme stratejileri dinamik içerik için (networkidle, özel gecikmeler)
• 📄 Tam sayfa yakalaması varsayılan olarak tam sayfa ekran görüntüleri için
• 🎥 Animasyonlu WebP dışa aktarımı - Ekran kayıtlarını yüksek kaliteli animasyonlu WebP dosyaları olarak kaydedin
• 💉 JavaScript enjeksiyonu - Ekran kaydı yakalamadan önce özel JS çalıştırın
• 📦 Minimal bağımlılıklar hızlı npm kurulumları için
• 🔌 MCP entegrasyonu sorunsuz AI iş akışları için
• 🪟 Windows uyumlu başlatıcı npm kurulu MCP kullanımı için
• 🔋 Kaynak verimli - 60 saniye hareketsizlikten sonra otomatik tarayıcı temizliği
• 🧹 Bellek yönetimi - Sayfalar sızıntıları önlemek için her ekran görüntüsünden sonra kapatılır

Kurulum

Claude Code

claude mcp add screenshot-website-fast -s user -- npx -y @just-every/mcp-screenshot-website-fast

VS Code

code --add-mcp '{"name":"screenshot-website-fast","command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}'

Cursor

cursor://anysphere.cursor-deeplink/mcp/install?name=screenshot-website-fast&config=eyJzY3JlZW5zaG90LXdlYnNpdGUtZmFzdCI6eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBqdXN0LWV2ZXJ5L21jcC1zY3JlZW5zaG90LXdlYnNpdGUtZmFzdCJdfX0=

JetBrains IDEs

Settings → Tools → AI Assistant → Model Context Protocol (MCP) → Add

"As JSON" seçeneğini seçin ve yapıştırın:

{"command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}

Raw JSON (herhangi bir MCP istemcisinde çalışır)

{
  "mcpServers": {
    "screenshot-website-fast": {
      "command": "npx",
      "args": ["-y", "@just-every/mcp-screenshot-website-fast"]
    }
  }
}

Bunu istemcinizin mcp.json dosyasına bırakın (.vscode/mcp.json, ~/.cursor/mcp.json veya Claude için .mcp.json gibi).

Ön Koşullar

• Node.js 20.x veya üstü
• npm veya npx
• Chrome/Chromium (Puppeteer tarafından otomatik olarak indirilir)

Hızlı Başlangıç

MCP Server Kullanımı

IDE'de yüklendikten sonra, aşağıdaki araçlar kullanılabilir:

Kullanılabilir Araçlar

• take_screenshot - Bir web sayfasının yüksek kaliteli ekran görüntüsünü yakalar

  • Parametreler:
    • url (gerekli): Yakalanacak HTTP/HTTPS URL'si
    • width (isteğe bağlı): Viewport genişliği piksel cinsinden (max 1072, varsayılan: 1072)
    • height (isteğe bağlı): Viewport yüksekliği piksel cinsinden (max 1072, varsayılan: 1072)
    • fullPage (isteğe bağlı): Parçalama ile tam sayfa ekran görüntüsü yakala (varsayılan: true)
    • waitUntil (isteğe bağlı): Olayı bekle: load, domcontentloaded, networkidle0, networkidle2 (varsayılan: domcontentloaded)
    • waitFor (isteğe bağlı): Ek bekleme süresi milisaniye cinsinden
    • directory (isteğe bağlı): Ekran görüntülerini kaydetmek için dizin - base64 görüntüleri yerine dosya yollarını döndürür

• capture_selector - CSS seçicisi ile eşleşen belirli bir DOM öğesinin ekran görüntüsünü yakalar

  • Parametreler:
    • url (gerekli): Yakalanacak HTTP/HTTPS URL'si
    • selector (gerekli): Yakalanacak öğe için CSS seçicisi
    • width (isteğe bağlı): Viewport genişliği piksel cinsinden (max 1072, varsayılan: 1072)
    • height (isteğe bağlı): Viewport yüksekliği piksel cinsinden (max 1072, varsayılan: 1072)
    • waitUntil (isteğe bağlı): Olayı bekle: load, domcontentloaded, networkidle0, networkidle2 (varsayılan: domcontentloaded)
    • waitForMS (isteğe bağlı): Ek bekleme süresi milisaniye cinsinden
    • selectorTimeoutMS (isteğe bağlı): Başarısız olmadan önce seçiciyi görünene kadar beklemek için süre (varsayılan: 5000)

Kullanım Örnekleri

Varsayılan kullanım (base64 görüntüleri döndürür):

take_screenshot(url="https://example.com")

Dizine kaydet (dosya yollarını döndürür):

take_screenshot(url="https://example.com", directory="/path/to/screenshots")

Belirli bir öğeyi yakala:

capture_selector(url="https://example.com", selector="#main")

directory parametresi kullanılırken:

• Ekran görüntüleri zaman damgası ile PNG dosyaları olarak kaydedilir
• Base64 verisi yerine dosya yolları döndürülür
• Parçalanmış ekran görüntüleri için her parça ayrı bir dosya olarak kaydedilir
• Dizin mevcut değilse otomatik olarak oluşturulur

take_screencast

Ekran kaydı oluşturmak için zaman içinde bir dizi ekran görüntüsü yakalar. Yalnızca viewport'un üst parçasını (1072x1072) yakalar.

Parametreler

• url (gerekli): Yakalanacak URL
• duration (isteğe bağlı): Toplam süre saniye cinsinden (varsayılan: 10)
• interval (isteğe bağlı): Ekran görüntüleri arasındaki aralık saniye cinsinden (varsayılan: 2)
• jsEvaluate (isteğe bağlı): Başlangıçta çalıştırılacak JavaScript kodu
• waitUntil (isteğe bağlı): Bekleme stratejisi: 'load', 'domcontentloaded', 'networkidle0', 'networkidle2'
• waitForMS (isteğe bağlı): Başlamadan önce ek bekleme süresi
• directory (isteğe bağlı): Animasyonlu WebP olarak dizine kaydet (her 1 saniyede bir yakalar)

Kullanım Örnekleri

Basit ekran kaydı (10 saniye boyunca 5 kare):

take_screencast(url="https://example.com")

Özel zamanlama:

take_screencast(url="https://example.com", duration=15, interval=3)

JavaScript yürütmesi ile:

take_screencast(
  url="https://example.com",
  jsEvaluate="document.body.style.backgroundColor = 'red';"
)

Animasyonlu WebP olarak kaydet:

take_screencast(url="https://example.com", directory="/path/to/output")

directory parametresi kullanılırken:

• 1 saniyelik aralıklarla animasyonlu WebP oluşturulur
• Bireysel kareler ayrıca PNG dosyaları olarak kaydedilir
• Animasyon varsayılan olarak sonsuza kadar döngü yapar
• WebP mükemmel kalite sağlar:
  • Tam renk desteği (256 renk sınırlaması yok)
  • Web animasyonları için verimli sıkıştırma
  • Gradyan arka planları ve düzgün animasyonlar için mükemmel
  • GIF ile karşılaştırıldığında daha iyi kalite ile daha küçük dosya boyutları

Geliştirme Kullanımı

Kurulum

npm install
npm run build

Ekran görüntüsü yakala

# Otomatik parçalama ile tam sayfa (varsayılan)
npm run dev capture https://example.com -o screenshot.png

# Yalnızca viewport ekran görüntüsü  
npm run dev capture https://example.com --no-full-page -o screenshot.png

# Belirli koşulları bekle
npm run dev capture https://example.com --wait-until networkidle0 --wait-for 2000 -o screenshot.png

CLI Seçenekleri

• -w, --width <pixels> - Viewport genişliği (max 1072, varsayılan: 1072)
• -h, --height <pixels> - Viewport yüksekliği (max 1072, varsayılan: 1072)
• --no-full-page - Tam sayfa yakalamasını ve parçalamayı devre dışı bırak
• --wait-until <event> - Olayı bekle: load, domcontentloaded, networkidle0, networkidle2
• --wait-for <ms> - Ek bekleme süresi milisaniye cinsinden
• -o, --output <path> - Çıktı dosyası yolu (parçalı çıktı için gerekli)

Otomatik Yeniden Başlatma Özelliği

MCP sunucusu geliştirilmiş güvenilirlik için varsayılan olarak otomatik yeniden başlatma yeteneğini içerir:

• Sunucu kilitlenirse otomatik olarak yeniden başlatır
• İşlenmeyen istisnalar ve reddedilen sözleşmeleri işler
• Üstel geri tepme uygular (1 dakika içinde maksimum 10 deneme)
• Tüm yeniden başlatma girişimlerini günlüğe kaydeder
• Kapatma sinyallerini (SIGINT, SIGTERM) zarif şekilde işler

Otomatik yeniden başlatma olmadan geliştirme/hata ayıklama için:

# Yeniden başlatma sarmalayıcısı olmadan doğrudan çalıştır
npm run serve:dev

Mimari

mcp-screenshot-website-fast/
├── src/
│   ├── internal/       # Temel ekran görüntüsü yakalaması mantığı
│   ├── utils/          # Günlükçü ve yardımcı programlar
│   ├── index.ts        # CLI giriş noktası
│   ├── serve.ts        # MCP sunucusu giriş noktası
│   └── serve-restart.ts # Otomatik yeniden başlatma sarmalayıcısı

Geliştirme

# Geliştirme modunda çalıştır
npm run dev capture https://example.com -o screenshot.png

# Üretim için derle
npm run build

# Testleri çalıştır
npm test

# Tür denetimi
npm run typecheck

# Linting
npm run lint

Bu Araç Neden?

AI görüş iş akışları için özel olarak geliştirilmiş:

1. Claude Vision API'si için optimize edilmiş - Otomatik çözünürlük sınırlaması 1072x1072 piksel (1.15 megapiksel)
2. Otomatik parçalama - Tam sayfalar AI işleme için mükemmel parçalara bölünür
3. Her zaman taze - Önbelleğe alma yok, en son içeriği alırsınız
4. MCP yerel - AI geliştirme araçları ile birinci sınıf entegrasyon
5. Basit API - Ekran görüntüleri yakalamak için temiz, basit arayüz

Katkıda Bulunma

Katkılar memnuniyetle karşılanır! Lütfen:

1. Depoyu fork edin
2. Bir özellik şubesi oluşturun
3. Yeni işlevsellik için testler ekleyin
4. Bir pull request gönderin

Sorun Giderme

Puppeteer Sorunları

• Chrome/Chromium'un indirilebileceğinden emin olun
• Güvenlik duvarı ayarlarını kontrol edin
• PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ayarlanmayı deneyin ve özel yürütülebilir sağlayın

Ekran Görüntüsü Kalitesi

• Viewport boyutlarını ayarlayın
• Uygun bekleme stratejileri kullanın
• Sitenin kimlik doğrulaması gerektirip gerektirmediğini kontrol edin

Zaman Aşımı Hataları

• --wait-for bayrağı ile bekleme süresini artırın
• Farklı --wait-until stratejilerini deneyin
• Sitenin erişilebilir olup olmadığını kontrol edin

Lisans

MIT