Agentation ile sitene tıklayarak revize ver

Repo linkini Claude Code'a ver ve kurmasını iste:

https://github.com/benjitaylor/agentation reposunu bu projeye kurmak istiyorum.

1. Önce yeni bir branch aç (ör. feat/agentation), main'e dokunma.
2. Paketi geliştirme bağımlılığı olarak kur: npm install agentation -D
3. <Agentation /> bileşenini uygulamanın en dış layout'una ekle, ama yalnız geliştirme ortamında görünsün (process.env.NODE_ENV === "development").
4. Değişiklikleri göster, sonra commit'le. Push etme.
5. Geliştirme sunucusunu başlat ve açmam gereken lokal linki ver.

Kendin yapmak istersen terminalde:

npm install agentation -D

Sonra bileşeni layout'a ekle. Next.js App Router'da bu app/layout.tsx (benim projemde app/[locale]/layout.tsx):

import { Agentation } from "agentation";

// ...
      <body>
        {children}
        {process.env.NODE_ENV === "development" && <Agentation />}
      </body>

Vite ya da Create React App gibi bir projede App bileşeninin en sonuna koy. Bileşen kendi içinde "use client" taşıdığı için Next.js'te sunucu layout'una doğrudan eklenebiliyor, ayrı bir sarmalayıcı gerekmiyor.

Bende Claude önce hangi projeye kuracağını sordu, ardından yeni bir branch açmayı teklif etti. Kurulum, layout'a eklenen iki satır ve paketin kendisinden ibaretti.

Geliştirme sunucusunu başlat (npm run dev) ve Claude'un verdiği linki tarayıcıda aç. Next.js'te genelde http://localhost:3000.

Sayfanın sağ alt köşesinde küçük bir ikon göreceksin. Bu Agentation'ın araç çubuğu. Görmüyorsan sunucunun geliştirme modunda çalıştığından emin ol; npm run build && npm start ile açtığın sürümde çubuk bilerek gizli.

1. Sağ alttaki ikona tıkla (ya da Ctrl+Shift+F, Mac'te ⌘⇧F). Geri bildirim modu açılıyor.
2. Değiştirmek istediğin öğenin üstüne gel. Agentation öğenin etrafını çiziyor ve hangi bileşen olduğunu gösteriyor.
3. Tıkla, açılan kutuya notunu yaz, Add'e bas.
4. Diğer notlar için tekrarla. Her not sayfada numaralı bir işaret olarak kalıyor.

Ben dec5.tech'in ana sayfasına şu üç notu bıraktım:

• Header'daki üç link (Yazılar, Hakkımda, Instagram): "bu 3'lü sol tarafa, logoya yanaşsın"
• Dil seçici (TR EN): "TR EN ülke bayrağı olsun"
• Yazılar bölümünün başlığı: "bu başlık tüm satıra yayılsın"

Birden fazla öğeyi aynı anda seçmek için Ctrl'ye (Mac'te ⌘) basılı tutarak tıkla ya da sürükleyerek bir alan seç. Boş bir alanı işaretlemek de mümkün: "buraya bir buton gelsin" gibi notlar için.

Notların bitince çubuktaki Copy Feedback butonuna bas (ya da C tuşu). Panoya şuna benzer bir metin kopyalanıyor:

## Page Feedback: /tr
**Viewport:** 1280×633

### 1. <Header> hidden items
**Location:** .fixed > .mx-auto > .hidden
**React:** <Header>
**Feedback:** bu 3 lü sol tarafa logoya yanaşsın

### 2. <Header> flex items
**Location:** .fixed > .mx-auto > .flex
**React:** <Header>
**Feedback:** TR EN ülke bayrağı OLSUN

Bunu Claude Code'a olduğu gibi yapıştır. İstersen başına bir iki cümle ekle:

Aşağıdaki notları Agentation ile sayfa üzerinde bıraktım. Her notu Location ve React bileşeni bilgisine göre ilgili dosyada uygula. Bitince hangi dosyada neyi değiştirdiğini madde madde yaz ve tarayıcıda kontrol etmem gereken bir şey varsa söyle.

[buraya Copy Feedback çıktısını yapıştır]

Aynı üç değişikliği elle anlatmaya kalksaydım "header'da logonun sağındaki üç linki sola, logonun yanına al" gibi cümleler kuracaktım. Bir bölümün ortasındaki bir yazının fontunu "2 piksel küçült" demek için ise neresi olduğunu tarif etmek neredeyse imkânsız. Agentation'ın çıktısında her not bileşen adı ve CSS adresiyle geliyor; tarif gerekmiyor.

Bende Claude üç notu bir buçuk dakika civarında uyguladı ve tip kontrolü ile lint'in hatasız geçtiğini söyledi:

1. Header'daki üç link logonun yanına alındı.
2. TR / EN yazısı Türkiye ve İngiltere bayraklarıyla değişti.
3. Yazılar başlığı satırın tamamını kaplayacak şekilde genişletildi.

Sayfayı yenile, değişikliklere bak. Beğenmediğin bir şey varsa aynı yöntemle yeni bir not bırak ve tekrar kopyala. Beğendiysen branch'i main'e birleştir; beğenmediysen branch'i sil, ana proje hiç değişmemiş olur.

Her seferinde kopyalayıp yapıştırmak istemezsen Agentation'ı Claude Code'a MCP üzerinden bağlayabilirsin. Notlar o zaman doğrudan Claude'a gidiyor.

Claude Code'a sunucuyu ekle:

claude mcp add agentation -- npx -y agentation-mcp server

Claude Code'u kapatıp yeniden aç. Sonra bileşene sunucunun adresini ver:

{process.env.NODE_ENV === "development" && <Agentation endpoint="http://localhost:4747" />}

Bağlantıyı denemek için sayfaya bir test notu bırak ve Claude'a şunu sor:

Agentation'daki bekleyen notları oku (agentation_get_all_pending). Notun tam metnini ve hangi sayfada bırakıldığını yaz; sonra notu uygula.

Not gelmiyorsa npx agentation-mcp doctor komutu sunucunun çalışıp çalışmadığını gösterir. Bileşendeki adresle sunucunun portunun (varsayılan 4747) aynı olduğundan emin ol.