👨‍👩‍👧 Bu derste Bıdık'a 'tarayıcıyı kullanma' aleti verilir. MCP (Model Context Protocol), Claude Code'a dış araçlar bağlamanın standart yoludur; .mcp.json dosyasında tanımlanır ve /mcp ile bağlantısı kontrol edilir. Playwright, tarayıcıyı uzaktan kumandayla yöneten bir alettir. Kurulumda çocuğunuz komutları kopyalar. Bu dersten sonra Bıdık sadece 'düşünen' değil, 'gören' de olur.
Bu derste yapacağımız etkinlik: Bıdık'a Playwright alet çantasını kurdurun, /mcp ile bağlı olduğunu kontrol edin. Sonra Bıdık'a oyunu tarayıcıda açıp Besle/Oyna butonlarına kendi tıklamasını ve ekran görüntüsü almasını söyleyin. Siz sadece izleyin.
Modül 2 · A — Beceri Ekle · ⏱ 9 dk

Gün 3: Alet Çantası (MCP) — Bıdık'a Göz Ver

Day 3: The Toolbox (MCP) — give Bıdık eyes

Bu derste neler öğreneceksin

  • Alet çantasının (MCP) yetenek kartından farkını anlamayı
  • .mcp.json dosyasının ve /mcp komutunun ne işe yaradığını öğrenmeyi
  • Playwright aletini kurup Bıdık'ın tarayıcıyı görmesini sağlamayı
  • Bıdık'a 'git aç, dene, bana göster' deyip oyunu kendi gözüyle test ettirmeyi

Dün Beceri, Bugün Alet

Dün Bıdık’a yetenek kartları (skills) verdik. Yetenek kartı, Bıdık’a “şunu şöyle yap” diyen bir bilgi kâğıdı — Bıdık’ın aklını güçlendirir.

Bugün alet çantası (İngilizcesi: MCP) veriyoruz. Bu farklı: alet çantası, Bıdık’a gerçek dünyayı kullanma gücü verir — Bıdık’ın ellerini ve gözlerini güçlendirir. Artık sadece düşünmekle kalmayacak; görecek, tıklayacak, ekran görüntüsü alacak.

Yetenek kartı = bilgi (talimat). Bıdık’a yeni bir şey öğretir. Alet çantası = güç (alet). Bıdık’a yeni bir kabiliyet verir.

İkisi birlikte çalışır: kart aklı, alet elleri güçlendirir. İkisi birden süper kahraman yapar.

MCP Nedir? (Aletlerin Ortak Dili)

MCP, “Model Context Protocol” demek — yani “Bıdık aletlerle nasıl konuşur” kuralı. Adını ezberlemene gerek yok. Önemli olan şu:

MCP = Bıdık’ın alet çantasına yeni alet takmanın standart yolu. Tıpkı bir matkaba farklı uçlar takmak gibi: bir uç delik açar, bir uç vida sıkar. MCP sayesinde Bıdık’a “tarayıcı aleti”, “dosya aleti”, “harita aleti” gibi bir sürü alet takabilirsin.

Bugün takacağımız alet: tarayıcı gözü (Playwright).

Neden Alet Çantası Lazım?

Çünkü Bıdık “çalışıyor” dediğinde aslında sadece kendi yazdığı koda güveniyor. Ama gerçek bir yazılımcı bile yazdığı kodu test etmeden “çalışıyor” demez — tarayıcıyı açar, butonlara tıklar, sonra “tamam, gerçekten çalışıyor” der.

Bıdık de bunu yapabilmeli. Bunu sağlayan alet Playwright. Playwright, bilgisayarındaki tarayıcıyı uzaktan kumandayla kontrol etmeye yarar. Bu alet çantasına girince Bıdık kendi gözüyle oyununu test edebilir.

Playwright = tarayıcı gözü. Sen izlerken bile Bıdık tarayıcıyı açıp oyununu gezebilir, butonlara basabilir, fotoğrafını çekebilir.

Playwright Aletini Kur

Bıdık’a şunu söyle:

Playwright alet çantasını (MCP) bu projeye kur. Resmi kurulum komutunu
kullan ve .mcp.json dosyasına ekle. Kurulum bitince bana ne yapmam
gerektiğini söyle.

Bıdık sana kurulum komutunu gösterecek. Genelde şuna benzer:

● Playwright MCP'yi kuruyorum...

  .mcp.json dosyasına şunu ekledim:
  {
    "mcpServers": {
      "playwright": {
        "command": "npx",
        "args": ["@playwright/mcp@latest"]
      }
    }
  }

  ⚠ Beni yeniden başlat (önce /exit, sonra claude), aleti tanıyayım.

.mcp.json ne işe yarar? Bu dosya, Bıdık’ın alet çantasının listesi gibi: “şu alet, şu komutla çalışır” diye yazıyor. Bıdık her açıldığında bu listeye bakıp aletlerini hazırlar.

Bıdık’ı kapat-aç:

/exit

Sonra:

claude

Alet Bağlı mı? /mcp ile Kontrol Et

Bıdık açılınca, aletin gerçekten takılı olup olmadığını kontrol et. Şu komutu yaz:

