Add a Site

Two ways to bring a website into Avocado Studio: let our Onboarding agent do it for you, or code it yourself (by hand or with your own coding agent). Currently supports Next.js.

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.

Avocado Studio manages websites as sites — each one has 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 two ways to get a site in — an agentic path (let our AI do it) and a manual path (write the integration yourself):

Agentic — Onboarding agent

A built-in AI agent that runs end-to-end inside the editor. You describe what you want and it does the work — scraping, scaffolding, wiring the SDK, registering the site. Three modes: migrate from a public website URL, integrate a Next.js GitHub repo, or create from scratch.

Manual — code it yourself

Skip the AI and follow our integration docs directly. Two flavors: do it by hand, or hand the work to your own coding agent (Codex, Claude Code, Cursor, etc.) with a copy-paste prompt.

Both approaches produce the same end state: a Next.js site registered with the orchestrator, with pages, theme, and a wired-in Site SDK. Pick whichever matches your trust level for AI and the complexity of your codebase.

Heads up on the agentic path. The Onboarding agent is early — treat its first pass as a draft you’ll refine in the editor, not a finished site. It works well for simple landing pages and small Next.js repos; complex sites usually need a few iterations of cleanup. If you need pixel-perfect output on the first run, the manual paths give you full control instead.

Which approach should I pick?

If you…	Use this
Want the fastest possible result	Onboarding 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
Have an existing Next.js project on GitHub and want AI to clone it and wire the SDK in	Onboarding agent → Integrate
Have just an idea and want AI to scaffold a fresh Next.js site for you	Onboarding agent → Create
Want to understand every change yourself	Code it yourself → Manual
Have a coding agent in your IDE already (Codex, Claude Code, Cursor…)	Code it yourself → Bring your own agent
Have an unusual Next.js setup our agent might not understand	Code it yourself → Bring your own agent

Use our 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

Heads up: Claude only. The Onboarding agent runs exclusively on Anthropic Claude (via your Claude subscription or an ANTHROPIC_API_KEY). An OpenAI key alone won’t work for this path — though the editor’s per-edit chat supports OpenAI or Anthropic once a site exists. If you need a different model, use the Bring Your Own Coding Agent path with any agent you like.

→ Full reference: Onboarding agent (modes, prerequisites, CLI vs SDK billing, troubleshooting)

Code it yourself

If you’d rather skip the AI — or use your own — pick one of two flavors:

Manual integration

Follow our docs, write the code yourself in your existing Next.js project. ~30 minutes for a vanilla Next.js 15 App Router site. Every line is yours, no surprises.

Bring your own coding agent

Hand the integration to Codex, Claude Code, Cursor, Aider, or any agent in your IDE. We provide the prompt template and a verification checklist.

After your site is in

Once a site exists in the orchestrator, the rest of the docs apply:

• Editor quickstart — connect a Next.js site to the Content Studio
• Custom blocks — extend the block library
• Puck mode — enable visual drag-and-drop editing
• Deployment — ship the stack to production