margo

Pin comments on your live app.
AI implements them.

A shared annotation layer for AI-coding teams. PMs, designers, and devs leave comments on the running UI. Claude Code reads those comments as live context and makes the change. Comments live as files in your repo, synced over git โ€” no SaaS, no extension to install.

npm install -D margo-dev
npx margo init
npm run dev
localhost:5173
Alice
Bob

Pricing

~/acme โ€” claude
Claude Code
โ€บ
2 open comments:
A c-001 alice โ€” Make the CTA green
B c-002 bob โ€” Highlight SAML 2.0
Edit src/components/Pricing.tsx
-className="cta cta-blue"
+className="cta cta-green"
-<li>SSO + audit log</li>
+<li>SSO (SAML 2.0) + audit log</li>
Commit margo: 2 ai-replies (ready-for-review)

1. Pin it

Click any element on the running app, type a comment. The overlay captures a hybrid anchor (selector + text + role + coords) so the pin survives refactors.

2. AI works it

Each comment is a markdown file in .margo/comments/. Claude Code reads them via the /margo skill, makes the code change, replies in-thread, bumps status to ready-for-review.

3. Humans review

Humans approve, reply, or mark resolved โ€” through the same overlay UI. Resolved comments stay in place at .margo/comments/<id>.md so git blame works.

Works with your stack

Two integration modes โ€” same overlay, same workflow.

Native plugin

Vite (vanilla, Vue, React, Svelte, Astro), Next.js App Router

One line in vite.config.* or next.config.*.

Sidecar + proxy

Angular, webpack-dev-server, Vue CLI, Create React App, SvelteKit (non-Vite), Remix-classic

Run margo serve next to your dev server; proxy /__margo/* to it.

Full setup for each framework is in the README. Demos for each integration ship in the repo.

Why this exists