Skip to main content
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. The patterns are real and the primitives work, but you’ll be a first mover and should expect to file bugs.

Use our Onboarding agent

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.

Use your own coding agent

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.

Do it by hand

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, editable from the Content Studio.

​
Which approach should I pick?

If you…Use this
Want the fastest possible resultOnboarding agent
Have a public website URL (any tech) and want AI to scrape it and rebuild it as a Next.js siteOnboarding agent → Migrate
Have an existing Next.js project on GitHub and want AI to clone it and wire the SDK inOnboarding agent → Integrate
Have just an idea and want AI to scaffold a fresh Next.js site for youOnboarding agent → Create
Have a coding agent in your IDE already (Codex, Claude Code, Cursor…)Bring your own coding agent
Have an unusual Next.js setup our agent might not understandBring your own coding agent
Want full control and to understand every change yourselfManual integration
Need pixel-perfect output on the first runManual integration

​
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:
ModeStarting pointWhat it does
MigrateA 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
IntegrateAn 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
CreateA natural-language description of the site you wantScaffolds 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 with any agent you like.
→ Full reference: Onboarding 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 (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 (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: