Struq
Een tool voor developers met kant-en-klare design componenten voor AI, plus een veilige MCP-koppeling om context direct in je IDE te laden.
- Jaar
- 2026
- Rol
- Volledig solo ontworpen en gebouwd: frontend, backend, MCP-server en deployment.
- Status
- live
- Stack
- Next.js, TypeScript, PostgreSQL, Drizzle, Auth.js, MCP, OAuth 2.1, Railway
Een platform met kant-en-klare visuele componenten en gestructureerde prompts voor AI. Via een ingebouwde MCP-koppeling kunnen tools zoals Claude Code en Cursor zelfstandig de juiste stijlen opzoeken en direct in je code plaatsen.
Vraag je een taalmodel om een interface, dan levert het standaard een generieke template. Om consistente kwaliteit te krijgen, moet je een model voeden met strakke regels en design context. Daarnaast is er veiligheid: geef je een AI-agent toegang tot data of bestanden, dan moet je rechten en restricties hard in je backend afdwingen, niet hopen dat een prompt het goed begrijpt.
Design en prompts als data in plaats van losse tekst
Elk component in de bibliotheek heeft vaste metadata en kant-en-klare prompts voor LLM's. Alle content staat gewoon in Git. Bij elke deployment draait een importscript dat alles direct synchroniseert met de PostgreSQL-database. Versiebeheer is de single source of truth, zodat de database altijd synchroon loopt met de codebase.
Schone context voor AI-agents
Als je met AI programmeert, wil je niet dat het model verdwaalt in te veel context of onbedoeld bestanden aanpast. Struq gebruikt een modulaire opzet: een agent laadt eerst de basisregels en daarna alleen de instructies en tools voor de specifieke taak (zoals een database migratie of een frontend component). Dat voorkomt hallucinaties en houdt de workflow snel.
Veilige API via OAuth 2.1 en MCP
Voor de koppeling met externe tools draait Struq als eigen OAuth 2.1 server met PKCE. Er zijn 8 MCP-tools beschikbaar. Tools die data kunnen aanpassen, worden alleen aan de AI-sessie meegegeven als het token ook echt schrijfrechten heeft. Heeft een agent alleen leesrechten? Dan ziet het model die tools niet eens. Ook is er bewust geen delete-tool ingebouwd.
CI/CD pipeline met automatische checks
Elke push doorloopt een vaste pipeline: TypeScript checks, linter en tests. Bij een release draaien eerst de database migraties, synchroniseert de asset catalogus en checkt het script of de cloudopslag goed bereikbaar is. Pas als alles slaagt, gaat het live verkeer over.
- 01
Schrijftools niet tonen zonder schrijfrechten
AanleidingAls een AI-agent een tool ziet en bij het aanroepen een 'access denied' foutmelding krijgt, gaat het model het vaak opnieuw proberen met een andere prompt. Dat kost onnodig tokens en tijd.
KeuzeTools worden gefilterd op basis van de scopes in het OAuth-token. Zonder schrijfrechten bestaan die tools simpelweg niet in de toolset van het model. Geen foutmeldingen, geen herhaalpogingen.
Wat het kostteTwee sessies onder hetzelfde account kunnen verschillende tools zien afhankelijk van de gekozen scopes. Dat moet je even duidelijk uitleggen in de documentatie.
- 02
Geen delete-acties voor AI
AanleidingAls je een taalmodel toegang geeft tot opgeslagen data of collecties, kan één verkeerd begrepen prompt data wissen.
KeuzeDe MCP-server heeft bewust geen delete-tools. Aanpassingen werken met veilige status-updates (zoals wel of niet opgeslagen). Echt iets definitief verwijderen doe je zelf via het dashboard.
Wat het kostteJe kunt een collectie niet via een chat prompt definitief wissen; je moet er even voor naar de webinterface. Wel zo veilig voor je data.
- 03
Open voor gebruikers, maar de auth-structuur staat al
AanleidingBij de start wil je geen drempels opwerpen met verplichte accounts of betaalmuren, maar je wilt de codebase later ook niet moeten herschrijven om alsnog rollen toe te voegen.
KeuzeDe bibliotheek is nu gratis en direct open. De rollenstructuur, token checks en rechtenlogica zitten al volledig in de backend gebouwd. Afschermen van features is straks een kwestie van een vlaggetje omzetten in de config.
Wat het kostteEr zit al wat backend-code in productie voor features die nu nog openstaan. Goed documenteren dus.
- 04
De rate limiter die stil alles blokkeerde
AanleidingNa een update kregen alle API-calls en inlogpogingen ineens een 503 error. De logs lieten geen crash zien, omdat de rate limiter stil al het verkeer tegenhield door een ontbrekende config key.
KeuzeDoor het netwerkverkeer stap voor stap terug te traceren naar de middleware, vond ik de oorzaak snel. Ik heb de middleware aangepast met graceful degradation: als de centrale cache wegvalt, valt de rate limiter terug op lokaal geheugen en stuurt direct een waarschuwing naar de logs in plaats van alles te blokkeren.
Wat het kostteBij uitval van de externe cache telt de limiter tijdelijk per server-instantie in plaats van globaal, maar de app blijft tenminste gewoon online voor gebruikers.
- 05
Beelden gebundeld per sector
AanleidingMet honderden losse beelden maakte de AI er visueel een rommeltje van: verschillende stijlen, belichting en formaten op één pagina.
KeuzeDe 480 beelden zijn verdeeld over 20 sectorpakketten (zoals tech, zorg of zakelijke dienstverlening). Binnen een pakket heeft alles dezelfde stijl en belichting. Ook bevat elk beeld metadata over waar het hoort (zoals hero of feature) en de beeldverhouding, zodat de AI weet waar het past.
Wat het kostteIets minder willekeurige keuze, maar gegarandeerd een strakke en consistente layout.
- Draait live op struq.nl en gebruik ik zelf dagelijks bij het bouwen van software.
- 8 geteste MCP-tools achter OAuth 2.1 met PKCE, met duidelijke scopes per token.
- 480 geoptimaliseerde beelden in 20 sectorpakketten, direct op te vragen door AI-agents via JSON endpoints.
- Geautomatiseerde CI/CD pipeline met TypeScript checks, tests en database migraties.
- Een helder changelog en documentatie van opgeloste issues en architectuurkeuzes.
Een rate limiter of security-laag mag bij een ontbrekende configuratie nooit stil de boel platleggen (fail-closed zonder logs). Gebruikers zien een 503 storing terwijl de app zelf prima werkt. Ik zorg nu altijd voor graceful degradation met een veilige fallback en duidelijke logging. Die check doe ik nu standaard bij elke externe service of middleware.