Başlangıç

PinAppAI, AI ile inşa edilmiş siteler için değişiklik talebi katmanıdır. AI sayfayı yapar; reviewer’lar neyin değişmesi gerektiğini gösterir; AI geliştirme ajanın yapısal, locator hassasiyetinde bir change request alır, Slack screenshot’ı değil. Bu sayfa ilk oturumu uçtan uca anlatır.

PinAppAI MCP-first çalışır: aşağıdaki her adımın en hızlı yolu, Claude Code, Codex, Cursor, Continue veya MCP bilen herhangi bir ajanın içinde çalıştırdığın bir PinAppAI workflow’udur. Her adımın MCP’siz bir alternatifi de var (admin UI + kopyala-yapıştır prompt’lar). Onlar yedek yol, ana yol değil.

1. Hesap oluştur

app.pinappai.com’a kaydol. Ücretsiz plan 3 projeyi sınırsız reviewer ile destekler: tüm akışı değerlendirmek için yeterli.

Gerisini panel adım adım gösteriyor

Kaydolduktan sonra panelinde bir kurulum listesi belirir: proje oluştur, siteni reviewer’lara aç, kodlama ajanını bağla, ilk change request’in gelişini gör, ilk apply’ını çalıştır. Hiçbir kutuyu kendin işaretlemezsin; ürün her adımın gerçekleştiğini gördükçe adım kendini tamamlar (projen var, review linkin açıldı, bir pin geldi). Son adımı bitirdiğinde kart tamamen kalkar.

Liste bu rehberin aynası: beş adımı aşağıdaki 2-5 bölümlerine denk gelir. İkisinden birini izle; aynı yerde buluşurlar.

2. AI ajanını bağla ve setup’ı çalıştır

İki komut (Claude Code, Codex CLI, Cursor, Claude Desktop, Continue dahil tüm AI client’lar için aynı):

npx @pinappai/mcp install   # makinendeki her AI client config’ine MCP sunucu girişini yazar
npx @pinappai/mcp login     # tarayıcıyı açar, makineye özel anahtarı üretir ve yerel olarak kaydeder

AI client’ını yeniden başlat, sonra şunu çalıştır:

AI client’ın	Nasıl çalıştırılır
Claude Code	/pinappai:setup-project yaz
Codex	Şunu iste: “pinappai setup-project workflow’unu çalıştır”
Continue (agent mode)	/setup-project yaz
Cursor	/ yaz ve menüden seç
Claude Desktop	+ menüsü, sonra pinappai, sonra setup-project
Diğer her ajan	Codex gibi, düz metinle iste

Aşağıdaki her workflow aynı şekilde çalıştırılır; yalnızca adı değişir. Tam tablo: Workflow nasıl çalıştırılır. Buradan sonraki örnekler Claude Code sözdizimini kullanıyor.

Bu tek komut kurulumun tamamını yürütür: workspace + projeyi oluşturur, izin verilen origin’leri ayarlar, widget snippet’ini framework’ün için en idiyomatik yere gömer (Astro, Next.js, SvelteKit, Eleventy, Hugo, WordPress, düz HTML), sıfır kurulumlu review linkini önerir, reviewer’larını davet eder ve sonraki turları iterasyon-aware yapan .pinappai/ klasörünü başlatır. Sen açıkça onaylamadan hiçbir şey commit edilmez: her çalıştırma a/b/c/d landing chooser ile biter.

CI / headless? login’i atla, MCP’yi başlatan ortamda PINAPPAI_API_KEY=ppk_… env değişkenini ayarla. Anahtarı app.pinappai.com/api-keys’den üret. Temiz revoke için makineye göre adlandır.

MCP yok mu? Manuel yol

