OpenMAIC

# MISSION: Scaffold "OpenMAIC" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **OpenMAIC**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: OpenMAIC
- **What It Does**: OpenMAIC (Open Multi-Agent Interactive Classroom), from Tsinghua's MAIC team, turns a topic or document into an interactive lesson. It generates slides, quizzes, whiteboard explanations and discussions in which several AI agents act as teacher and classmates.
- **Domain & Category**: Multi-Agent Interactive AI Classroom
- **Production Scale**: 6-20 people
- **Development Mode**: CLASSIC
- **Architectural Rationale**: Built as a Next.js app around a set of npm-published packages (slide DSL, generation, renderer, editor, importer, storage). The multi-agent LangGraph pipeline, the slide format and persistence can each be reused or swapped, and heavy video rendering runs in a separate container.
- **Live Website Reference**: https://open.maic.chat/
- **Source Repository**: https://github.com/THU-MAIC/OpenMAIC
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: TypeScript, Next.js, React, Tailwind CSS, Radix UI, Zustand, Vercel AI SDK, LangGraph, LangChain, Model Context Protocol, PostgreSQL, Hono, Puppeteer, Docker, Vercel, Vitest, Playwright
- **Primary Language(s)**: TypeScript, JavaScript, MDX, CSS
- **License of the reference repo**: MIT
- **Frontend**: Next.js — Next.js 16 App Router app (app/classroom, app/workbench, app/api) serving UI and API routes; React — React 19 UI for classroom stage, slide editor, whiteboard, roundtable discussion and chat; Tailwind CSS — Styling via Tailwind 4 PostCSS with shadcn-style components on Radix UI and Base UI; Zustand — Client state stores under lib/store, with Dexie for IndexedDB persistence in the browser; ProseMirror — Rich text editing inside slides, packaged in @openmaic/editor
- **Backend & APIs**: Hono — HTTP server of the isolated render-service that turns exported lessons into MP4; Puppeteer — Headless Chromium (puppeteer-core) with FFmpeg in render-service for video export
- **Data & persistence**: PostgreSQL — Optional server persistence via pg in @openmaic/storage (documents, runtime, sessions, assets); S3 — Asset storage with presigned URLs through the AWS S3 client
- **Infrastructure & deploy**: Docker — Multi-stage Node 22 Alpine image plus docker-compose with an optional video-export profile; Vercel — One-click deploy target; vercel.json allows 300-second API functions for generation; Vitest — Large unit/integration suite under tests/, with separate eval runners in eval/; Playwright — End-to-end browser tests in e2e/
- **Tooling, testing & ops**: Vercel AI SDK — Model access for OpenAI, Anthropic, Google, Azure and Bedrock plus streaming chat UI hooks; LangGraph — Orchestration of the multi-agent classroom (teacher, classmates, discussion) under lib/orchestration; Model Context Protocol — MCP SDK so external agents and tools can connect to classroom generation
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/THU-MAIC/OpenMAIC @ 21d83ec)
1. **A slide DSL package is the contract between generation, rendering and import**: @openmaic/dsl is a dependency-free package of types, JSON Schema, validators and migration helpers; @openmaic/generation, renderer, editor, importer and storage all depend on it and are published to npm separately from the Next.js app.
2. **Multi-agent classroom orchestrated with LangGraph**: lib/orchestration, lib/agent and lib/agent-runtime coordinate teacher and classmate agents with @langchain/langgraph, while the Vercel AI SDK providers let the same flows run on OpenAI, Anthropic, Google, Azure or Bedrock models.
3. **Pluggable persistence from browser-only to Postgres**: @openmaic/storage exposes document, runtime, KV, asset, agent-session and skill primitives with browser and HTTP backends plus pg backends; the build arg NEXT_PUBLIC_PERSISTENCE selects the mode, and a storage-pg-contract workflow tests the Postgres backend.
4. **Video export isolated in a separate render service**: render-service/ is its own Node 22 + Chromium + FFmpeg container (Hono, puppeteer-core, Hyperframes producer); docker-compose only starts it under a video-export profile and the app probes /health, falling back to ZIP download when it is absent.
5. **Evals live next to the code**: eval/ contains runners for orchestration, outline language, whiteboard layout, PBL planning and zone of proximal development, executed with tsx through package.json scripts and a dedicated vitest.eval.config.ts.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Utilize Next.js 15 App Router: default to React Server Components (RSC) for data fetching. Handle mutations through Server Actions with Zod validation. Keep 'use client' directives restricted strictly to interactive leaf components.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (PostgreSQL, S3): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.