PinAppAI

← Tüm belgeler

Başlangıç

Kayıt ol, widget’ı yerleştir ve yaklaşık 5 dakikada yapısal feedback toplamaya başla.


PinAppAI, AI ile inşa edilmiş siteler için değişiklik talebi katmanıdır. AI sayfayı yapar; eleştirmenler 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.

1. Hesap + proje oluştur

app.pinappai.com’a kaydol. Ücretsiz plan tek proje + 5 eleştirmene kadar destekler — tüm akışı değerlendirmek için yeterli.

Admin’de + Yeni proje’ye tıkla:

  • Slug — URL’lerde ve projenin kimliğinde kullanılır (örn. acme-marketing).
  • Ad — dashboard’unda görünen isim.
  • İzin verilen origin’ler — widget’ın yüklenmesine izin verilen URL’ler. Yerel dev origin’inle başla (örn. http://localhost:3000) ve sonra staging / production ekle.

Kaydettikten sonra projenin sayfasına düşersin; orada Snippet düğmesini bulacaksın.

2. Widget’ı yerleştir

Snippet → Snippet, embed ve remove prompt’larını göster’e tıkla ve tek satırlık <script> etiketini kopyala:

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

Paylaşılan bir layout’a (base layout, kök şablon, footer partial — framework’ün ne diyorsa) bir kez yapıştır; tüm public sayfalarda otomatik yüklenir. Admin / login / 404 / API yollarını atla.

AI’nın kurulumu yapmasını istersen AI için install prompt’u kopyala’ya tıkla ve repo erişimi olan Claude Code, Cursor veya herhangi bir ajana yapıştır. Prompt framework’ünü tespit eder (Astro, Next.js, SvelteKit, Eleventy, Hugo, WordPress, düz HTML) ve snippet’i en idiyomatik yere yerleştirir.

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 eleştirmenler + workspace üyeleri gönderebilir. Widget ilk yorumda e-posta-OTP modal’ı gösterir; e-posta davet listesinde olmalı.

İki seçenek:

  • Eleştirmenleri açıkça ekle — admin → proje → + Eleştirmen ekle → e-postayı gir. Her davetli için tekrarla.
  • Açık erişim’i AÇ — admin → proje düzenle → “Açık erişim — herkes (allowlist olmadan) feedback bırakabilir” işaretle. Sayfaya ulaşan herkes doğrulayıp gönderebilir. Public beta testleri için tavsiye edilir, production için kapalı tutulmalı.

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

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

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

Snippet modal’ını yeniden aç, genişlet ve AI diff prompt’unu kopyala’ya tıkla. Claude Code veya Cursor’a yapıştır. Ajan son commit’leri okur, anlamlı değişiklikleri özetler ve framework’ün için doğru yola tek dosyalık self-contained bir /changes/ HTML dosyası yazar.

Commit’le, deploy et ve /changes/’i ziyaret et. Her değişiklik için Before / After kartları, ✓ Onayla / ✗ Reddet / ↻ Değişiklik iste düğmeleriyle göreceksin. Eleştirmenler ayrıca herhangi bir kaynak sayfayı (/pricing/, /tr/features/...) ziyaret edebilir ve sağ altta o sayfayı hedef alan değişiklikleri bağlamda incelemeyi öneren bir chip görebilir.

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. Bir AI ajanını review durumuna bağla (opsiyonel)

Tekrarlayan döngüler için MCP sunucusunu kur, böylece Claude Code veya Cursor review durumunu paste-bridge’siz okuyabilsin. İki komut — Claude Code, Cursor, Claude Desktop, Codex CLI, 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

install herhangi bir kimlik bilgisine ihtiyaç duymaz — sadece MCP sunucu girişini AI client config’lerine yazar (~/.claude.json, ~/.cursor/mcp.json, vb.). login tarayıcını açar, birden fazla workspace’in varsa seçtirir ve üretilen API anahtarını makinende yerel olarak kaydeder. Tüm subcommand listesi için npx @pinappai/mcp install --help (install / login / logout / uninstall).

Artık ajanın iteration döngünün tamamını kapsayan 10 slash komutuna erişimi var: /pinappai:setup-project (manuel kurulumun alternatifi — workspace + proje + widget snippet’i uçtan uca yürütür), /pinappai:fix-changes (CR’ları kaynağa uygula), /pinappai:apply-decisions (admin sırasındaki kararları uygula), /pinappai:generate-changes-page (/changes/’i regen et), /pinappai:remove, ve 5 yardımcı. Tam referans ve döngüyü iterasyon-aware yapan .pinappai/ klasörü mekaniği için MCP sunucusu bölümüne bak.

CI / headless? login’i atla, MCP’yi başlatan ortamda PINAPPAI_API_KEY=ppk_… env değişkenini ayarla. MCP sunucusu önce env’i, sonra credentials dosyasını okur. Bu amaçla app.pinappai.com/api-keys’den anahtar üret — temiz revoke için makineye göre adlandır.

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

Eleştirmenlerin 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, Windows veya Linux için native reviewer uygulamasını kur. Aynı API, aynı projeler, aynı yorumlar; sadece tarayıcı dışında.

Sonra ne yapmalı

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

  • MCP-native: AI client’ında /pinappai:remove çalıştır.
  • Export markdown: Snippet modal’ını bir kez daha aç ve AI için remove prompt’unu kopyala’ya 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.