@nuniapp/widget

Pin a comment to anything on your site. Talk it through with your team. Give your agent the context.

Nuni adds Figma-style comments to your real, running website: localhost, preview URLs, staging or production. Anyone who can open the site can leave a comment. No commenter accounts, no API keys, no dashboard setup.

Install

The fastest way is to paste this prompt into Codex, Claude Code, Cursor or any coding agent:

Add Nuni (pinned comments on the live site) to this project.

Get a project ID by running: npx @nuniapp/cli@latest init (it prints the ID and the exact snippet for this framework).

Steps:
1. Detect the framework and package manager.
2. If the app uses React (Next.js, Vite, Remix, React Router, TanStack Start, etc.):
   - Install @nuniapp/react@latest.
   - Render <Nuni project="PROJECT_ID" /> once, globally, in the root layout or app entry (for Next.js App Router: app/layout.tsx, inside <body>). It is already a client component.
3. Otherwise, if there is a bundler (Vue, Svelte, Astro, Angular, etc.):
   - Install @nuniapp/widget@latest.
   - Call init({ project: "PROJECT_ID" }) once on the client, in the app entry or root layout. import { init } from "@nuniapp/widget".
4. If there is no bundler (plain HTML, WordPress, Webflow): add this before </body> on every page:
   <script src="https://cdn.jsdelivr.net/npm/@nuniapp/widget@latest/dist/nuni.global.js" data-project="PROJECT_ID" defer></script>
5. Commit the project ID directly in the code. It is public, not a secret. Do not put it in an env var.
6. Do not add Nuni to server-only code, and do not load it more than once.
7. If the site sends a Content-Security-Policy, allow connect-src https://*.convex.cloud wss://*.convex.cloud https://*.convex.site (and script-src cdn.jsdelivr.net for the script tag).
8. Start the dev server, open the site, and confirm the Nuni button appears in the bottom-right corner.
9. Tell the user they can let you read and resolve comments later: run npx @nuniapp/cli@latest login once, then add the MCP server (for Claude Code: claude mcp add nuni -- npx -y @nuniapp/cli@latest mcp). Do not run login yourself unless asked.

Docs: https://nuni.praveenjuge.com/quickstart

Or do it yourself:

npx @nuniapp/cli@latest init   # prints your project ID and the snippet for your framework
npm install @nuniapp/widget@latest

import { init } from "@nuniapp/widget"

init({ project: "nuni_..." })

Using React? Use @nuniapp/react. No bundler? Use the script tag:

<script
  src="https://cdn.jsdelivr.net/npm/@nuniapp/widget@latest/dist/nuni.global.js"
  data-project="nuni_..."
  defer
></script>

Options

| Option | Description | | -------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | project | Your public project ID. Commit it; it is not a secret. | | getPageKey(url) | Optional. Decide which URLs share comments. Defaults to the path, ignoring query and hash. | | convexUrl, convexSiteUrl, appUrl | Optional. For self-hosting or local development. | | capture | Optional. Owner-only page context per comment: { console, network, dom, screenshot }, all on by default. | | pageKey | Optional. "path" (default), "path+search" or "path+hash", when getPageKey is not set. | | position, accentColor, theme | Optional. Toolbar corner, brand color (any CSS color), and "auto", "light" or "dark". | | label, hotkey, zIndex | Optional. Comment button text, shortcut key (false turns it off) and stacking order. | | locale, messages | Optional. Language for times and counts, and replacements for any of the widget's words. |

init returns { destroy() }. On the script tag, each option is a data-* attribute (data-accent-color, data-capture-screenshot="false"); optionsFromAttributes(element.dataset) reads them the same way.

Using it

• Press C (or the Comment button), click any element and write your comment. Select text to comment on the words, or drag a box to comment on an area.
• Everything works from the keyboard: while adding, the arrow keys move between elements and Enter comments.
• Press Shift+C (Shift and the hotkey; or the eye button) to hide the pins and see the page clean. Adding a comment or opening one shows them again.
• The comments list shows this page first, then every other page's comments grouped under its path. Search looks through all of them, and a comment on another page opens there.
• Pins follow their element through layout changes, responsive breakpoints and content edits. If an element is removed, its comment is listed as "Couldn't find on this page" instead of pinned to the wrong thing.
• Your name is remembered in this browser. You can edit and delete your own comments.
• The site owner claims the project from the widget ("Claim Nuni", GitHub sign-in) and can then resolve, reopen and delete comments.

Privacy

Comments are visible to everyone who can open the site, and to anyone who knows the project ID. Don't put secrets in comments.

Content Security Policy

If your site sends a CSP, allow connect-src https://*.convex.cloud wss://*.convex.cloud https://*.convex.site (and script-src cdn.jsdelivr.net for the script tag).

Docs: https://nuni.praveenjuge.com