Bölüm 2

AI coding tool'ları nasıl çalışır?

Hepsinin altında aynı yapı var: LLM + dosyalarınıza erişebilen agent + tool çağrıları.

Popüler olanlar: Cursor, Claude Code, Antigravity, GitHub Copilot, Codex.

Bölüm 3

MCP nedir, nasıl çalışır, neden önemli?

Model Context Protocol — LLM'lere harici araçlara ve verilere bağlanma yeteneği kazandıran bir standart. Beyin (LLM) ile el (tool'lar) arasındaki portu.

Herkes şu ara MCP'lerden konuşuyor, çünkü bunlar agentic AI'ın standardı oldular. Bir kere yazılan tool, 20+ farklı editörde çalışır hale geldi.

Bölüm 4a · Cursor

Cursor'a plugin ile MCP ekleme

Cursor Settings → Tools & MCP → katalogtan tek tık, veya "New MCP Server" ile JSON yapıştır.

Bölüm 4b · Antigravity

Antigravity'e config.json ile MCP ekleme

Antigravity'de tek tık katalog yok — mcp_config.json dosyasına elle ekliyoruz. Format Cursor ile aynı.

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"],
      "env": { "CONTEXT7_API_KEY": "ctx7sk_..." }
    }
  }
}

Bölüm 4c

Genel kurulum mantığı: tool değişse de fikir aynı

Her client'ta aynı şema: command, args, env ya da server için url + headers. Sadece dosya konumu ve üst anahtar değişir.

Takıldığında en hızlı çözüm: config'i ve hata mesajını LLM'e yapıştırıp "bu Antigravity'de nasıl çalışır?" diye sormak.

Bölüm 5a · context7

context7 — LLM'in eski bilgisini tazeleme

Prompt'a "use context7" eklediğiniz an, LLM Next.js 16 / Tailwind v4 gibi güncel dokümanları canlı çeker — Resolve Library Id ve Query Docs tool'ları art arda çalışır.

Bölüm 5b · figma

figma — Tasarımdan koda

Figma frame link'ini prompt'a yapıştırın, MCP frame'i okur — LLM tahmin etmez, kopyalar.

Bölüm 5c · playwright

playwright — Browser automation ve UI doğrulama

Agent kendi yazdığı sayfayı gerçek tarayıcıda açar, tıklar, test eder, screenshot alır — hatayı gözüyle görür.

Bölüm 6a

İlk prompt neleri içermeli?

Ne, neden, kim için, hangi stack — bu dört sorunun cevabı ilk prompt'ta olmalı. Agent'ın tüm dünyası burada kurulur.

# İYİ BİR İLK PROMPT
Next.js 16 App Router projesi kuralım.

Proje: AnkaraCafe — Ankara'daki kahve dükkanlarını listeleyen rehber.
Kullanıcı: ana sayfada mekanları görür, detay sayfasında menü ve fotoğraflar.

Stack:
  - Next.js 16 (App Router, Server Components)
  - Tailwind CSS v4 + shadcn/ui
  - TypeScript strict mode

use context7 — güncel Next.js 16 pattern'leriyle yaz.

Bölüm 6b

İteratif ilerleme: küçük adımlar, sık review

"Tüm uygulamayı yaz" prompt'u, çoğu zaman hiçbir şeyini beğenmediğiniz bir çıktı verir. Tek bir adım yazdır, onayla, bir sonrakine geç — agent da zaten adım adım ilerliyor.

Bölüm 6c

AI hata yaptığında ne yaparız?

Kovalamayın — context kirlenir, agent kendi hatalarının üzerine inşa etmeye başlar. Doğru hamle: geri al, context temizle, daha dar bir prompt'la yeniden başla.

Önemli değişikliklerden önce her zaman commit — güvenli geri dönüş noktanız olsun.

Bölüm 6d

MCP'leri prompt'tan nasıl çağırırız?

Teoride LLM kendi seçer, pratikte bazen dürtmek gerekir. Niyetinizi ya da tool adını açıkça belirtin.

# context7
"Next.js 16 Server Actions nasıl yazılır? use context7"

