Next.js

An AI visual editor for your Next.js site.

Avocado Studio adds chat-driven AI editing, click-to-select visual editing and a live draft preview to a Next.js 15 or 16 App Router site. It renders your own React components, reads your own CMS and runs on your own AI key — no migration, no new platform.

Next.js integration guideTry the live demo
Framework
Next.js 15 or 16, App Router
Package
@avocadostudio-ai/site-sdk
Where it runs
Inside your Next.js app (library mode), or as a separate service
Content
Sanity, Contentful, Strapi, a JSON file, or your own adapter
AI models
Your Anthropic, OpenAI or Google Gemini key
Licence
Apache-2.0, free to self-host

Wire it into an existing project with one command

Run the scaffolder inside your Next.js project and choose Wire Avocado into this project. It writes the editor API route, the page routes, the block manifest and the request rewrite — proxy.ts on Next.js 16, middleware.ts on 15 — and touches nothing it did not create.

It then prints the things it deliberately leaves to you: the install command, the withAvocado wrapper for your Next config, and the stylesheet import. Sanity, Contentful and Strapi templates are included, and so is a plain JSON file.

cd my-next-app
npm create avocado-site@latest

No extra service to deploy

In library mode the orchestrator — session state, AI planning, the operations engine and publishing — runs inside your Next.js app at /api/avocado. Drafts, undo history and chat live in SQLite as a working copy; your CMS stays the source of truth and is written on publish.

The editor UI is one more command, pointed at your app. Prefer a separate orchestrator? It runs on Render, Fly, Docker or your own box.

npx @avocadostudio-ai/cli start \
  --orchestrator http://localhost:3000/api/avocado \
  --preview      http://localhost:3000

Your components become the editable blocks

Avocado does not ask you to rebuild the site out of its blocks. You register your own components’ schemas, wrap each block, and mark the fields an editor may change; the AI and the property panel then edit exactly those fields and nothing else. This markup is the largest part of an integration, and the docs budget for it honestly.

Starting from nothing instead? The demo site is built from the built-in page builder blocks: hero, feature grid, FAQ, CTA, gallery and more.

SEO metadata is part of the page

The page factory exports generateMetadata and derives each page’s title, description and social card from the page itself — and those are fields the agent edits like any other. Ask for sharper meta descriptions across the site, review them in the preview, publish.

// app/[[...slug]]/page.tsx
import { createSitePage } from "@avocadostudio-ai/site-sdk/page"
import { getPage, getSlugs } from "../../lib/my-cms"

const { Page, generateStaticParams, generateMetadata } = createSitePage({
  siteId: "my-site",
  getPage,
  getSlugs,
})

export default Page
export { generateStaticParams, generateMetadata }

Guard rails for production

  • Draft rendering needs DRAFT_MODE_SECRET, and publishing needs PUBLISH_TOKEN.
  • A publish that would remove every page is refused rather than taken at its word.
  • The agent proposes a plan that you approve or discard, and you see the result in your own site before anything ships.
  • withAvocado handles the Next.js details that otherwise fail quietly: native modules in the server bundle, image hosts for generated images, and trailingSlash: true.

FAQ

Next.js: common questions

Which versions of Next.js does Avocado Studio support?

Next.js 15 and 16 on the App Router. The request rewrite lives in proxy.ts on Next.js 16 and in middleware.ts on 15; the scaffolder writes the right one. Node.js 22 or later is required.

Do I have to use Avocado’s own blocks?

No. On an existing site your own React components are the blocks: you register their schemas and mark which fields are editable. The built-in blocks are there for new sites and for the demo.

Do I need to deploy a separate server?

No. In library mode the orchestrator runs inside your Next.js app at /api/avocado, so there is no extra service. A standalone orchestrator is an option if you want one.

Does it work with trailingSlash: true?

Yes. withAvocado keeps the editor API reachable, and the SDK’s proxy restores the trailing-slash redirect for your pages. The two are a pair: turn on trailingSlash in createEditorProxy as well.

Can I try it before touching my project?

Yes. npm create avocado-site@latest my-demo scaffolds a complete demo site — nine pages built from every built-in block — with the editor. Pages, click-to-select and the property panel work with no API key; only the AI chat needs one.

Try it on a real site in one command.

Scaffold the demo site with the editor, or run it inside an existing Next.js project to wire Avocado Studio in. Open source under Apache-2.0; bring your own Anthropic, OpenAI or Gemini key.

npm create avocado-site@latest