> ## Documentation Index > Fetch the complete documentation index at: https://docs.avocadostudio.dev/llms.txt > Use this file to discover all available pages before exploring further. # Add a Site > Three ways to bring a website into Avocado Studio: let our Onboarding agent do it, hand it to your own coding agent, or wire it up by hand. All paths produce the same end state — a Next.js site registered with the orchestrator and editable from the Content Studio. Avocado Studio manages websites as **sites** — each with its own pages, blocks, theme, and publishing target. Before you can edit anything, you need at least one site registered with the orchestrator. There are three ways to get there. Pick whichever matches your trust level for AI and your appetite for hands-on integration work. **Next.js only (officially tested).** Avocado Studio is currently built and tested against **Next.js 15+ (App Router)**. Every path on this page assumes your site is — or will be — a Next.js project. If you're on Astro / Remix / SvelteKit / Hono / etc., the SDK ships framework-agnostic `/core` primitives you can wire up by hand — see [Non-Next.js Integration](/integration/non-nextjs). The patterns are real and the primitives work, but you'll be a first mover and should expect to file bugs. A built-in AI agent that runs end-to-end inside the editor. Three modes: **Migrate** a public URL, **Integrate** an existing Next.js repo, or **Create** from a description. Fastest path; early-stage — treat its first pass as a draft. Hand the integration to **Codex, Claude Code, Cursor,** or any agent in your IDE. We provide a copy-paste prompt and a verification checklist; the agent already knows your codebase. Skip AI entirely. Follow our integration docs, write the code yourself. \~30 minutes for a vanilla Next.js 15 App Router site. Every line is yours, no surprises. All three paths produce the same end state: a Next.js site registered with the orchestrator, with pages, theme, and a wired-in [Site SDK](/integration/nextjs-integration), editable from the Content Studio. ## Which approach should I pick? | If you… | Use this | | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | | Want the fastest possible result | **[Onboarding agent](/sites/site-agent)** | | Have a **public website URL** (any tech) and want AI to scrape it and rebuild it as a Next.js site | **[Onboarding agent → Migrate](/sites/site-agent)** | | Have an **existing Next.js project on GitHub** and want AI to clone it and wire the SDK in | **[Onboarding agent → Integrate](/sites/site-agent)** | | Have just an idea and want AI to scaffold a fresh Next.js site for you | **[Onboarding agent → Create](/sites/site-agent)** | | Have a coding agent in your IDE already (Codex, Claude Code, Cursor…) | **[Bring your own coding agent](/sites/coding-agent)** | | Have an unusual Next.js setup our agent might not understand | **[Bring your own coding agent](/sites/coding-agent)** | | Want full control and to understand every change yourself | **[Manual integration](/sites/manual)** | | Need pixel-perfect output on the first run | **[Manual integration](/sites/manual)** | ## Option 1 — Onboarding agent The Onboarding agent is an AI agent in the editor's *Sites* page. Pick one of three modes from your first message: | Mode | Starting point | What it does | | ------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Migrate** | A **public website URL** (any framework — Webflow, Framer, WordPress, plain HTML, another Next.js site) | Scrapes the live HTML, extracts structure, downloads images, generates page specs, applies the theme, and creates a fresh **Next.js site** in the editor | | **Integrate** | An **existing Next.js project on GitHub** (public or private repo URL, or a local clone) | Clones the repo, analyzes the codebase, wires `@ai-site-editor/site-sdk` into your existing Next.js app, registers the site | | **Create** | A **natural-language description** of the site you want | Scaffolds a fresh Next.js site with starter blocks, theme, and pages from your description | **This is early — set expectations.** The Onboarding agent works well for simple landing pages and small Next.js repos. Complex sites (heavy interactivity, custom CMS schemas, deep routing, design systems with non-standard tokens) usually need a few iterations of cleanup in the editor or by hand. Treat the first pass as a **draft you'll refine**, not a finished site. If you need pixel-perfect output on the first run, choose option 2 or 3. **Claude only.** The Onboarding agent runs exclusively on Anthropic Claude — either through your Claude subscription (CLI backend, \$0/token) or an `ANTHROPIC_API_KEY` (SDK backend, pay-per-token). An OpenAI key alone won't work for *this* path. The editor's per-edit chat (the AI you talk to *after* a site exists) supports OpenAI or Anthropic. If you need a different model for onboarding, use **[Bring your own coding agent](/sites/coding-agent)** with any agent you like. → Full reference: **[Onboarding agent](/sites/site-agent)** (modes, prerequisites, CLI vs SDK billing, troubleshooting) ## Option 2 — Bring your own coding agent If you're already running a coding agent in your IDE (Codex, Claude Code, Cursor, or others), you don't need to switch to ours. We provide a copy-paste prompt and a verification checklist; your agent does the work in your existing review flow. **When this beats the Onboarding agent:** * Your agent already has full context on your codebase, conventions, and history * You want changes to flow through your existing PR / commit / CI process * Your project has unusual structure (monorepo, custom build, non-standard routing) where our agent might land changes in the wrong place * Compliance / data residency reasons — work happens in your environment, not ours → Full reference: **[Bring your own coding agent](/sites/coding-agent)** (prompt template, verification checklist, troubleshooting) ## Option 3 — Manual integration No AI involved. You read the integration guides, write the code, register the site. \~30 minutes for a vanilla Next.js 15 App Router project. The two SDK helpers (`createEditorApiHandler` and `createSitePage`) do most of the heavy lifting; you wire them in. **When this is the right call:** * You want to understand every change yourself * You need pixel-perfect output on the first run * Your project is unusual enough that an AI agent would likely make a mess * You're building muscle memory for the SDK and want to read the contracts directly → Full reference: **[Manual integration](/sites/manual)** (prerequisites, step-by-step, custom blocks, Puck mode) ## After your site is in Once a site exists in the orchestrator, the rest of the docs apply regardless of which path you took: * **[Editor quickstart](/integration/editor-quickstart)** — connect a Next.js site to the Content Studio * **[Custom blocks](/integration/custom-blocks)** — extend the block library * **[Puck mode](/integration/puck-mode)** — enable visual drag-and-drop editing * **[Deployment](/operations/dev-server-runbook)** — ship the stack to production