How It Works | Multi-Tenant Next.js Website Builder Architecture

Delivered as code in your stack. Zero vendor runtime in the path.

Hosted builders force you to proxy requests to a vendor cloud and sync data over external APIs. ChaiBuilder runs inside your own deployment next to the rest of your code.

Your infrastructure

The builder & MCP packages (chaicore + chaipro)

Installed as npm packages in your Next.js application. One server action endpoint validates and executes every builder operation against the current user's permissions.

Your own database (PostgreSQL or SQLite)

ChaiBuilder maintains its own clean tables for customer sites (apps), pages, block JSON, revisions, and settings right inside your database, alongside your existing product tables.

Your existing authentication & roles

Pass your application's current user session into ChaiBuilder's context resolver to tell the builder which customer site, user ID, and role permissions apply. Your customers never log in twice.

Your own object storage (S3 or R2)

Customer uploads and edited images go straight to the S3-compatible bucket you control.

Embed inside your Next.js app, or run alongside any backend stack

Whether your core SaaS is already a Next.js monorepo or runs on Rails, Laravel, Django, Go, or .NET, ChaiBuilder fits cleanly into your infrastructure.

Pattern 1: Direct embed in an existing Next.js app

Drop chaipro directly into your Next.js codebase. Share the same deployment, database connection, authentication session, and React component library.

Pattern 2: Companion Next.js website service for non-Next.js stacks

Run ChaiBuilder as a dedicated Next.js service in your cloud (serving customer custom domains and the /editor route) while its server-side data providers read live records from your existing backend API or primary database.

Read the integration guide

Stored as JSON. Populated from your records. Cached with SSG + ISR.

Static site generators require a full build and deploy whenever content or data changes. ChaiBuilder decouples page updates from code deployments.

Server-side data providers resolve your records

Write simple server functions (Global, Page-type, and Block providers) that query your database or internal API for a customer's listings, inventory, menu items, or locations and inject them into page bindings before render.

Built on first visit and cached (SSG + ISR)

Each customer page renders on its first request and is cached at the edge or server. You never wait on a 10,000-site build step during CI/CD deploys.

Instant revalidation on publish

When a customer or account manager clicks Publish, ChaiBuilder invalidates only that specific page's cache tag and rebuilds it in milliseconds.

Granular webhook revalidation when platform data changes

When a record changes in your core SaaS (such as an updated price or new listing), fire its cache tag at /api/revalidate so only the customer pages displaying that record refresh automatically.

One permissioned pipeline for humans and AI agents

Whether an update comes from your onboarding team, a customer in the visual canvas, or an AI agent over MCP, nothing reaches a live site until it is approved and published.

Edit

A customer edits visually on the canvas, asks the in-builder AI chat assistant, or connects Claude or Cursor to the /api/mcp endpoint using their personal API key.

Draft & Lock

Changes save to the page's draft state. Real-time page locking ensures an AI agent and a human editor never overwrite each other's active work.

Preview

Reviewers inspect the unpublished draft on the real site layout via Next.js draft mode.

Publish & Audit

One click pushes the draft live and records a permanent revision entry (marking whether a human or an agent made the change) for instant rollback at any time.

Explore the MCP server architecture

Escape hatches everywhere: by design, not as a workaround

Custom React blocks

Register any React component with a schema that defines which props customers can edit in the sidebar and which page types the block can appear on.

Custom server actions (ChaiBaseAction)

Expose validated, permission-checked backend operations (such as checking live stock or submitting a custom lead form) directly to the builder.

Custom plugins & sidebar panels

Register your own database tables, permission keys, and custom UI panels inside the editor using the exact same plugin API our own Pro extensions use.

Custom MCP tools

Register domain-specific agent tools alongside your custom blocks so AI agents can query your live platform data while drafting pages.

Inspectable open-source core. Production multi-tenancy in Pro.

You never have to trust a black box. Read and run the core engine on GitHub today; license chaipro when you run sites for your customers.

Open source (chaicore, BSD-3-Clause)

The core visual canvas, block system, SQLite page storage, and Next.js runtime page renderer. Free for single-site projects and developer evaluation.

Explore the open-source core

Pro (chaipro, Yearly Platform License)

Adds multi-tenancy, PostgreSQL support, white-label editor branding, RBAC roles and permissions, page revisions and restore, multilingual management, URL redirects, media manager, full AI assistant, the built-in MCP server, and priority engineering support.

See Pro pricing

A multi-tenant website module that runs inside your app.