/mcp

Bir liste çıkacak. İçinde playwright yazıyorsa ve yanında “connected” (bağlı) görüyorsan, hazırsın:

● MCP alet çantaların:

  • playwright   ✓ connected (bağlı)

  Bıdık artık tarayıcıyı kontrol edebilir.

Eğer “connected” yerine bir hata görürsen endişelenme. Bir büyüğünden yardım iste; birlikte .mcp.json dosyasının doğru yazıldığını kontrol edin. Bazen sadece bir kez daha kapat-aç yapmak yeterli olur.

Şimdi Dene: Bıdık Oyunu Kendi Test Etsin

İşte büyük an. Bıdık’ın artık gözleri var. Ona şunu söyle:

Playwright aletini kullanarak oyunumu tarayıcıda aç. Şunları yap:
1. "Besle 🍖" butonuna üç kez tıkla ve Açlık çubuğunun azaldığını gör.
2. "Oyna 🎾" butonuna iki kez tıkla ve Mutluluk çubuğunun arttığını gör.
3. Her adımda ekran görüntüsü al.
Sonra bana ne gördüğünü ve çubukların doğru çalışıp çalışmadığını anlat.

İzle. Bıdık:

  1. Tarayıcıyı açacak.
  2. Oyunun adresine gidecek.
  3. “Besle” butonuna kendisi tıklayacak (sen değil!).
  4. Açlık çubuğunun azaldığını görecek.
  5. “Oyna” butonuna tıklayacak, mutluluğun arttığını görecek.
  6. Her adımda ekran görüntüsü alacak.
  7. Sana “işte gördüklerim, çubuklar doğru çalışıyor” diye rapor verecek.

Sen hiçbir yere tıklamadan oturup izleyeceksin. Bıdık her şeyi kendisi yapıyor.

İşte bu an: Bıdık’ın artık gözleri var. Sen sadece izliyorsun, o çalışıyor ve test ediyor.

Bıdık Görsel Hata da Bulur

Bıdık artık ekranı gördüğü için görsel hataları da yakalayabilir. Şunu dene:

Ekran görüntülerine dikkatlice bak. Şu görsel hatalar var mı kontrol et:
beyaz yazı-beyaz arka plan (görünmez yazı), ekrandan taşan öğeler,
çok küçük butonlar, üst üste binen yazılar. Bulursan düzelt.

Bıdık kendi gözüyle gördüğü için gözden kaçan hataları bile yakalar.

İnsanın kaçırdığı hatayı robot yakalar. Alet çantası vermek bu yüzden bu kadar önemli.

Kontrol Noktası ✅

  • Playwright MCP’yi kurdum; .mcp.json dosyası oluştu.
  • /mcp yazdım, playwright’ın “connected” olduğunu gördüm.
  • Bıdık oyunu tarayıcıda kendi açtı, butonlara kendi tıkladı.
  • Bıdık ekran görüntüsü alıp bana çubukların çalıştığını rapor etti.

Bugün Ne Öğrendin?

  • Alet çantası (MCP), Bıdık’a gerçek dünyayı kullanma gücü verir.
  • .mcp.json aletlerin listesi; /mcp ile bağlı olup olmadıklarını kontrol edersin.
  • Playwright, Bıdık’ın tarayıcıyı kontrol etmesini (gözleri) sağlar.
  • Bıdık artık “çalışıyor” demek yerine kendi gözüyle test edebilir.

Ebeveyn Notu

MCP (Model Context Protocol), Claude Code’a dış araçlar (tarayıcı, veritabanı, dosya sistemleri, API’ler) bağlamanın standart yoludur. Bu derste Playwright ile Bıdık’a tarayıcı kontrolü kazandırılır — yapay zekânın yalnızca “üretmesi” değil “doğrulaması” da kritik bir adımdır. Çocuğunuz, “iddia” ile “kanıt” arasındaki farkı somut olarak görür: Bıdık artık sözünü ekran görüntüleriyle ispatlar. Kurulumda sorun yaşarsanız, sırf kavramı (Bıdık’ın artık görebildiğini) anlamak bile değerlidir.

Etkinlik (Elle Yapılacak)

Bıdık oyunu gezip ekran görüntüleri aldıktan sonra, bir A4 kağıda iki sütun çizin:

  • Sol sütun — “Bıdık’ın gördüğü”: Ekran görüntülerinde fark ettiği her şey (çubuk azaldı, buton çalıştı, renk uyumlu).
  • Sağ sütun — “Bıdık’ın düzelttiği”: Bir hata bulduysa nasıl çözdüğü.

Bu kağıt, çocuğunuzun gözlem → analiz → düzeltme döngüsünü kavramasına yardımcı olur — yazılımcıların her gün kullandığı döngü.

Yarın

Bıdık artık kuralları biliyor (R), yetenek kartı aldı (A), alet çantası var (A). Yarın son bir güç daha: yardımcı robotlar (agents ve subagents). Bıdık büyük bir işi tek başına yapmak yerine, küçük yardımcılar çağırıp işi paylaştıracak — tıpkı bir takım kaptanı gibi!