lockup-horizontal-light.png

Build vs. buy: multi-tenant website builder architecture

It starts as a Q3 feature. It ends as a second product.

Every SaaS team thinks it can wire up a drag-and-drop React library in a two-week sprint. Five to ten months and up to $170,000 of US senior engineering time later, your best product engineers are debugging AST mutations, iframe focus traps and Next.js cache invalidation edge cases instead of shipping your core roadmap.

chaipro gives you a complete, self-hosted, multi-tenant website builder inside your Next.js stack, running on your database, under your brand, for one flat yearly license.

Book a technical architecture demo Inspect the open-source core on GitHub

Quick-glance architecture

In-house build

Time to MVP

5-10 months with one senior engineer

Year-1 engineering

$95k-$170k, US fully loaded

After launch

Maintenance tax, forever

chaipro license

Time to live

Weeks

Cost

One flat yearly license, unlimited sites

Runs in

Your Next.js app and Postgres database

Why "just putting drag-and-drop on a JSON tree" always blows up the roadmap

When you search for how to build a page builder in React, tutorials make it look trivial: serialize a component tree to JSON, add a drag-and-drop wrapper and render it recursively.

In a multi-tenant SaaS production environment, that prototype covers less than 10% of the real surface area. Starting from an open-source editor such as Puck shortens months 1 and 2; months 3 to 6 stay on your plate. Here is how the trap unfolds.

  1. Month 1

    The weekend prototype high

    A senior engineer hooks up @dnd-kit and renders five static blocks from a JSON blob. Leadership thinks the feature is 80% done.

  2. Month 2

    The canvas and CSS isolation nightmare

    Customer styles bleed into your SaaS admin UI. You move the canvas into an isolated iframe, which immediately breaks React context, drag events across frame boundaries, font loading and Tailwind JIT compilation.

  3. Month 3

    The state and schema migration crunch

    Customers want undo/redo, draft states and reusable symbols. Meanwhile, you update a prop on a Hero component and break 400 live customer pages, because there is no block schema migration engine.

  4. Months 4-5

    Multi-tenant routing and cache invalidation

    Serving 5,000 custom domains with instant publish needs custom middleware, SSL provisioning hooks and surgical Next.js Incremental Static Regeneration (ISR) tag purging.

  5. Month 6+

    The permanent maintenance tax

    Stakeholders ask for an AI page generator, role-based access control (RBAC) and dynamic database binding. Two senior engineers are now permanently assigned to the "Builder Team".

The 4 icebergs of multi-tenant website builder architecture

The engineering effort behind the four non-negotiable pillars of a modern SaaS website builder. Each range runs from AI-assisted coding with today's SDKs (low) to building from scratch (high), at a US fully loaded rate of about $110/hour (roughly $220,000 a year). Teams outside the US pay a lower rate for the same hours.

01

Deterministic undo/redo, revision history and conflict locking

Estimated effort

100-220 hrs

AI-assisted to from scratch

Engineering cost (US)

$11k-$24k

Full-tree snapshots (history.push(deepClone(pageTree))) are fine in a demo. On real pages, hundreds of snapshots with large embedded payloads, plus re-rendering the whole tree on every change, freeze the main thread. The harder problem is schema: change a block's props and every stored page that uses it needs migrating.

What you actually build: Command-pattern state patches (JSON Patch or Immer patches) that track granular prop, style and structural mutations without freezing the main thread.

The multi-tenant complexity: Separating ephemeral local undo stacks from persistent database revisions, building visual diff and restore, and real-time page locking so two team members, or a person and an AI agent, never silently overwrite each other's drafts.

How chaipro covers it: Undo/redo in the editor, database-backed revision history with one-click restore, draft-first publishing and real-time page locking, out of the box.

02

Responsive breakpoint tokens and design system guardrails

Estimated effort

125-280 hrs

AI-assisted to from scratch

Engineering cost (US)

$14k-$31k

Give SaaS customers raw CSS inputs and they break mobile layouts in five minutes and blame your platform. Lock everything into rigid forms and they complain they can't customize their site.

