Ik bouwde in twee maanden een open-source CMS voor agencies, met AI-agents

"Kunnen we later nog content toevoegen, of zelf dingen aanpassen?"

Bij MINIMA krijgen we die vraag bij bijna elk project. Een klant wil nieuws posten, een vacature toevoegen of een typfout op de teampagina oplossen, lang nadat we de site hebben opgeleverd. We bouwen elke site in code met TanStack Start, dus elke aanpassing kwam vroeger als een kleine codewijziging bij ons terecht.

Vrienden voor wie ik sites maakte, vroegen hetzelfde. Dus bouwde ik waar ik zelf steeds naar zocht: Areca CMS, een open-source CMS voor agencies die veel klantwebsites beheren. Ik bouwde het alleen, in mijn vrije tijd na het werk, in ongeveer twee maanden. Het meeste werk aan de code deden AI-agents. Ik schreef de specificaties, reviewde alles en testte het.

Het heeft een MIT-licentie, je host het zelf, en het is nog vroeg (v0.x). Probeer de live demo of bekijk de code op GitHub.

Het probleem

De meeste headless CMS'en zijn gemaakt voor één bedrijf met één website. Een agency heeft net de omgekeerde vorm: tientallen klanten, elk met een site of twee, en elk met mensen die alleen hun eigen content mogen zien.

Wat we nodig hadden:

• Eén installatie voor al onze klanten, met rollen per klant (eigenaars en redacteurs) en een agency-overzicht van alles.
• Een editor die simpel genoeg is voor een klant die nog nooit van "headless" gehoord heeft.
• Een goedkeuringsstap: een klant schrijft een concept, iemand keurt het goed, en pas dan gaat het live.
• Snelle statische sites die het CMS nooit aanroepen, zodat een storing in het CMS nooit een klantsite plat kan leggen.
• Volwaardige ondersteuning voor TanStack Start, want daar bouwen we alles mee.
• Content op onze eigen servers.

Waarom niet Payload, Sanity, Strapi of Directus?

Het zijn allemaal goede tools, en ik heb ze alle vier bekeken. Ze pasten gewoon niet bij hoe wij werken.

• Payload heeft een MIT-licentie en een multi-tenant plugin, maar draait sinds versie 3 binnen een Next.js-app. Wij gebruiken geen Next.js. Alles wat we bouwen is TanStack, en ik wilde niet per klant een tweede framework onderhouden.
• Sanity is gehost. Elke redacteur bij een klant is een betaalde seat (ongeveer $15 per seat per maand op het Growth-plan), de content staat in hun cloud in plaats van op onze servers, en single sign-on zit in het Enterprise-plan. Voor een agency met veel kleine klanten loopt dat snel op.
• Strapi kun je gratis zelf hosten, maar er is geen ingebouwde multi-tenancy, dus draai je uiteindelijk één installatie per klant. Review-workflows en SSO zijn betaalde functies.
• Directus is een sterk dataplatform, maar het is source-available in plaats van open source, en het is meer een database-interface dan een editor. Onze klanten hebben een simpele flow nodig: schrijven, goedkeuren, publiceren.

Wat Areca CMS doet

Gemaakt voor agencies. Eén installatie bevat al je klanten. Elke klant krijgt eigen sites, eigenaars en redacteurs. Agency-beheerders zien alles, en je kunt het CMS in je eigen huisstijl zetten.

Een visuele editor. Klanten bewerken naast een live voorbeeld van hun echte site, en klikken op een deel van de pagina om meteen naar het juiste veld te gaan.

Veilig publiceren. Redacteurs schrijven concepten, eigenaars zetten ze klaar, en Go live bevriest de goedgekeurde content in een snapshot en bouwt de site. De website haalt die snapshot op tijdens de build, dus bezoekers krijgen statische pagina's en raken het CMS nooit. Releases hebben een geschiedenis, rollback en health checks. Een mislukte deploy vervangt nooit de live site.

SEO en AI-antwoorden ingebouwd. Elk item heeft velden voor zoekmachines, social media en structured data, met optionele AI-suggesties via OpenRouter.

Gemaakt voor AI. Elke site heeft een eigen MCP-server. Claude, ChatGPT, Cursor en andere AI-apps kunnen concepten schrijven met precies dezelfde rechten als de persoon die ze koppelde. Een AI kan een concept schrijven, maar de goedkeuringsstap niet overslaan, tenzij jij dat toestaat.

En verder: meertalige content, rich text met codeblokken, een mediabibliotheek, sitebrede content zoals bedrijfsgegevens, inplannen, deploy-adapters voor Dokploy en Cloudflare, een wegwerp-ontwikkelomgeving per site, tweestapsverificatie, en inloggen met Google en Microsoft.

Gebouwd op TanStack

Het CMS, de documentatiesite en de landingspagina zijn allemaal TanStack Start-apps. Areca gebruikt overal TanStack Start, Router en Query, en TanStack AI voor de AI-functies. Tijdens het bouwen laadden de agents de skills van de TanStack-bibliotheken zelf via TanStack Intent, wat veel hielp om de nieuwste API's juist te gebruiken.

Aan de kant van de website beschrijf je je content in areca.config.ts:

import { defineSiteContent } from '@areca-cms/site-sdk'

