Claude Code ile MCP server'lar

MCP (Model Context Protocol) server’lar ekleyerek Claude Code’un yeteneklerini genişletebilirsiniz. Bu server’lar uzaktan veya yerel olarak makinenizde çalışır ve Claude’a normalde sahip olmayacağı yeni tool ve yetenekler sağlar.

En popüler MCP server’lardan biri, Claude’a bir web tarayıcısını kontrol etme yeteneği veren Playwright’tır. Bu, web geliştirme iş akışları için güçlü olanaklar sunar.

Playwright MCP Server’ını Kurma

Playwright server’ını Claude Code’a eklemek için terminal’inizde (Claude Code’un içinde değil) şu komutu çalıştırın:

claude mcp add playwright npx @playwright/mcp@latest

Bu komut iki şey yapar:

• MCP server’a “playwright” adını verir
• Server’ı makinenizde yerel olarak başlatan komutu sağlar

İzinleri Yönetmek

MCP server tool’larını ilk kullandığınızda Claude her seferinde izin isteyecektir. Bu izin istemlerinden bıkarsanız, settings’inizi düzenleyerek server’ı önceden onaylayabilirsiniz.

.claude/settings.local.json dosyasını açın ve server’ı allow array’ine ekleyin:

{
  "permissions": {
    "allow": ["mcp__playwright"],
    "deny": []
  }
}

mcp__playwright içindeki çift alt çizgilere dikkat edin. Bu, Claude’un her seferinde izin istemeden Playwright tool’larını kullanmasına olanak tanır.

Pratik Örnek: Component Üretimini İyileştirme

İşte Playwright MCP server’ın geliştirme iş akışınızı nasıl iyileştirebileceğine dair gerçek dünyadan bir örnek. Prompt’ları manuel olarak test edip ince ayar yapmak yerine, Claude’a şunları yaptırabilirsiniz:

1. Bir tarayıcı açıp uygulamanıza gitsin
2. Test bir component üretsin
3. Görsel stili ve kod kalitesini analiz etsin
4. Gözlemlerine göre üretim prompt’unu güncellesin
5. İyileştirilmiş prompt’u yeni bir component ile test etsin

Örneğin, Claude’dan şunu isteyebilirsiniz:

“localhost:3000’e git, temel bir component üret, stili gözden geçir ve ileriye dönük daha iyi component’lar üretmek için @src/lib/prompts/generation.tsx adresindeki üretim prompt’unu güncelle.”

Claude, uygulamanızla etkileşime girmek için tarayıcı tool’larını kullanır, üretilen çıktıyı inceler ve ardından daha özgün ve yaratıcı tasarımları teşvik etmek için prompt dosyanızı değiştirir.

Sonuçlar ve Faydalar

Pratikte, bu yaklaşım önemli ölçüde daha iyi sonuçlara yol açabilir. Genel mor-mavi gradyanlar ve standart Tailwind kalıpları yerine, Claude şunları teşvik etmek için prompt’ları güncelleyebilir:

• Sıcak gün batımı gradyanları (turuncu-pembe-mor)
• Okyanus derinliği temaları (teal-zümrüt-camgöbeği)
• Asimetrik tasarımlar ve örtüşen elemanlar
• Yaratıcı boşluk ve alışılmadık düzenler

Temel avantaj, Claude’un sadece kodu değil, gerçek görsel çıktıyı görebilmesidir; bu da stil iyileştirmeleri hakkında çok daha bilinçli kararlar vermesine olanak tanır.

Diğer MCP Server’ları Keşfetmek

Playwright, MCP server’larla mümkün olanın yalnızca bir örneğidir. Ekosistem şunlar için server’lar içerir:

• Database etkileşimleri
• API testi ve izleme
• File system operasyonları
• Cloud servis entegrasyonları
• Geliştirme tool’u otomasyonu

Spesifik geliştirme ihtiyaçlarınızla uyumlu MCP server’larını keşfetmeyi düşünün. Claude’u bir code assistant’tan, tüm tool zincirinizle etkileşime girebilen kapsamlı bir geliştirme ortağına dönüştürebilirler.