Admin’de + Yeni proje’ye tıkla; bir slug (URL kimliği, örn. acme-marketing), bir ad ve izin verilen origin’lerini gir (http://localhost:3000 ile başla, staging / production’ı sonra ekle). Sonra Add to your site → Show snippet, embed & remove prompts’a tıkla ve tek satırlık <script> etiketini paylaşılan bir layout’a (base layout, kök şablon, footer partial) bir kez yapıştır; tüm public sayfalarda otomatik yüklenir:

<script src="https://api.pinappai.com/widget.js"
        data-project="pk_projeAnahtarın" defer></script>

Yerleştirmeyi AI yapsın ama MCP istemiyor musun? Aynı modaldaki AI için embed prompt’unu kopyala’ya tıkla ve repo erişimi olan herhangi bir ajana yapıştır.

Her iki yolda da: dev sunucunu yenile, herhangi bir sayfayı aç; sağ alt köşede üç yüzen düğme görmelisin. Widget bu.

3. Kimin feedback bırakabileceğine karar ver

Varsayılan olarak yalnızca davetli reviewer’lar + workspace üyeleri gönderebilir. Widget ilk yorumda e-posta-OTP modal’ı gösterir; e-posta davet listesinde olmalı. setup-project workflow’u yürüyüş sırasında reviewer e-postalarını sorar; sonradan istediğin kadar ekleyebilirsin.

İki seçenek:

• Reviewer’ları açıkça ekle: Projects → proje satırındaki Reviewers → Add reviewer → e-postayı gir. Her davetli için tekrarla.
• Açık erişim’i AÇ: Projects → proje satırındaki Settings → Open access kutusunu işaretle. Sayfaya ulaşan herkes doğrulayıp gönderebilir. Public beta testleri için tavsiye edilir, production için kapalı tutulmalı.

Bir Site origin tanımlarsan reviewer’ların sitende widget’a bile ihtiyacı kalmaz: review.pinappai.com/p/<projen>/ üzerinden sıfır kurulumla işaretlerler (review linki nasıl çalışır). Kendi oturum açık sekmesini tercih eden reviewer’lar reviewer Chrome eklentisini kullanabilir; aynı pin’ler, aynı akış.

Kendin test et: dev sayfanı aç, yüzen düğmeye tıkla, kendi e-postanı yaz, gelen kutundan 6 haneli kodu yapıştır, yorum bırak. Pin’in admin dashboard’una birkaç saniye içinde düşmesi gerekir.

4. Bir AI-diff incelemesi çalıştır

İçerik yenilemesi veya redesign sonrası, reviewer’ların 4.000 kelimelik diff’i göz gezdirmesini istemezsin. Her değişiklik üstüne ayrı ayrı karar vermelerini istersin.

Şunu çalıştır:

/pinappai:generate-changes-page

Ajan son commit’leri okur, anlamlı değişiklikleri özetler, framework’ün için doğru yola tek dosyalık self-contained bir /changes/ HTML dosyası yazar ve maddelerini API’ye kaydeder. Buna yalnızca ilk sayfa için (veya bağımsız bir rewrite incelemesi için) ihtiyacın var. Sonrasında apply workflow’u her turdan sonra /changes/’i otomatik yeniler.

MCP’siz yedek yol: Add to your site modal’ını aç ve Copy AI diff prompt’a tıkla, ya da hazır prompt’u dashboard’un InReview sekmesinden al (Copy /changes/ prompt) ve ajanına yapıştır.

Commit’le, deploy et ve /changes/’i ziyaret et. Her değişiklik için Before / After kartlarını ✓ Approve / ✗ Reject / ↻ Request change düğmeleriyle, sağ altta da işleyen bir karar sayacıyla göreceksin:

Reviewer’lar ayrıca herhangi bir kaynak sayfayı (/pricing/, /features/...) ziyaret edebilir ve sağ altta o sayfayı hedef alan değişiklikleri bağlamda incelemeyi öneren bir chip görebilir. Uygulanan her değişiklik, numaralı pin’iyle yerinde vurgulanmış halde:

Chip’e tıklamak sayfa-üstü inceleme panelini açar: her değişikliği sayfada çerçeveler, tek tek gezdirir. Aynı karar düğmeleri ve pin’in orijinal yorumu bir tık uzakta:

Tam anlatım (sayfalar arası gezinme, deep link’ler ve kararların sonraki AI iterasyonuna nasıl beslendiği) AI-diff review (/changes/ akışı) bölümünde.

5. Döngüyü Apply ile kapat

Buradan sonrası basit bir ritim: reviewer’lar canlı sitede change request pin’ler, her biri dashboard’undaki Inbox’a numaralı bir CR olarak düşer (#41, #42, …) ve tek komut hepsini işler:

/pinappai:apply

Ajan kaynağını düzenler (yeni uygulamalar, redler için geri almalar, değişiklik istekleri için yeni metinler), /changes/’i yeniden üretir ve turu kaydeder: uygulanan her CR karar için InReview’a taşınır. Her turda aynı komut. Tam durum modeli iterasyon döngüsünde; diğer workflow’lar (analyze, summarize, audit-review, auth-help, reset-project) MCP referansında.

6. Masaüstü uygulamasını mı tercih edersin?

Reviewer’ların tarayıcı sekmesini açık tutmadan feedback bırakmasını istersen (saatlerce deploy edilmiş bir siteyi inceleyen tasarımcılar veya review için Notion-vari bir dock isteyen PM’ler için kullanışlı), macOS için native reviewer uygulamasını kur. Aynı API, aynı projeler, aynı yorumlar; sadece tarayıcı dışında.

Sonra ne yapmalı

• Site genelinde geri bildirim widget’ı: reviewer’ların her sayfada gördüğü (FABs, sesli dikte, ekran görüntüsü).
• AI-diff review (/changes/ akışı): yapısal per-item inceleme için ana akış.
• Reviewer erişimi ve izinler: açık erişim, davet listesi, iki aşamalı Kaldır, 403 hataları ne demek.
• AI ajanları için MCP sunucusu: 10 workflow / 38 tool’un tam referansı ve workflow’u kendi client’ında nasıl çalıştıracağın.

Production’a göndermeye hazır olduğunda, temiz kaldırma için iki yol:

• MCP-native: AI client’ında remove workflow’unu çalıştır.
• MCP’siz yedek yol: Add to your site modal’ını bir kez daha aç ve Copy remove prompt for AI’a tıkla.

Her iki yol da widget script tag’ini kaldırır, /changes/’i siler ve commit’ten önce dört git grep komutuyla doğrular. İkisi de .pinappai/’i korur: daha sonra yeniden kurman aynı temele iner.