MCP

MCP (Model Context Protocol), yapay zeka uygulamalarını dış sistemlere bağlamak için açık bir standarttır.¹ Bir sunucu bağladığınızda ajan o sistemin araçlarını kendisi çağırır: Figma'dan tasarımı okur, tarayıcıyı sürer, çalışan dev sunucusundan hataları alır. Sizin sohbete yapıştırdığınız bilgiyle yetinmez.

Ne zaman bağlamalı? Claude Code dokümanının ölçütü basit: bir araçtan sohbete sürekli veri kopyalıyorsanız (issue takipçisi, izleme paneli) o aracı bağlayın.²

Sunucu nasıl bağlanır?

Claude Code'da uzak sunucu URL ile, yerel sunucu bir komutla eklenir (-- işaretinden sonrası sunucunun komutudur):²

claude mcp add --transport http figma https://mcp.figma.com/mcp
claude mcp add --transport stdio playwright -- npx @playwright/mcp@latest

Cursor'da aynı iş .cursor/mcp.json (proje) veya ~/.cursor/mcp.json (tüm projeler) dosyasıyla yapılır:³

{
  "mcpServers": {
    "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] },
    "figma": { "url": "https://mcp.figma.com/mcp" }
  }
}

• Ekiple paylaşın: Claude Code'da --scope project ile eklenen sunucu proje köküne .mcp.json yazar, commit edin. Claude Code projeden gelen sunucuları kullanmadan önce sizden onay ister.²

• Yönetin: Claude Code'da /mcp sunucuların durumunu gösterir, OAuth girişi de buradan yapılır.² Cursor'da sunucuyu Customize sayfasından açıp kapatırsınız, hata ayıklamak için "MCP Logs"a bakın.³

Üç frontend sunucusu

Figma

Figma'nın önerdiği yol uzak sunucu.⁴ En kolay kurulum, MCP ayarını ve hazır skill'leri birlikte getiren eklenti: Claude Code'da claude plugin install figma@claude-plugins-official, Cursor'da /add-plugin figma. İlk kullanımda OAuth ile giriş yaparsınız.⁴ Figma MCP'ye yalnızca Figma'nın MCP kataloğundaki istemciler bağlanabilir (Claude Code, Cursor ve VS Code listede).⁴

• Uzak sunucuda tasarım bağlantıyla verilir: Figma'da çerçevenin veya katmanın bağlantısını kopyalayıp ajana yapıştırın. Seçime göre çalışma yalnızca masaüstü sunucuda var.⁴, ⁵

• Çıktı varsayılan olarak React ve Tailwind gelir. Promptla değiştirebilirsiniz: "Bu çerçeveyi src/components/ui içindeki bileşenlerle uygula, Tailwind kullan."⁵

• get_variable_defs tasarımdaki renk, boşluk ve tipografi değişkenlerini verir. Çok büyük çerçevelerde get_metadata önce sade bir özet çıkarır, ajan sonra parça parça get_design_context çağırır.⁵

• Code Connect kurarsanız ajan sıfırdan bileşen yazmak yerine kod tabanınızdaki gerçek bileşenleri kullanır.⁵

Playwright

Microsoft'un Playwright sunucusu tarayıcıyı ajana verir. Ekran görüntüsüyle değil, sayfanın erişilebilirlik ağacıyla (snapshot) çalışır, bu yüzden görsel modele gerek kalmaz.⁶ Ajan eylemleri snapshot'taki referanslarla yapar, ekran görüntüsüne bakarak işlem yapamaz.⁶

• Frontend senaryosu: "Dev sunucusunu 375 px genişlikte aç, sepet formunu doldur, konsolda hata var mı bak." Bunun için browser_resize, browser_fill_form ve browser_console_messages araçları var.⁶ Karanlık mod gibi durumlar için browser_emulate_media da var.⁶

• Varsayılan olarak tarayıcı profili kalıcıdır, oturum açtığınız siteler hatırlanır. --isolated profili yalnızca bellekte tutar.⁶

Next.js DevTools

Next.js 16 ve sonrasında dev sunucusu /_next/mcp adresinde kendi MCP uç noktasını açar (varsayılan açık). next-devtools-mcp paketi bu uç noktaya bağlanır.⁷ Yapılandırma:⁷

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

• get_errors build, çalışma zamanı ve hydration hatalarını kaynak haritalı stack'le verir. Örnek: "Sayfadaki hataları düzelt" dediğinizde ajan hatayı kendisi okur.⁷

• get_routes rotaları, get_compilation_issues ve compile_route derleme sorunlarını verir. Ajan düzenleme sırasında next build çalıştırmak yerine dev sunucusundan kontrol edebilir.⁷

• get_page_metadata gibi bazı araçlar, sayfanın tarayıcıda açık olmasını gerektirir.⁷

• Next.js'in next-dev-loop gibi skill'leri /_next/mcp'yi doğrudan çağırır, yani bunlar için ayrıca MCP kurmanız gerekmez.⁷

• Oturum açılmış kalıcı profille Playwright'a rastgele siteler gezdirmek bu üçlüye yaklaşır. Gezintiyi localhost'la sınırlayın, gerekirse --isolated kullanın. README, --allowed-origins'in güvenlik sınırı olmadığını söylüyor.⁶

• Yalnızca güvendiğiniz kaynaklardan kurun. Sunucuya mümkün olan en dar yetkiyi verin. Claude Code dokümanı örnek olarak veritabanı sunucusuna salt okunur kullanıcı vermeyi öneriyor.², ³

• Araç onaylarını ezbere vermeyin. Cursor varsayılan olarak her MCP aracı için onay ister.³

• Kullanmadığınız sunucuyu kapatın: her sunucu bağlama araç ekler.², ³

Kendin dene

1. Next.js projenizde next-devtools-mcp'yi bağlayın, dev sunucusunu çalıştırıp sayfaya kasıtlı bir hydration hatası ekleyin. Ajana "sayfadaki hataları düzelt" deyin.

2. Figma eklentisini kurun, bir bileşen çerçevesinin bağlantısını verip "src/components/ui bileşenleriyle uygula" deyin. Sonra aynı işi bağlantısız, açıklamayla isteyip farkı karşılaştırın.

3. Playwright sunucusuyla uygulamanızı dar ekranda açtırıp formu doldurtun. Sonra /mcp (Claude Code) veya Customize (Cursor) üzerinden hangi sunucuları gerçekten kullandığınıza bakıp kullanmadığınızı kapatın.