Building Alpha Bits website with AI-Powered Workflows

Our company website Alpha Bits serves as a living showcase of modern web development practices, AI-assisted workflows, and the cutting-edge technologies that power today's most efficient development teams. As we make updates to our website, every line of code is visible, and follow best practices in cyber security. We believe that the most secured systems are built from open-source stacks.

The Initial Plan

When we set out to build our corporate website, we had a clear mandate: demonstrate the same level of innovation and efficiency we bring to our clients. This meant leveraging the latest technologies, implementing AI-powered development workflows, and creating a foundation that could scale with our growing business. Visible to public at our Github repo studio-os.

The result? You are looking at it.

A website built with Svelte 5, powered by a lightweight Directus backend, and developed entirely within Trae IDE using Model Context Protocol (MCP) integrations that revolutionize how we work with both our CMS and UI components.

In simple business terms: Our stack is fully open-source and can be replicated easily with some technical knowledge in DevOps or a single Developer, with almost zero annual hosting cost for small websites. We would detail our approach to achieve this in another detailed blog post about Networking and Infrastructure. 

Our Tech Stack: Modern, Efficient, Scalable

Frontend: Svelte 5 + Svelte Kit

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 highly optimized vanilla JavaScript, resulting in:

• Smaller bundle sizes – Critical for performance and SEO
• Better runtime performance – No virtual DOM overhead
• Improved developer experience – With the new runes system and enhanced TypeScript support
• Server-side rendering – Built-in with SvelteKit for optimal SEO and initial load times

If you are from Vue world, it's similar, we love Vue too, heavily used it in Node-RED dashboards.

Backend-as-a-Service: Directus as a Lightweight CMS

Rather than building a custom CMS or wrestling with heavyweight solutions, we implemented Directus as our headless content management system. This choice delivers:

• Instant API generation – RESTful and GraphQL endpoints out of the box
• Flexible content modeling – Dynamic schemas that evolve with our needs
• User-friendly admin interface – Non-technical team members can manage content easily
• Self-hosted control – Part of our HomeLab infrastructure series

Setting up Directus is part of our HomeLab IoT Series, where we show how to build self-hosted infrastructure using open-source tools and AI assistance for configuration and optimization.

The Game Changer: Trae IDE with MCP Integration

Here's where our development workflow gets truly revolutionary. Trae IDE, combined with Model Context Protocol (MCP) servers, transforms how we interact with our development environment.

Directus MCP Integration

Our Directus MCP server provides direct integration between our IDE and content management system:

• Real-time content queries – Fetch and preview content without leaving the IDE
• Schema introspection – Understand data structures and relationships instantly
• Content creation and updates – Manage CMS content directly from the development environment
• Type generation – Automatic TypeScript types based on Directus schemas

Shadcn/ui MCP Integration

Our Shadcn MCP server change how we implement the basic UI with existing highly reusable community components:

• Component discovery – Browse and search the entire Shadcn component library, we can ask which libraries are suitable for certain UX/UI needs, or we can check the demo code before we add to the code.
• Instant implementation – Add components with proper imports and dependencies, automatically and correctly done by the IDE and AI models.

You don't have to deal with (too much) CSS mess, since the components are isolated and maintained by community developers.

AI-Powered Development Workflow

The integration of AI throughout our development workflow has AI assistance at every level:

Intelligent Component Selection

When building UI, the AI model analyzes requirements and suggests appropriate Shadcn components, complete with implementation examples and customization options (Done by the IDEs and AI models).

Content Strategy and SEO

With Directus MCP, we can prompt the AI in the IDE tool (Trae IDE / Claude Desktop / Warp AI Terminal) to 'fill in the blanks' for where our SEO meta data are still empty. After which, our team will review and rephrase them. This of course does not fully replace human-written content, but it does take a lot of hours off of our team work.

Code Quality and Architecture

The quality of code and architecture by AI models coding at this point is beyond any human programmer can, with a caveat: you still need to understand the fundamental of web development, apps development, server, hosting and actual software engineering to build anything complex and long-lasting.

Performance Meets Productivity

This latest development stack delivers concrete performance:

• Development Speed – easily 5-10x faster implementation with external MCP integrations.
• Code Quality – Consistent patterns and best practices enforced by AI Rules and documentation.
• Performance – Lighthouse scores consistently high across all metrics.
• Maintainability – Clear separation of concerns and type-safe interfaces.
• Scalability – Headless architecture supports multiple frontends and integrations

Open Source and Community

We believe in contributing back to the community that makes our work possible. Our development approach and tools are documented and shared through our open-source projects.

⭐ Watch our repository to get updates on new tools and techniques we're developing working with AI Tools.

DIY HomeLab: The Complete Picture

This website is just one component of our comprehensive HomeLab infrastructure.

This series covers:

• Directus Setup – Self-hosted CMS with Docker and reverse proxy configuration
• CI/CD Pipelines – Automated testing, building, and deployment
• Monitoring and Analytics – Performance tracking and user behavior analysis
• AI-Assisted Operations – Automated server management and optimization
• Security Hardening – Best practices for self-hosted applications

What's Next?

We're continuously evolving our development stack and sharing our learnings. Upcoming additions include:

• Advanced MCP Servers – Custom integrations for project management and analytics
• AI-Powered Testing – Automated test generation and maintenance
• Performance Optimization – AI-assisted bundle analysis and optimization
• Multi-tenant Architecture – Scaling our approach for client projects

Ready to transform your development workflow? Explore our open-source projects, follow our HomeLab series, and discover how AI-assisted development can revolutionize your team's productivity.

Visit our GitHub repository to explore the source code and see these concepts in action.