What is SynthStack?

SynthStack is an AI-native SaaS boilerplate that ships production-ready applications for web, iOS, Android, and desktop from a single codebase. Built on Vue 3 and Quasar Framework, it's the foundation we use at Manic Agency to launch client projects in days instead of months.

Unlike typical boilerplates that bolt on features as afterthoughts, SynthStack was designed from the ground up for the AI era—with a built-in AI Copilot, semantic vector search, and intelligent automation baked into every layer.

The Problem We Solve

Every new SaaS project starts the same way: weeks spent on authentication, billing, email, CMS, deployment. Then you add AI features and spend more weeks integrating OpenAI, handling rate limits, managing costs. Finally, a client asks for a mobile app and you're back to square one.

SynthStack eliminates this entirely:

• Auth complexity? Toggle between Supabase (managed OAuth) or local PostgreSQL (self-hosted) with zero code changes
• Billing setup? Stripe subscriptions, lifetime licenses, usage-based pricing—already configured with webhooks and customer portal
• AI integration? GPT-4o + Claude fallback with streaming, cost tracking, and credit systems built-in
• Cross-platform? One pnpm build produces web, PWA, Electron desktop, and Capacitor iOS/Android

Core Features

🤖 AI Copilot (GPT-4o + Claude)

A production-ready chat assistant available throughout the app via ⌘K or the floating button:

• Real-time streaming with markdown and code syntax highlighting
• RAG-powered context from indexed documentation via Qdrant
• Cost tracking with per-organization breakdowns and budget alerts
• Automatic fallback from GPT-4o to Claude 3.5 for reliability

🔐 Flexible Authentication

Choose your auth provider at runtime—no code changes required:

Both include: Argon2id password hashing, JWT access/refresh tokens, account lockout, email verification, and session management with token rotation.

💳 Stripe Billing (4 Tiers + Lifetime)

Complete billing system with subscriptions and one-time payments:

📝 Directus CMS

Directus provides a headless CMS that automatically models your PostgreSQL database:

• WYSIWYG editor for blog posts, product pages, documentation
• Media library with image transformations and asset management
• Custom extensions for themes, newsletters, FAQ management
• REST & GraphQL APIs for accessing content from any client

🌐 Cross-Platform Builds

One codebase, five platforms:

# Web + PWA
pnpm build:web

# iOS (requires Xcode)
pnpm build:ios

# Android (requires Android Studio)
pnpm build:android

# Desktop (Electron)
pnpm build:electron

🔍 Vector Search (Qdrant)

Semantic search powered by Qdrant for:

• RAG-based document retrieval for the AI Copilot
• Intelligent search across knowledge bases
• Similarity matching for content recommendations

🎮 Gamification & Referrals

Built-in engagement systems (Pro Edition):

• XP and achievements for user progression
• Referral codes with reward tracking
• Leaderboards for community competition

Development Journey

SynthStack emerged from a simple realization: we kept building the same foundation for every client project. Here's how it evolved:

December 7, 2025 — Initial Commit

The first commit laid the foundation: Vue 3 + Quasar with TypeScript, PostgreSQL, Redis, and Docker Compose. We integrated Stripe, email systems (Mailgun/SendGrid), and analytics from day one.

December 12, 2025 — Onboarding & CMS

Added a comprehensive onboarding wizard for new users and deep Directus integration. The CMS became the central hub for managing all content—blog, products, themes, newsletters.

December 25, 2025 — AI Agents & Gamification

The Christmas release brought the AI Copilot, gamification system, and referral tracking. We also added support for Python backends (FastAPI, Django) for teams preferring that stack.

January 2026 — Cross-Platform & Stabilization

Mobile builds arrived via Capacitor, desktop builds via Electron. The test suite grew to 920+ tests. CI/CD pipelines now auto-deploy to any VPS provider.

Technical Architecture

synthstack/
├── apps/
│   └── web/                      # Vue 3 + Quasar (PWA, iOS, Android, Desktop)
├── packages/
│   ├── api-gateway/              # Fastify REST API
│   ├── ts-ml-service/            # NestJS ML service (TypeScript-only)
│   ├── types/                    # Shared TypeScript types
│   └── directus-extension-synthstack/  # CMS extensions
├── services/
│   └── directus/                 # Directus config (101 migrations)
└── deploy/
    ├── docker-compose.yml        # Production stack
    └── nginx.conf                # Reverse proxy config

Key Technologies:

• Frontend: Vue 3, Quasar 2, TypeScript, Pinia, SCSS
• Backend: Fastify (Node.js), NestJS (ML service)
• AI/ML: OpenAI SDK, Anthropic SDK, Qdrant
• Database: PostgreSQL 16, Redis 7
• CMS: Directus 11.x with custom extensions
• Deployment: Docker Compose, GitHub Actions, Nginx

Getting Started

Prerequisites

• Node.js 20+
• pnpm 9+
• Docker & Docker Compose

Quick Start

# Clone
git clone https://github.com/manicinc/synthstack.git
cd synthstack

# Install
pnpm install

# Configure
cp .env.example .env
# Edit .env with your Supabase/Stripe/OpenAI keys

# Start services
docker compose up -d

# Run frontend
pnpm dev:web

Access points:

• Frontend: http://localhost:3050
• API: http://localhost:3003
• Directus: http://localhost:8099/admin

Part of the Manic Ecosystem

SynthStack connects with other tools we've built:

• Frame.dev — AI orchestration runtime powering the copilot
• Quarry.space — Knowledge management with semantic search
• HackBase.io — Startup validation and link building for launches

Open Source

SynthStack Community Edition is MIT licensed. Use it for side projects, client work, or as a learning resource.

SynthStack Pro adds Python backends (FastAPI, Django), referral systems, and advanced AI copilots for commercial use.

---

Ready to build your agency? Get started with SynthStack →