PinAppAI

← All docs

Getting started

Sign up, embed the widget, and start collecting structured feedback in about 5 minutes.

PinAppAI is the change-request layer for AI-built sites. AI builds the page; reviewers point at what should change; your AI dev agent gets a structured, locator-precise change request — not a Slack screenshot. This page walks you through the first session end-to-end.

1. Create an account + project

Sign up at app.pinappai.com. The free tier covers a single project with up to 5 reviewers — enough to evaluate the full flow.

In the admin, click + New project and enter:

  • Slug — used in URLs and as the project’s identity (e.g., acme-marketing).
  • Name — display name in your dashboard.
  • Allowed origins — the URLs where the widget is allowed to load. Start with your local dev origin (e.g., http://localhost:3000) and add staging / production later.

After save, you land on the project page where you’ll find the Snippet button.

2. Embed the widget

Click Snippet → Show snippet, embed & remove prompts and copy the one-line <script> tag:

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

Paste it once into a shared layout — base layout, root template, footer partial, whatever your framework calls it — so it loads on every public page automatically. Skip admin / login / 404 / API routes.

If you’d rather have an AI handle the install, click Copy install prompt for AI and paste it into Claude Code, Cursor, or any agent with repo access. The prompt detects your framework (Astro, Next.js, SvelteKit, Eleventy, Hugo, WordPress, plain HTML) and embeds the snippet in the most idiomatic place.

Reload your dev server, open any page, and you should see three floating buttons in the bottom-right corner. That’s the widget.

3. Decide who can leave feedback

By default, only invited reviewers + workspace members can submit. The widget shows an email-OTP modal on the first comment; the email must be on the allowlist.

Two options:

  • Add reviewers explicitly — admin → project → + Add reviewer → enter email. Repeat for each invitee.
  • Flip Open access ON — admin → project edit → tick “Open access — anyone (no allowlist) can leave feedback.” Anyone who can reach the page can verify and submit. Recommended for public beta tests, off for production.

Test it yourself: open your dev page, click a floating button, type your own email, paste the 4-digit code from your inbox, leave a comment. The pin should appear in your admin dashboard within a few seconds.

4. Run an AI-diff review

After a content rewrite or redesign, you don’t want reviewers skimming a 4,000-word diff. You want them to decide on every change individually.

Open the Snippet modal again, expand it, and click Copy AI diff prompt. Paste it into Claude Code or Cursor. The agent reads your recent commits, summarizes meaningful changes, and writes a single self-contained /changes/ HTML file at the right path for your framework.

Commit, deploy, and visit /changes/. You’ll see Before / After cards for every change with ✓ Approve / ✗ Reject / ↻ Request change buttons. Reviewers can also visit any source page (/pricing/, /tr/features/...) and see a chip bottom-right offering to review changes that target that page in context.

The full walkthrough — including cross-page navigation, deep links, and how decisions feed back into the next AI iteration — is in AI-diff review (the /changes/ workflow).

5. Plug an AI agent into the review state (optional)

For repeating cycles, install the MCP server so Claude Code or Cursor can read review state directly without paste-bridges. Two commands — works for any AI client (Claude Code, Cursor, Claude Desktop, Codex CLI, Continue):

npx @pinappai/mcp install   # registers the MCP entry in every detected AI client config
npx @pinappai/mcp login     # opens browser for sign-in, mints a per-machine key, saves it locally

install doesn’t need any credential — it just writes the MCP server entry into your AI client configs (~/.claude.json, ~/.cursor/mcp.json, etc.). login opens your browser, lets you pick a workspace if you have multiple, and saves the freshly minted API key locally on your machine. Verify with npx @pinappai/mcp install --help to see the full subcommand list (install / login / logout / uninstall).

Now your agent has 10 slash commands covering the full iteration loop: /pinappai:setup-project (alternative to manual install — walks workspace + project + widget snippet end-to-end), /pinappai:fix-changes (apply CRs to source), /pinappai:apply-decisions (apply admin-queued decisions), /pinappai:generate-changes-page (regen /changes/), /pinappai:remove, plus 5 utilities. See MCP server for AI agents for the full reference and the .pinappai/ directory mechanics that make the loop iteration-aware.

CI / headless? Skip login and set PINAPPAI_API_KEY=ppk_… in the environment that spawns the MCP. The MCP server reads env first, then the credentials file. Mint the key for that purpose at app.pinappai.com/api-keys — name it after the machine so you can revoke cleanly.

6. Prefer the desktop client?

If you want reviewers to leave feedback without keeping a browser tab open — useful for designers reviewing a deployed site over hours, or for PMs who want a Notion-like dock for review — install the native reviewer client on macOS, Windows, or Linux. Same API, same projects, same comments; just outside the browser.

What to do next

When you’re ready to ship to production, two paths to clean removal:

  • MCP-native: run /pinappai:remove in your AI client.
  • Export markdown: open the Snippet modal once more and click Copy remove prompt for AI.

Either path strips the widget script, deletes /changes/, and verifies with four git grep commands before commit. Both preserve .pinappai/ so re-installing later drops you back into the same baseline.