# playwright
"Playwright ile localhost:3000'i aç ve login formunu test et"

# figma
"Şu Figma frame'ini component'e çevir: https://figma.com/..."

Bölüm 7

Neden Vercel? Alternatifler neler?

Vercel, Next.js'i yazan ekibin ürünü — GitHub'a push ettiğiniz an canlıya çıkıyor, free tier cömert. Alternatifler: Netlify, Cloudflare Pages, Railway / Render / Fly.io.

Bölüm 8a · Hands-on

GitHub hesabı açmak ve yeni repo oluşturmak

github.com/signup → hesap açın. Sonra sağ üst + → New repository → repo adı, private, README + Node .gitignore template → Create.

Bölüm 8b · Hands-on

Vercel hesabı açmak ve GitHub'a bağlamak

Vercel'de New Project → Import Git Repository altındaki Continue with GitHub → OAuth authorize. Bağlantı kurulduğunda Vercel repo'larınızı görebiliyor.

Bölüm 8c · Hands-on

Cursor'ı açmak ve gerekli MCP'leri kurmak

Proje klasörünü Cursor'da açın → context7 ve Vercel MCP yüklü olsun → agent'a "bu klasöre Next.js projesi kur" deyin, iş başlıyor.

Bölüm 8d · Hands-on

İyi bir ilk prompt ile proje iskeletini kurmak

6a'daki prensipleri kullanarak ilk prompt'u yazıyoruz — ne, neden, kim için, stack + use context7.

Bölüm 8e · Hands-on

.gitignore, .env ve secrets yönetimi

create-next-app iyi bir .gitignore veriyor — ama .env.local'ı listede gördüğünüzden emin olun. Asla commit'lemeyin.

# .gitignore — bunlar mutlaka olmalı
node_modules/
.next/
.env
.env.local
.env*.local
.vercel

# .env.local — local için, commit ETMEYİN
OPENAI_API_KEY=sk-...

# .env.example — şablon, commit edilir
OPENAI_API_KEY=

Bölüm 8f · Hands-on

Geliştirme döngüsü: prompt → kod → çalıştır → düzelt

npm run dev → tarayıcıda localhost:3000 → küçük istek → yenile → hata varsa chat'e yapıştır. Tarayıcı, terminal, kod ve chat — hepsi aynı anda.

Bölüm 8g · Hands-on

Repo'yu GitHub'a publish etmek

Cursor Source Control panelinden initial commit → push. Birkaç saniye sonra GitHub repo'nuzda tüm dosyalar hazır.

Bölüm 8h · Hands-on

Vercel'de canlıya çıkmak

vercel.com/new → repo'yu seç → framework otomatik: Next.js → Deploy → 1-2 dakika → 🎉 canlı URL.

Bölüm 8i · Hands-on

Environment variable'ları Vercel'e taşımak

Local'deki .env.local canlıda otomatik gelmez — Vercel Settings → Environment Variables ekranından ya da vercel env CLI ile ekliyoruz.

Bölüm 9a · Maliyet

AI tool maliyetleri

İki kalem var: editör aboneliği (Cursor Pro $20/ay, Claude Pro $20/ay) ve API token kullanımı (değişken, kullanıma göre).

Tavsiye: Cursor Pro + usage limit belirlemek en güvenlisi — limiti aşmadan uyarı alırsınız.

Bölüm 9b · Maliyet

Vercel free tier sınırları

Hobby plan şaşırtıcı cömert: sınırsız static request, 100GB bandwidth/ay, preview deployment'lar, custom domain — kişisel projeler için yıllarca yeter.

Pro'ya geçiş noktası: ticari kullanım, takım üyeliği veya yüksek trafik. Hobby plan ticari kullanım için izinli değil.

Bölüm 9c · Maliyet

MCP'lerin gizli maliyetleri

Her MCP çağrısı ekstra token yiyor — tool açıklamaları system prompt'a girer, dönen veriler context'i şişirir, agent döngüleri doğrusal artar.

Önerim: sadece aktif kullandığınız MCP'leri açık tutun. context7 hep açık kalabilir; playwright'ı sadece test yazarken.