Complete Guide to the Technologies Used in the OpenMAIC Platform

The OpenMAIC platform is built on Next.js 16, React 19, TypeScript 5, and LangGraph 1.1, using a modular architecture that supports browser-first operation with optional PostgreSQL persistence and multi-provider AI integration via the @ai-sdk ecosystem.

The OpenMAIC platform is an open-source, AI-driven learning management system developed by THU-MAIC. Understanding the technologies used in the OpenMAIC platform reveals a modern stack designed for scalability, multi-agent orchestration, and flexible deployment across browser and server environments.

Frontend Architecture

The presentation layer relies on cutting-edge React ecosystem tools defined in package.json.

Next.js 16 powers the server-side rendering and API routes, as specified at line 19. The framework's App Router handles the home page, classroom playback, and the Pro workbench interface.

React 19 provides the component model and state handling (line 43), driving rich interactive elements including slides, quizzes, whiteboards, and 3D visualizations.

Tailwind CSS 4 (line 96) delivers utility-first styling with responsive design and theming capabilities, while Shadcn UI combined with Radix primitives (line 80) provides accessible, composable UI components.

Core Business Logic and Agent Orchestration

The application logic layer centers on type safety and AI agent coordination.

TypeScript 5 spans the entire codebase (line 199), ensuring static typing across all modules. LangGraph 1.1 (line 70) orchestrates multi-agent workflows through a "director" graph that enables AI agents to collaborate on curriculum planning, material extraction, and interactive scene generation.

State management uses Zustand (line 166) for lightweight client-side stores that synchronize UI state with backend services. Rich-text editing relies on ProseMirror (line 31) as the foundation for slide editing capabilities.

The generation pipeline, implemented in lib/generation/, executes a two-stage outline-to-scene workflow where @openmaic/generation coordinates content creation.

AI Providers and Media Processing

OpenMAIC abstracts AI services through a unified SDK architecture.

The @ai-sdk/* family of packages (lines 35-41) provides unified interfaces for OpenAI, Anthropic, Azure, Google, and Bedrock. @copilotkit/* (line 50) handles tool-calling and function-calling helpers, while @streamdown/* (line 85) manages image, video, and TTS generation.

For local deployments, the platform supports FunASR, Lemonade, and VoxCPM2 as optional local ASR/TTS backends. Configuration occurs via next.config.ts, which reads environment variables like OPENAI_API_KEY at startup.

Persistence and Runtime Infrastructure

The platform offers flexible storage strategies ranging from browser-local to enterprise server deployment.

By default, OpenMAIC runs fully in the browser using IndexedDB for local storage. When NEXT_PUBLIC_PERSISTENCE is enabled, PostgreSQL serves as the server-backed document and runtime store, maintaining course documents, runtime state, assets, and durable agent sessions.

The @openmaic/storage package (documented in packages/@openmaic/storage/README.md) provides pluggable storage abstractions that swap seamlessly between IndexedDB, HTTP endpoints, PostgreSQL, and S3.

Durable agent execution relies on LangGraph agents with lease, heartbeat, and crash-resume semantics, implemented in lib/server/agent-runtime/README.md. The HTTP control plane resides in app/api/agent/*.

Auxiliary Rendering and Export Tools

Specialized tools enable content export and media processing.

ffmpeg and ffprobe handle optional local audio-video extraction. The Hyperframes service, located in render-service/, combines Chromium with ffmpeg to render MP4 video exports. Additional bundled packages under packages/ handle MathML-to-OMML conversion, PPTX generation, and PDF parsing for offline-ready exports and LaTeX rendering.

Developer Implementation Examples

Below are practical snippets for working with the OpenMAIC platform technology stack.

Starting a Local Development Server

# Clone, install, and launch

git clone https://github.com/THU-MAIC/OpenMAIC.git
cd OpenMAIC
pnpm install          # installs all workspace packages

pnpm dev              # starts Next.js dev server on http://localhost:3000

The commands are described in the Quick Start section of the README.

Configuring an AI Provider

Create a .env.local file to configure API keys:

OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXXXX
DEFAULT_MODEL=openai:gpt-5.5   # optional default

The server reads these variables at startup via next.config.ts and the @ai-sdk/openai package (line 39).

Submitting a Generation Job

import { createClient } from '@openmaic/generation';

// Build a minimal payload
const client = createClient({
  apiKey: process.env.OPENAI_API_KEY,
  model: 'openai:gpt-5.5',
});

async function generateCourse(topic: string) {
  const outline = await client.generateOutline({ topic });
  const scenes = await client.generateScenes({ outline });
  console.log('Course generated:', scenes);
}

generateCourse('Introduction to quantum computing');

The @openmaic/generation SDK wraps the two-stage pipeline from lib/generation/ and internally calls the /api/generate endpoints.

Using the Storage Abstraction

import { RuntimeStore } from '@openmaic/storage';

const store = new RuntimeStore({
  baseUrl: '/api/persistence', // HTTP endpoint when server-backed persistence is enabled
});

async function saveLearnerState(state: any) {
  await store.saveRuntime(state);
}

RuntimeStore works with IndexedDB in the browser or forwards to the server persistence layer based on the NEXT_PUBLIC_PERSISTENCE flag.

Enabling the Pro Workbench

Add the following to .env.local:

NEXT_PUBLIC_PRO_WORKBENCH_ENABLED=true
OPENMAIC_AGENT_RUNTIME_ENABLED=true
DATABASE_URL=postgres://openmaic:openmaic-dev@localhost:5432/openmaic

This configuration exposes the workbench UI on the home page and starts the durable agent runtime from lib/server/agent-runtime/.

Summary

The OpenMAIC platform technology stack delivers a comprehensive AI learning environment through these key architectural decisions:

• Next.js 16 and React 19 provide the server-rendered frontend with modern component primitives
• LangGraph 1.1 and TypeScript 5 enable type-safe, multi-agent orchestration for curriculum generation
• @ai-sdk/* packages abstract LLM providers (OpenAI, Anthropic, Google, Bedrock) through a unified interface
• @openmaic/storage supports seamless transitions between browser-only (IndexedDB) and server-backed (PostgreSQL) deployments
• Optional local AI backends (FunASR, Lemonade) and media tools (ffmpeg) support air-gapped or privacy-sensitive installations

Frequently Asked Questions

What frontend framework does OpenMAIC use?

OpenMAIC uses Next.js 16 with React 19 as its primary frontend framework, as defined in package.json (lines 19 and 43). The application leverages the Next.js App Router for server-side rendering and API routes, while React 19 handles component state and interactive elements like quizzes and 3D visualizations.

How does OpenMAIC abstract different AI providers?

The platform uses the @ai-sdk/* ecosystem (lines 35-41) to provide a unified interface across OpenAI, Anthropic, Azure, Google, and Bedrock. This abstraction allows the same codebase to switch between cloud providers or run locally using Lemonade or FunASR without changing application logic.

Can OpenMAIC operate without a backend server?

Yes. By default, OpenMAIC runs entirely in the browser using IndexedDB for storage, making it suitable for offline or privacy-focused deployments. The @openmaic/storage package automatically handles persistence; only when NEXT_PUBLIC_PERSISTENCE is enabled does the platform require PostgreSQL and server-side components.

What database technology does OpenMAIC use for persistence?

When server-backed persistence is enabled, OpenMAIC uses PostgreSQL to store course documents, runtime state, and durable agent sessions. The storage layer in packages/@openmaic/storage/ abstracts the database interactions, allowing the same code to work with IndexedDB, HTTP endpoints, PostgreSQL, or S3 storage backends.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}