What you actually build: A visual style engine that maps UI controls to responsive Tailwind CSS utilities (sm:, md:, lg:, xl:), supports hover and focus states, and resolves cascading overrides cleanly inside an isolated preview.

The multi-tenant complexity: Enforcing per-customer design tokens (brand colors, type scale, radii) so every block inherits the customer's brand without runtime CSS bloat on public pages.

How chaipro covers it: Built on Tailwind CSS design tokens, with responsive breakpoint previews, per-site theme variables and role-scoped editing permissions that keep customers on brand.

03

Multi-tenant ISR cache invalidation and live server data binding

Estimated effort

140-320 hrs

AI-assisted to from scratch

Engineering cost (US)

$15k-$35k

A SaaS website builder isn't static brochureware. Customer sites pull live inventory, locations, pricing or user records from your core database and must stay fast.

What you actually build: Multi-tenant domain routing in Next.js middleware, server-side data providers that bind database queries to block props, and a dependency graph of which pages use which global partials, menus or records.

The multi-tenant complexity: When a customer edits a header or a price changes in your core app, you must fire surgical revalidateTag / revalidatePath calls across only the affected customer routes, with no full rebuilds and no stale data.

How chaipro covers it: Pages stored as JSON and rendered at runtime by Next.js (SSG + ISR), server-side data providers that read from your existing database or backend API, granular revalidation webhooks, and publishing that refreshes only the changed page with no rebuild. Certificates for custom domains still come from your hosting or edge layer, such as Cloudflare for SaaS, Vercel domains or on-demand TLS.

04

Structured AI tool-calling and a Model Context Protocol (MCP) server

Estimated effort

185-420 hrs

AI-assisted to from scratch

Engineering cost (US)

$20k-$46k

An AI prompt box that spits out raw HTML is useless in a structured React builder. Customers expect an in-editor AI assistant, and external agents like Claude or Cursor, to build, edit and translate pages with your actual React blocks.

What you actually build: Even with the official MCP SDK and an AI SDK, you still write strict JSON-schema tool definitions for every registered block, validation so partial LLM output can't crash the canvas, context pruning for large pages, and authentication for the MCP server.

The multi-tenant complexity: Scoping every AI action to the signed-in user's permissions, routing AI edits into reviewable drafts instead of live writes, and supporting bring-your-own-key gateways (Vercel AI Gateway, OpenRouter) so you aren't paying token markups.

How chaipro covers it: An in-builder AI assistant on your own provider keys, plus a built-in MCP server at /api/mcp with 33 tools that your developers switch on once. Agents authenticate with personal API keys, act with that user's permissions, respect page locks, and land content edits as previewable drafts. No ChaiBuilder credits, no markup.

How the MCP server works

The math: building in-house vs. per-site SaaS vs. licensing chaipro

Core feature build

Undo/redo, tokens, ISR, AI/MCP

In-house: $60,500-$136,400 (550-1,240 hrs at $110/hr)

Hosted: Included, locked to the vendor's ecosystem

chaipro: Included on Day 1

RBAC, multilingual, media and redirects

In-house: +$33,000 (300 hrs at $110/hr)

Hosted: Often gated behind enterprise tiers

chaipro: Included

Annual maintenance and Next.js upgrades

In-house: $55,000+ a year (~0.25 FTE ongoing)

Hosted: $0

chaipro: Package updates ship with the license. You still maintain hosting, your database and your own blocks

Unit economics at 1,000 customer sites

In-house: Infrastructure cost only

Hosted: $60,000-$180,000 a year in per-site fees

chaipro: One flat yearly license, unlimited sites

Data and infrastructure ownership

In-house: 100% yours

Hosted: Vendor holds the database and sits in the request path

chaipro: 100% yours, in your Next.js app and Postgres or SQLite database

AI and agent pricing

In-house: You build it and pay raw API cost

Hosted: Metered AI credits on top of your plan

chaipro: Your own AI keys, zero markup

Kill-switch risk

In-house: None

Hosted: Leave the vendor, lose every customer site

chaipro: None. A lapsed license keeps live sites running, but you stay on your last licensed version

