pagebee.de
Multi-tenant SaaS that lets businesses tailor their website by chatting with an AI: per-tenant git repo, preview, Netlify deploy on approval.
Small businesses can't afford a developer for every opening-hour change or every new hero image, but they still need modern, fast websites. Pagebee solves that via chat: the owner writes 'swap the hero photo and update opening hours to 8-18', an orchestrator translates that into tool calls against the customer's own git repo, commits on a draft branch, renders a preview and waits for approval. Each customer has an isolated repo, plan-based safety rules and full revision history. For onboarding there is also a dedicated Claude Code pipeline: it reads a prospect's existing website and automatically builds a modern React version from it. Live as a multi-tenant SaaS at pagebee.de.
Technical deep-dive
Stack, architecture, trade-offs
Stack
Runtime
Models
Storage
Auth
Realtime
Infra
From chat to deploy
One session, seven steps. Everything waits for approval before the live push: preview-first by default.
- 1
Owner writes in the editor: 'swap the hero photo and change opening hours to 8-18'.
- 2
Edit request lands in the Postgres queue with status PENDING → RUNNING.
- 3
Orchestrator initialises a session with site context, plan rules and tool set.
- 4
Tool loop: AI explores the repo, reads content files, edits surgically. Live events stream to the UI over WebSocket.
- 5
AI calls finalize_edit_with_commit; complexity rules are validated against the plan.
- 6
If OK: commit to a draft branch, Netlify preview, revision record created.
- 7
Owner sees the preview, hits deploy → push to main, Netlify production build.
Key engineering decisions
Tenant-isolated git repos, not DB strings
Every customer site is a real git repo under repos/{slug}. Revisions, rollbacks and previews become plain git operations: no custom version mechanism, no custom diff.
Provider-agnostic tool loop
Claude and OpenAI share a single tool schema and a common event stream. Provider is swappable per edit request: environment default, request override.
Hard-enforced token budget
File reads, search results and conversation history get trimmed to hard limits before they go to the provider. Cost stays predictable on basic plans; the orchestrator doesn't become a cost trap.
Plan-gated safety rules
Configurable per plan: maxFilesChanged, maxLinesChanged, maxTotalDiffBytes, allowedPaths, allowLayoutChanges. Basic plans only see content/** and public/uploads/**, pro plans get layout access. Validation runs at the finalize step, not per tool call.
Live activity stream over WebSocket
Tool calls and model deltas push to the editor UI in real time. The owner sees 'AI reads content/hero.md', 'edits ...', 'commit'. No black-box waiting spinner.
Onboarding pipeline as a separate process
The 6-phase pipeline does NOT run as a studio subprocess. It is its own Claude Code setup with its own skills (skills/), runnable independently of the studio. Telegram bot triggers it. Clean cut between onboarding tooling and runtime SaaS.
Trade-offs
Where the system pushes back, and what for.
Tenant git repos instead of DB versions
A real git repo per customer turns revisions, rollbacks and previews into plain git operations. In exchange: more disk I/O, per-customer backup complexity, a non-trivial storage footprint. Paid deliberately to avoid building and maintaining a custom versioning layer.
Validate at finalize, not per tool call
Complexity rules check the aggregated diff at the end, not each tool call. Consequence: the AI occasionally burns tokens on work that the finalize step then rejects. The upside is that editor UX stays calm throughout. No flaky tool that throws 'BLOCKED' mid-action.
Provider-agnostic tool loop (Claude + OpenAI)
Both providers work against the same tool schema and the same event stream. Plainly: no extended-thinking modes, no provider-specific prompt caching, no vision input. What remains is a stable data model and a model switch that's a config change rather than a migration.
Hard token budget per edit request
File contents, search results and conversation history get trimmed to hard limits before every provider call. The cost is real: the AI sometimes gets cut off mid-thought and has to restart. The benefit is that basic plans stay cost-predictable; the orchestrator doesn't become a cost trap.
Onboarding pipeline as its own process
The 6-phase pipeline for new customers does not run inside the studio runtime; it's a separate Claude Code setup with its own skills. Missing: a shared progress UI and a shared auth context. Gained: onboarding tooling and runtime SaaS don't deploy each other and don't load each other down.
Tool loop - 8 tools
The loop is provider-agnostic: Claude (default) and OpenAI share exactly this tool schema and a common event stream.
| Tool | Description |
|---|---|
| list_project_files | Lists project files, optionally filtered by glob. |
| search_files | Full-text search through the tenant repo. |
| read_project_file | Reads a file relative to project root. |
| edit_file | Targeted string replacement in an existing file. |
| write_project_file | Writes a file (new or overwrite). |
| delete_project_file | Deletes a file from the repo. |
| summarize_project_changes | Aggregated diff: changed files, +/- lines. |
| finalize_edit_with_commit | Closes the session: validates complexity rules, commits, deploys preview. |
Onboarding pipeline - 6 phases
A dedicated Claude Code process for onboarding: it reads a prospect's existing website and automatically builds a modern React version from it. Vite + React 18 + Tailwind, Netlify Forms and hosting.
1. Scrape & Analyze
low (scripted)Extract the existing site with a custom scraper: text, images, colors, fonts, structure.
2. Research & Plan
mediumIndustry research, sitemap, design direction.
3. Content & Design
mediumPer-page copy, design tokens, image selection.
4. Implement
highRich template ships header / footer / forms / SEO; only page content gets newly written.
5. QA & Verify Build
lownpm run build must be green; lint and visual checks.
6. Sales Pitch
lowGenerates a sales-call script for cold outreach.
Deployment
Docker Compose for local Postgres; studio runs as a Next.js app. Netlify handles actual hosting for customer sites, both previews and production builds. An nginx preview config is bundled as a fallback for self-hosted previews.