# Get started

A Sonor site is a Next.js site with `@sonordev/site-kit` installed and one API key. Everything it shows or tracks (SEO, analytics, forms, articles, reviews, chat, agent tools) is managed from the dashboard at [app.sonor.io](https://app.sonor.io), so the code stays small and the content stays editable.

You'll need Next.js 16 and Node 20.19 or later. site-kit is ESM only.

## 1. Install

```bash
npm install @sonordev/site-kit
```

## 2. Add your key

Copy the key from [app.sonor.io](https://app.sonor.io): **Projects, then your project, then Settings, then API Keys**. Keys start with `sonor_`.

```bash
# .env.local
SONOR_API_KEY=sonor_xxxxxxxx_xxxxx
```

That's the only variable a site needs. Keep it server-side, with no `NEXT_PUBLIC_` prefix: `SiteKitLayout` reads it on the server and hands the client what it needs.

## 3. Add the layout

```tsx
// app/layout.tsx
import { SiteKitLayout } from '@sonordev/site-kit/layout'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <SiteKitLayout>{children}</SiteKitLayout>
      </body>
    </html>
  )
}
```

`SiteKitLayout` is a server component. Your page renders first, and analytics, chat and the rest mount after it as deferred siblings, so nothing pushes a route into client rendering. Its props are in [Layout](https://sonor.dev/site-kit/layout).

## 4. Scaffold the rest

```bash
npx sonor-setup init       # the layout, the key and the postbuild step, if you'd rather not do 2 and 3 by hand
npx sonor-setup scaffold   # sitemap, robots, llms.txt, proxy and an OG card
```

The proxy adds Sonor-managed redirects, security headers and AI discovery headers. See [Proxy](https://sonor.dev/site-kit/proxy).

## 5. Build and verify

```bash
next build
npx sonor-setup verify
```

`verify` exits 0 only when the integration is genuinely done: the key works, the layout's in place and the built pages server-render real content. When it doesn't, each failing check says how to fix it. Point it at a deploy for the strongest check:

```bash
npx sonor-setup verify --url https://your-site.com
```

## What next

- **An agency or real estate site?** An industry kit adds case studies or listings on top of site-kit. See [Industry kits](https://sonor.dev/guides/kits).
- **Forms**: `<ManagedForm formId="contact" />` renders a form you define in Sonor, with spam defense built in. See [Forms](https://sonor.dev/site-kit/forms).
- **SEO**: managed metadata, schema and FAQs per page. See [SEO](https://sonor.dev/site-kit/seo).
- **AI visibility and agents**: llms.txt, answer-engine blocks and MCP tools. See [Agents and AI visibility](https://sonor.dev/guides/agents).
- **An older site?** `npx sonor-setup codemod --write` moves any 2.x to 6.x site to site-kit 7. See [Migrating to 7](https://sonor.dev/site-kit/migrating-to-7).
- **Building with a coding agent?** Every CLI command takes `--json`, and site-kit ships a guide written for agents. See [For coding agents](https://sonor.dev/site-kit/agents).