Year-1 total cost of ownership

In-house: About $95,000-$170,000 and 5-10 months

Hosted: Margin erosion plus lock-in

chaipro: A fraction of one engineer's salary, live in weeks

In-house figures assume a US senior engineer at a fully loaded ~$110/hour (~$220,000 a year). The low end assumes AI-assisted coding, the high end building from scratch. Teams outside the US pay a lower rate for the same hours.

What about open-source editors like Puck?

There is a middle path: start from an open-source React editor such as Puck, Craft.js or GrapesJS. It removes most of the canvas and drag-and-drop boilerplate, so the first two months get shorter.

The rest of the list doesn't. You still build storage, multi-tenant routing, RBAC, revisions and locking, media, and the MCP server yourself. That is the part chaipro ships.

ChaiBuilder vs. Puck, line by line

Built to sit inside your stack, not beside it

Most "buy" options force a bad compromise: a closed cloud builder that charges per customer site, keeps your customers' content in someone else's database, and makes users log into a separate tool.

chaipro removes the tradeoff by delivering the builder as code you run on your own infrastructure.

  1. 01

    Drops into your Next.js codebase, or runs beside it

    Install chaipro as an npm package in your Next.js app. Core product on Rails, Laravel, Django, Go or .NET? Run it as a companion Next.js website service in your cloud that reads live records from your existing API or database. That is one more Node.js service for your team to deploy, monitor and scale.

  2. 02

    Your database, your tables

    Pages, blocks, revisions, permissions and media metadata live in your own PostgreSQL or SQLite database. ChaiBuilder never sits in your request path and has no access to your customers' data.

  3. 03

    Register your own React blocks

    Wrap your existing React components with typed props and they become visual blocks in minutes. Your engineers build the high-leverage domain blocks; your customers assemble and publish pages without filing tickets.

  4. 04

    Inspect the code before you buy

    Never bet your platform on a black box. The core visual builder (chaicore) is BSD-3-Clause open source on GitHub. Audit it today, and license chaipro when you need production multi-tenancy, RBAC, Postgres and MCP.

    Explore the open-source core

Frequently asked questions from engineering teams

Anything else, bring it to a 30-minute demo call.

Can we build a hybrid, using our own React components inside chaipro?

Yes, that is the core workflow. You register standard React components with a schema definition, chaipro generates the visual property controls in the builder, you bind them to server-side data, and AI agents can place them on pages through the MCP server.

What happens to our customer sites if we stop renewing the license?

Every live customer site keeps running. chaipro runs on your servers and stores data in your database, so there is no remote kill-switch. A lapsed license stops access to new releases and support, so you stay on the last version you were licensed for. Over time that can hold back upgrades to React, Next.js or Node, so plan a renewal or a migration before you need one for a security fix.

How does chaipro handle multi-tenant custom domains and SSL?

One deployment serves any number of isolated customer sites and domains, resolved at runtime in your own Next.js app (Vercel, Netlify, Cloudflare, Docker or any Node host). chaipro does not issue certificates: custom-domain SSL comes from your hosting or edge layer, such as Cloudflare for SaaS, Vercel's multi-tenant domains or on-demand TLS in Caddy.

How long does it take to integrate chaipro into an existing SaaS product?

Teams typically go from pilot to production rollout in weeks. Pro engagements can include Build Services, scoped and billed separately, where we wire up your pilot, bind your data to custom blocks and migrate existing customer sites with you.

Skip the 6-month detour. Ship your multi-tenant builder this month.

Keep your senior engineers on the features that differentiate your SaaS. Let chaipro handle the visual canvas, responsive tokens, multi-tenant caching and AI agent infrastructure, inside your own stack.

Book a 30-minute architecture walkthrough Explore the open-source core

One flat yearly license · Unlimited customer sites · Zero per-site or AI token fees

lockup-horizontal-light.png

The website builder for agents and humans. Owned by you. The website module for platforms and agencies that run many sites, self-hosted on Next.js.

Product

COMPARE

Resources

OTHER

© ChaiBuilder. All rights reserved.