Next.js
Load Cite only when NODE_ENV is development. Do not import cite.js as a module.
{process.env.NODE_ENV === "development" && (
<script
src="https://cite.brijr.dev/cite.js"
data-project="your-site"
/>
)}Install
Copy this into Claude, Cursor, or Codex.
Add Cite to this Next.js project for local development only. Never ship it to production.
Cite: https://cite.brijr.dev/cite.js
Docs: https://cite.brijr.dev/next
One script. It overlays the page so you can click an element, describe the change, and copy a bundle (selector, HTML, computed CSS, nearby DOM, request) into a coding agent.
In the root layout (app/layout.tsx), at the end of body, render a raw script tag only when process.env.NODE_ENV === "development". Do not import cite.js as a module and do not wrap it in next/script as a bundled file.
<script src="https://cite.brijr.dev/cite.js" data-project="PROJECT"></script>
Replace PROJECT with this repo's name. data-project namespaces localStorage.
Optional: vendor https://cite.brijr.dev/cite.js into public/cite.js and load /cite.js instead.
Verify with next dev: Cmd+Shift+F (Ctrl+Shift+F on Windows) opens Cite. A circle marked => appears in the bottom right.
Do not add a package, backend, or auth. Do not load Cite in production.Verify
Run next dev. Press Cmd+Shift+F. A circle marked => appears in the bottom right.