export default defineSiteContent({
  siteKey: 'my-client-site',
  collections: {
    posts: {
      label: 'Posts',
      route: '/posts/$slug',
      fields: [
        { key: 'title', label: 'Title', type: 'text', required: true },
        { key: 'slug', label: 'Slug', type: 'slug', required: true },
        { key: 'body', label: 'Body', type: 'richtext', required: true },
      ],
    },
  },
})

Daarna schrijft areca pull tijdens de build de gepubliceerde content en gegenereerde types in je project, zodat elke collectie getypeerd is van schema tot pagina. Gebruik je een AI-codeeragent, dan leert npx @areca-cms/skills hem een nieuwe site voor je op te zetten.

Hoe ik het bouwde met AI-agents

Dit project was ook een experiment. Ik wilde zien hoe groot een systeem kan worden dat één persoon bouwt en onderhoudt met de AI-tools van vandaag, en of dat nuttig kan zijn voor ons bedrijf en voor de bredere community.

De tools: Claude Code, Codex, Cursor, T3 Code en Claude Design. Mijn rol was alles behalve het meeste typwerk: specificaties schrijven, reviewen, testen en beslissen.

De cijfers, van 7 september tot 6 november 2026:

• 589 commits en 120 gemergede pull requests
• Ongeveer 233.000 regels TypeScript
• 387 testbestanden, waarvan 40 end-to-end browsertests
• Ongeveer 4,2 miljard tokens over alle tools heen (97% daarvan is het model dat gecachte context opnieuw leest)
• Rond $500 tot $650 als ik API-prijzen had betaald. Ik betaalde drie abonnementen van $20 per maand: Claude, Codex en Cursor.

Wat in het begin niet werkte

Twee problemen kwamen al snel boven.

Agents deden met de UI wat ze wilden. Ik wilde een premium, vloeiende ervaring, en een agent die je laat begaan, verzint graag zijn eigen witruimte, kleuren en interacties. Elke functie zag er net iets anders uit.

Agents zeiden dat ze klaar waren, terwijl dat niet zo was. Gemiste randgevallen, halfafgewerkte functies, ontbrekende opties, en af en toe een mogelijk beveiligingslek. De agent geloofde oprecht dat het werk af was.

De werkwijze die het oploste

Na verloop van tijd werd dit het proces voor elke functie:

1. Eerst grillen. Voor er code komt, ondervraagt een agent me over de functie, vraag per vraag, tot we het over elke beslissing eens zijn. Dat wordt een geschreven specificatie.
2. Bouwen. Claude Opus 5.5 is de hoofdontwikkelaar en werkt vanuit de specificatie.
3. Laat het zien. Elke wijziging komt met een tijdelijke preview-URL en screenshots, zodat ik het zelf kan bekijken voor de agent verdergaat. Niets gaat verder tot ik het gezien heb.
4. Bewijs het. Elke wijziging moet de volledige testsuite halen, plus end-to-end tests voor nieuw gedrag. Agents openen de app ook in een headless browser en klikken de functie door, om te checken of iemand die nieuw is begrijpt wat er gebouwd is.
5. Review door een ander model. Als de ontwikkelaar denkt dat hij klaar is, reviewt een ander model alles met een frisse blik: Codex met GPT 6.1 Sol. Het rapporteert problemen gerangschikt van Nitpick via Low, Medium en High tot Critical.
6. Controleer de review. Ook reviewers hallucineren, dus twee andere agents (Grok 4.6 en nog een Opus 5.5) controleren elke bevinding: is dit een echt probleem, of iets wat in de praktijk onmogelijk is? Ze geven een samenvatting met actiepunten terug: wat oplossen, hoe, waarom, en hoe belangrijk het is.
7. Ik beslis. Ik kies de bevindingen die er echt toe doen voor het project, en de ontwikkelaar lost die op.

De review ving heel wat op. Daarvoor werden functies onaf of met onhandige UX opgeleverd. Daarna was het meeste wat bij mij aankwam al degelijk, en ging mijn tijd naar productbeslissingen in plaats van bugs zoeken.

Wat ik meeneem

• Het knelpunt verschuift van code schrijven naar beslissen wat je bouwt en controleren of het klopt. Specificaties en review zijn nu het hoofdwerk.
• Vertrouw nooit op "klaar". Laat de agent bewijs tonen: screenshots, een preview-URL, geslaagde tests, een doorloop in de browser.
• Een tweede model is een veel betere reviewer dan het model dat de code schreef. Een derde controle op de review houdt de ruis laag.
• Context is alles. Korte specificaties, duidelijke regels in de repo en skills voor de agents maakten meer verschil dan welk model ik gebruikte.

Status en wat komt

Areca CMS is nog vroeg, versie 0.x. Het draait voor echte sites, maar verwacht nog ruwe randjes. Volgende op mijn lijst: meer deploy-doelen, meer veldtypes, en alles gladstrijken waar de eerste gebruikers tegenaan lopen.

Bouw je sites voor klanten, zeker met TanStack Start? Dan hoor ik graag je feedback. Probeer de live demo, lees de documentatie, of open een issue op GitHub.

Een klein bewijs dat het AI-gedeelte werkt: Claude schreef dit artikel rechtstreeks in mijn eigen Areca CMS via de MCP-server, als concept. Daarna heb ik het nagelezen, aangepast en zelf op Go live gedrukt.