LoopFlow Monorepo

WIP 🚧

A modern monorepo featuring Next.js applications with AI capabilities, shared UI components, and Supabase integration.

Overview

LoopFlow is a comprehensive monorepo that demonstrates modern web development practices with TypeScript, React, and AI integration. It includes multiple applications and shared packages managed with pnpm workspaces and Turbo.

What's Inside

Applications:

• Frontend App (apps/frontend/) - Next.js 15 application with Supabase authentication, featuring login flows, protected routes, and dark mode support
• Web App (apps/web/) - Clean Next.js 15 application showcasing the shared UI component library
• Mastra Server (apps/mastra-server/) - AI-powered workflow engine with agents, tools, and LibSQL storage
• MCP Server (apps/mcp-server/) - Model Context Protocol server supporting both HTTP and STDIO interfaces

Shared Packages:

• UI Library (packages/ui/) - Reusable component library built with shadcn/ui, Radix UI, and Tailwind CSS
• Database (packages/database/) - Type-safe Supabase client with auto-generated TypeScript types
• ESLint Config (packages/eslint-config/) - Shared linting configuration
• TypeScript Config (packages/typescript-config/) - Shared TypeScript settings

Tech Stack

• Framework: Next.js 15 with Turbopack
• Language: TypeScript 5.7+
• Styling: Tailwind CSS 4.0 + shadcn/ui
• Database: Supabase with type-safe client
• AI: Mastra framework with Anthropic integration
• Build System: Turbo + pnpm workspaces
• Package Manager: pnpm 10.13.1+s

Getting Started

Prerequisites

• Node.js 20+
• pnpm 10.13.1+

Installation

# Clone the repository
git clone <your-repo-url>cd loopflow
# Install dependencies
pnpm install
# Set up environment variables (see Environment Setup below)

Development

# Start all applications in development mode
pnpm dev
# Or run specific appscd apps/frontend && pnpm dev
cd apps/mastra-server && pnpm dev

Build

# Build all applications
pnpm build
# Build specific workspace
pnpm --filter @workspace/ui build

Environment Setup

For applications using Supabase (frontend app and any app using @loopflow/database):

# .env.local
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Working with Components

Adding shadcn/ui Components

# Add to shared UI package
pnpm dlx shadcn@latest add dialog -c packages/ui
# Add to specific app
pnpm dlx shadcn@latest add dialog -c apps/web

Using Shared Components

import{Button}from"@workspace/ui/components/button";import{createClient}from"@loopflow/database";

Project Structure

loopflow/
├── apps/
│ ├── frontend/ # Next.js + Supabase auth
│ ├── web/ # Next.js showcase app
│ ├── mastra-server/ # AI workflow server
│ └── mcp-server/ # MCP protocol server
├── packages/
│ ├── ui/ # Shared components
│ ├── database/ # Supabase client
│ ├── eslint-config/ # ESLint presets
│ └── typescript-config/# TypeScript presets
├── turbo.json # Turbo configuration
├── pnpm-workspace.yaml # Workspace definition
└── package.json # Root package file

Scripts Reference

Root Commands

• pnpm dev - Start all apps in dev mode
• pnpm build - Build all packages
• pnpm lint - Lint all packages
• pnpm format - Format code with Prettier
• pnpm clean - Clean all node_modules

App-Specific Commands

Each app has its own set of commands. Check individual package.json files or refer to the CLAUDE.md file for detailed command documentation.

Contributing

This monorepo uses:

• ESLint for code quality
• Prettier for code formatting
• TypeScript for type safety
• Turbo for build caching

Run pnpm lint and pnpm format before committing changes.