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, 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

npm install @sonordev/site-kit

2. Add your key

Copy the key from app.sonor.io: Projects, then your project, then Settings, then API Keys. Keys start with sonor_.

# .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

// 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.

4. Scaffold the rest

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.

5. Build and verify

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:

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.
• Forms: <ManagedForm formId="contact" /> renders a form you define in Sonor, with spam defense built in. See Forms.
• SEO: managed metadata, schema and FAQs per page. See SEO.
• AI visibility and agents: llms.txt, answer-engine blocks and MCP tools. See Agents and AI visibility.
• An older site? npx sonor-setup codemod --write moves any 2.x to 6.x site to site-kit 7. See 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.