---
title: Quickstart
description: Add Nuni to an existing site and leave your first comment.
sidebar:
order: 1
---
## With a coding agent
Copy the prompt from the [home page](/) (it includes a project ID) and paste it into Codex, Claude Code, Cursor or any other agent. It installs the right package for your framework and mounts Nuni once, globally.
## By hand
1. **Get a project ID**
```bash
npx @nuniapp/cli@latest init
```
It detects your framework and package manager, prints a new project ID and shows the exact snippet and file to put it in. Add `--json` for machine-readable output.
2. **Install**
```bash
npm install @nuniapp/react@latest # React, Next.js, Remix, TanStack Start
npm install @nuniapp/widget@latest # Vue, Svelte, Astro, Angular, anything else
```
No bundler? Use the [script tag](/install/script-tag) instead.
3. **Mount it once**
```tsx app/layout.tsx
import { Nuni } from "@nuniapp/react"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
4. **Comment**
Start your dev server and open the site. The Nuni toolbar sits in the bottom-right corner. Press C, click any element and write your comment.
:::tip
Commit the project ID. It is public by design, like a publishable key, and the same ID should be used on localhost, previews and production so everyone sees the same comments.
:::
## Next
**[Claim your site](/guides/claiming)**
Sign in with GitHub to resolve and delete comments.
**[Environments](/guides/environments)**
How comments are shared across localhost, preview and production.