# Complete Guide to the Technologies Used in the OpenMAIC Platform

> Explore the OpenMAIC platform's core technologies including Next.js, React, TypeScript, and LangGraph. Learn about its modular architecture and AI integration.

- Repository: [MAIC/OpenMAIC](https://github.com/THU-MAIC/OpenMAIC)
- Tags: deep-dive
- Published: 2026-09-05

---

**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`](https://github.com/THU-MAIC/OpenMAIC/blob/main/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`](https://github.com/THU-MAIC/OpenMAIC/blob/main/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`](https://github.com/THU-MAIC/OpenMAIC/blob/main/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

```bash

# 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:

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

```

The server reads these variables at startup via [`next.config.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/next.config.ts) and the `@ai-sdk/openai` package (line 39).

### Submitting a Generation Job

```typescript
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

```typescript
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`:

```dotenv
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`](https://github.com/THU-MAIC/OpenMAIC/blob/main/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.