Edit, maintain, optimize
your website with AI.
Not another way to vibe-code a new site: this runs the one you have. Describe a change and an agent edits content, images and SEO in your own components, then publishes to your CMS. Next.js and Astro today.
- Your site
- Your components
- Your CMS
- Your AI keys
Open source underApache-2.0: free for commercial use and self-hosting, no sign-up, no seat count. On your own machine it is one command: npm create avocado-site@latest.
Capabilities
A visual AI editor for Next.js and Astro sites.
Avocado Studio is an open-source AI website editor. It adds chat-driven editing, click-to-select visual editing and a live draft preview to the Next.js or Astro site you already run.
AI-assisted editing
Describe the change in chat, or click a block on the page and edit its fields. Agents update real website content: components, metadata, and publishing steps.
Live preview
See changes instantly in your own application while agents modify content and layouts in real time.
Works with your stack
Use your existing CMS, DAM, design system, frontend, and AI providers. No proprietary lock-in.
Multi-model
Bring your own models from Anthropic, OpenAI, or Gemini for text, images, and multimodal work. Route different tasks to different models.
Self-hostable
Deploy on your own infrastructure with full control over data, APIs, prompts, and integrations.
Connected workflows
Link editing, approvals, publishing, media, and localization into one workflow you control.
How it works
Describe it. Review it. Ship it.
Nothing reaches production because an agent decided it should. Every change passes through a preview you sign off on.
Describe the change
Say what you want in plain language — no schema spelunking, no ticket for a one-line copy fix.
Agents do the work
Content, components, and SEO metadata are updated in place, and media assets are created or edited with GenAI.
Preview before anything ships
See the result in your own application, with your components, schema, and review rules intact.
Publish on your own terms
Approvals and publishing run through the pipeline you already have, on infrastructure you control.
Architecture
An open layer between AI and your stack.
Avocado Studio sits between AI models and your existing content systems. Instead of replacing your stack, it coordinates work across it.
Next.js and Astro today, with your own components doing the rendering. Extend to the rest of your stack from there.
Websites
Headless CMSs
DAMs
Design systems
Localization tools
Publishing pipelines
- Claude, OpenAI, Gemini
- Avocado Orchestrator
- Next.js, CMS, DAM, Design System
- Preview, Review, Publish
Integrations
Works with Next.js, Astro and your headless CMS.
No migration and no second copy of your templates: Avocado Studio plugs into your framework, your content source and your AI provider.
Next.js and Astro visual editing
Next.js 15 and 16 on the App Router, where the orchestrator can run inside your own app, so there is no extra service to deploy. Astro 5 and later through an integration that renders your own
.astrocomponents: no React islands, nothing ported.Sanity, Contentful, Strapi or plain files
Starter templates for Sanity, Contentful and Strapi, or a plain JSON file; any other store connects through a content adapter. Publishing writes back only the fields that changed, so references and rich text survive the round trip.
Claude, GPT or Gemini
Bring your own Anthropic, OpenAI or Google Gemini API key. Chat is the only part that needs one: pages, click-to-select and the property panel work without it. Avocado runs on your key and never resells tokens.
An MCP server for Claude Code and Cursor
An MCP server exposes pages, blocks, media and publishing to Claude Code, Claude Desktop and other MCP hosts. Agent skills teach Claude Code, Cursor, Codex and Gemini how to wire Avocado into your site.
Use cases
What teams use an AI website editor for.
Edit your website with AI
Change website content in plain language while keeping your components, schema, and review rules intact.
Let marketers update the site without a developer
Once a developer has wired it in, copy fixes, new sections and landing-page changes are a sentence in chat and a preview to approve, not a ticket in a queue.
SEO titles and meta descriptions
Ask for better page titles, meta descriptions and social images across your pages, and review every one before it publishes.
AI images next to your copy
Generate an image, upload one or search Unsplash in the same chat that rewrites the copy, with alt text edited alongside it.
Developer experience
Built for developers and platform teams.
- API-first architecture
- Git-friendly workflows
- Self-hostable deployment
- Extensible adapters
- Streaming workflows
- Bring your own AI providers
- Works alongside existing CMS platforms
- Open source, Apache-2.0
- MCP server for AI agents
Not another CMS.
Not another AI writing tool.
Avocado Studio is an open-source AI layer for editing and publishing across the tools you already use.
It helps teams edit websites and publish content with AI agents while keeping their existing stack, infrastructure, and controls intact.
Run it yourself
One command to a working editor.
Scaffolds a site, the editor and the AI layer in one project, then starts it with npm run dev.
$ npm create avocado-site@latestNode 22+
The only prerequisite.
Your own key
Anthropic, OpenAI or Gemini. Without one the editor still opens; chat asks for a key.
Or your own site
Run the same command inside an existing Next.js app and choose Wire Avocado into this project, or add the Astro integration. See the docs.
FAQs
Questions about editing a website with AI.
What is Avocado Studio?
Avocado Studio is an open-source AI website editor for Next.js and Astro sites. You describe a change in plain language, an AI agent edits the content, images and SEO metadata in your site’s own components, you review it in a live draft preview, and it publishes to your CMS or content files. It is self-hosted, licensed Apache-2.0, and runs on your own Anthropic, OpenAI or Google Gemini API key.
Is Avocado Studio free and open source?
Yes. Every Avocado package, the AI engine and the editor included, is licensed Apache-2.0: use it commercially, modify it, self-host it, with no licence key and no seat count. The only running cost is what your own AI provider charges for tokens; Avocado runs on your key and never resells them. The packages are on npm with their readable source. The GitHub repository itself is not public yet.
How do I add AI editing to an existing Next.js site?
Run npm create avocado-site@latest inside the project and choose “Wire Avocado into this project”. It writes the editor API route, the page routes, the block manifest and the request rewrite, and touches nothing it did not create. You need Next.js 15 or 16 on the App Router and Node.js 22 or later. Marking up your own components as editable is covered in the Next.js integration guide.
Is there an AI visual editor for Astro sites?
Yes: Avocado Studio. Its @avocadostudio-ai/astro integration supports Astro 5 and later, and your own .astro components do the rendering: no React islands, nothing ported, no second copy of your templates. On a static site, publishing can write the page back to a file that is committed, reviewed as a diff and rebuilt.
Does it work with Sanity, Contentful or Strapi?
Yes. Avocado Studio ships templates for Sanity, Contentful and Strapi, and for a plain JSON file. Any other content store connects through a content adapter. Publishing sends back only the fields that changed rather than overwriting whole documents, so references, assets and rich text stay intact.
Can marketers edit a Next.js site without a developer?
Yes, once a developer has wired Avocado Studio in and marked which components are editable — a one-time job. After that, marketers and content editors change copy, images and sections by describing the change in chat or clicking the block on the page, and approve the result in a preview. Components, design system and code review stay in the developers’ hands.
Can I edit my website with Claude or ChatGPT?
With the same models, yes. Put an Anthropic API key in Avocado Studio and the editor’s chat runs on Claude; an OpenAI key runs it on GPT, a Google key on Gemini. The ChatGPT and Claude apps cannot reach your site on their own, but Claude Code, Claude Desktop and other MCP hosts can, through the Avocado Studio MCP server.
Can AI write my SEO titles and meta descriptions?
Yes. Every page’s title, meta description and social image are fields the agent can edit, so “tighten the meta descriptions on the pricing and features pages” is a request like any other. You see the new values in the preview and approve them before they publish.
Will it replace my CMS?
No — it coordinates work across the stack you already have. Your CMS, DAM, design system, frontend, and AI providers stay where they are.
Which AI models does it use?
Whichever you bring. Use your own keys for Anthropic, OpenAI, or Gemini across text, images, and multimodal work, and route different tasks to different models.
Can I try it without an API key?
Yes. Without a key the pages render, click-to-select works and the property panel edits real fields; only the AI chat needs a model key. You can also open the live demo, the real editor on a sample site, in your browser.
Can an agent publish something without me seeing it?
No. The agent proposes a plan that you approve or discard, you see the result in a preview before anything ships, and publishing runs through your own approval and release pipeline.
Does Avocado Studio have an MCP server?
Yes. @avocadostudio-ai/mcp-server exposes pages, blocks, media, publishing and undo history over the Model Context Protocol, so Claude Code, Claude Desktop and other MCP hosts can edit a site the same way a person does in the editor. It runs over stdio or streamable HTTP with a bearer token.
How is it different from an AI website builder like Lovable or v0?
An AI website builder generates a new site. Avocado Studio edits the one you already have: your components, your design system, your CMS and your hosting stay as they are, and the agent works inside them. Nothing is migrated and nothing is locked into a platform.
Is Avocado Studio an alternative to Builder.io, Webflow or Framer?
For a team that wants visual and AI editing on a site it already owns, yes. Avocado Studio is open source and self-hosted, it edits your own Next.js or Astro code base and your own CMS rather than keeping the site or its content on a vendor’s platform, and it runs on your own AI key. If you want a hosted no-code tool to build a new site from scratch, a hosted builder is the better fit.
Do I have to send my content to someone else’s cloud?
No. Avocado Studio is self-hostable: deploy it on your own infrastructure with full control over data, APIs, prompts, and integrations.
AI editing you actually own.
Not rented from a platform, not locked behind a seat count. Run it on your own infrastructure with your own model keys, free. Nothing here is a waiting list — leave an address if you would like a hand onboarding your site, or just start with the docs.
