Our company website serves as a working demo of how we build things — not a polished marketing site built by an agency, but an actual codebase that uses the same tools and workflows we bring to client projects. Every line of code is visible on GitHub, and the entire stack is open-source. We believe the most secure systems are built from open-source stacks.
The Initial Plan
When we set out to build this site, the mandate was simple: use the same stack we'd recommend to a client. Svelte 5 for the frontend, Directus for content management, and Trae IDE with Model Context Protocol (MCP) integrations for the development workflow. The full source is at studio-os.
The result? You're looking at it.
In business terms: our stack is fully open-source and can be replicated by anyone with some DevOps knowledge or a single developer, with almost zero annual hosting cost for small websites. We'll detail our infrastructure approach in the HomeLab series.
Our Tech Stack
Frontend: Svelte 5 + SvelteKit
We chose Svelte 5 for its approach to reactivity and performance. Unlike React-based frameworks that rely on virtual DOM diffing, Svelte compiles components to optimised vanilla JavaScript — smaller bundles, better runtime performance, and no virtual DOM overhead. The runes system and improved TypeScript support made development faster. Server-side rendering comes built-in with SvelteKit for SEO and initial load performance.
If you're from the Vue world, it's similar — we love Vue too, and use it heavily in Node-RED dashboards.
Backend: Directus as Headless CMS
Rather than building a custom CMS, we implemented Directus as our headless content management system. Instant REST and GraphQL APIs out of the box, flexible content modelling, and a user-friendly admin interface that non-technical team members can use without training. Self-hosted as part of our HomeLab infrastructure.
Note: We've since dropped Directus entirely in favour of static markdown files checked into Git and Turso for transactional data. The reasons are covered in our February 2026 stack update.
The Development Workflow: Trae IDE with MCP
This is where the workflow got genuinely interesting. Trae IDE combined with Model Context Protocol (MCP) servers changed how we interact with our tools:
Directus MCP Integration — the AI in our IDE could query content directly, inspect the CMS schema, and even create or update content without switching windows. Real example: I'd describe a new blog post structure, and the AI would create the Directus collection, set up the fields, and generate the TypeScript types in one flow.
Shadcn/ui MCP Integration — instead of browsing component documentation in a browser tab, the AI could search the entire Shadcn component library from within the IDE, suggest which components fit a UX need, and implement them with correct imports and dependencies. No more CSS wrestling with isolated, community-maintained components.
AI-Assisted Content and SEO
With Directus MCP, we could prompt the AI in Trae IDE to fill in empty SEO metadata across the site — meta descriptions, OpenGraph tags, structured data. Our team reviews and rephrases everything, but it takes hours off the initial drafting work. This doesn't replace human-written content, but it handles the tedious scaffolding.
A Note on Code Quality
The quality of AI-generated code architecture at this point is genuinely impressive — with a caveat: you still need to understand web development fundamentals, server infrastructure, and actual software engineering to build anything complex and long-lasting. The AI amplifies skill; it doesn't replace it.
What This Delivers
- Development speed: 5-10x faster implementation with MCP integrations
- Code quality: Consistent patterns enforced by AI rules and documentation
- Performance: Lighthouse scores consistently high across all metrics
- Hosting cost: Effectively zero for our usage tier
Open Source
We believe in contributing back to the community that makes our work possible. Our development approach and tools are documented and shared through open-source projects.
Watch our repository at github.com/AlphaBitsCode/studio-os for updates on new tools and techniques.