# What Are the Core Technologies Used in OpenMAIC? A Full‑Stack AI Classroom Breakdown

> Explore the core technologies powering OpenMAIC, a full-stack AI classroom. Discover how React, Next.js, TypeScript, LangGraph, and Vercel AI SDK enable real-time multi-agent orchestration and content generation.

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

---

**OpenMAIC combines React 19, Next.js 16, TypeScript 5, LangGraph 1.1, and the Vercel AI SDK to deliver a multi‑agent AI classroom platform with real‑time orchestration and automated content generation.**

OpenMAIC is an open‑source, AI‑driven classroom platform developed by THU‑MAIC. Understanding the core technologies used in OpenMAIC reveals how the project achieves its seamless integration of multiple large language models (LLMs) and interactive classroom experiences. The repository combines cutting‑edge frontend frameworks with sophisticated backend orchestration to power collaborative, multi‑agent educational workflows.

## Frontend Architecture: React 19 and Next.js 16

The user interface layer relies on the latest stable releases of React and the Next.js App Router. According to [`package.json`](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json), the project specifies **React 19** for component rendering and **Next.js 16** for server‑side rendering, API routes, and static optimization [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L16).

### Type-Safe Development with TypeScript 5

The entire codebase is written in **TypeScript 5**, ensuring static type safety across both frontend and server layers [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L96). This type safety is critical for maintaining the complex state machines and LLM interaction types defined in the orchestration layer.

### Styling and Component Primitives

**Tailwind CSS 4** provides utility‑first styling with built‑in dark‑mode support [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/README-zh.md#L33). The component library combines **shadcn/ui** with **Radix UI** primitives to deliver accessible, unstyled components that integrate seamlessly with Tailwind [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L79).

## AI Orchestration Stack: LangGraph and the Vercel AI SDK

The platform’s multi‑agent capabilities stem from a carefully curated set of AI libraries that abstract LLM providers and manage complex workflow state.

### Multi-Agent Workflow Orchestration

At the heart of OpenMAIC lies **LangGraph 1.1**, which implements state‑machine based orchestration for classroom dialogues. The `lib/orchestration/` directory contains LangGraph graphs that drive multi‑agent interactions and stage transitions [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/README-zh.md#L49-L51). These graphs coordinate between teaching agents, student simulations, and content generation services.

```typescript
import { Graph } from '@langchain/langgraph';
import { OpenAI } from '@ai-sdk/openai';

// Define a node that calls an LLM
async function generateOutline(state: any) {
  const model = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
  const prompt = `Generate a structured outline for a lesson about ${state.topic}.`;
  const response = await model.complete(prompt);
  return { outline: response.text };
}

// Build the graph
const classroomGraph = new Graph()
  .addNode('outline', generateOutline)
  .addEdge('start', 'outline')
  .addEdge('outline', 'end');

export default classroomGraph;

```

### Unified LLM Provider Abstraction

OpenMAIC leverages the **Vercel AI SDK** (specifically `@ai-sdk/openai`, `@ai-sdk/anthropic`, `@ai-sdk/google`, `@ai-sdk/azure`, and `@ai-sdk/amazon-bedrock`) to provide a unified interface for dozens of LLM providers [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L35-L40). This abstraction allows the system to switch between OpenAI, Anthropic, Google, and other backends via configuration changes rather than code rewrites.

```typescript
import { createClient } from '@ai-sdk/react';

// Choose a provider via env config
const client = createClient({
  provider: process.env.DEFAULT_MODEL?.split(':')[0] ?? 'openai',
  apiKey: process.env.OPENAI_API_KEY,
});

const answer = await client.chat.completions.create({
  messages: [{ role: 'user', content: 'Explain quantum entanglement' }],
});

```

**LangChain Core 1.1** complements this stack by providing common abstractions for prompts, chains, and tool definitions [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L68).

## State Management and Persistence

Global classroom state is managed by **Zustand**, a lightweight state management library referenced in the project documentation [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/README-zh.md#L14). For persistent storage, the platform uses **PostgreSQL** accessed via the `pg` driver, storing classroom assets, session histories, and user settings [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L23).

## Content Generation and Export Pipeline

OpenMAIC implements a sophisticated pipeline for generating educational content and exporting it to standard formats.

### The Two-Stage Generation Pipeline (lib/generation)

The `lib/generation/` module implements a two‑stage pipeline: first generating an outline, then expanding it into scenes [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/README-zh.md#L81-L86). This pipeline assembles slides, quizzes, simulations, and interactive elements by invoking LLMs, image generation services, and text‑to‑speech APIs.

The API entry point for this pipeline resides in [`app/api/generate/route.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/app/api/generate/route.ts):

```typescript
import { NextResponse } from 'next/server';
import { runGenerationPipeline } from '@/lib/generation';

export async function POST(req: Request) {
  const { topic, language } = await req.json();
  const result = await runGenerationPipeline({ topic, language });
  return NextResponse.json(result);
}

```

### Media Rendering and Export Tools

For document export, OpenMAIC uses a customized version of **pptxgenjs** to create editable PowerPoint files and **mathml2omml** to convert mathematical markup to Office Math format [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L12) [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L26). In‑browser rendering relies on **KaTeX** for equations, **Three.js** for 3‑D visualizations, and native **SVG** support for vector graphics.

## Backend Runtime and Infrastructure

The server‑side runtime requires **Node.js 20+** to execute the Next.js server and AI orchestration backend [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L7). The action engine in `lib/action/` executes over 28 distinct classroom actions, including voice synthesis, whiteboard drawing, and spotlight effects [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/lib/action).

**Docker** provides containerization for reproducible deployments, with configurations defined in `Dockerfile` and `docker‑compose.yml` [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/Dockerfile).

## Development Tooling and Quality Assurance

The project maintains code quality through **Vitest** for unit testing, **Playwright** for end‑to‑end testing, **ESLint** for static analysis, and **Prettier** for code formatting [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json#L23-L27). The build configuration in [`next.config.ts`](https://github.com/THU-MAIC/OpenMAIC/blob/main/next.config.ts) manages server‑external packages and Content Security Policy headers [[source]](https://github.com/THU-MAIC/OpenMAIC/blob/main/next.config.ts).

## Summary

- **React 19 and Next.js 16** power the type‑safe frontend, styled with Tailwind CSS 4 and Radix UI primitives.
- **LangGraph 1.1** and the **Vercel AI SDK** enable multi‑agent orchestration across diverse LLM providers including OpenAI, Anthropic, and Google.
- **TypeScript 5** ensures end‑to‑end type safety across the entire stack.
- **Zustand** manages client state, while **PostgreSQL** provides persistent data storage.
- The `lib/generation/` pipeline automates content creation, exporting to PowerPoint via **pptxgenjs** and rendering math with **KaTeX**.
- **Node.js 20+** and **Docker** support scalable, containerized deployments.

## Frequently Asked Questions

### What frontend framework does OpenMAIC use?

OpenMAIC uses **React 19** paired with **Next.js 16** to render the interactive classroom interface. The project adopts the Next.js App Router for server‑side rendering and API routes, with **Tailwind CSS 4** handling all styling concerns according to the [`package.json`](https://github.com/THU-MAIC/OpenMAIC/blob/main/package.json) and project documentation.

### How does OpenMAIC handle multiple AI providers?

The platform integrates the **Vercel AI SDK** (`@ai-sdk/*` packages) to abstract interactions with OpenAI, Anthropic, Google, Azure, and Amazon Bedrock. Combined with **LangChain Core 1.1**, this architecture allows the system to route requests to different LLM providers using a unified interface defined in the orchestration layer.

### What is the purpose of the `lib/orchestration` directory?

The `lib/orchestration/` directory contains **LangGraph 1.1** state machines that coordinate multi‑agent classroom workflows. These graphs manage the sequence of teaching activities, agent interactions, and stage transitions, enabling complex educational simulations where multiple AI agents collaborate in real time.

### Can OpenMAIC export generated content to PowerPoint?

Yes. OpenMAIC uses a customized **pptxgenjs** library to generate editable `.pptx` files, with **mathml2omml** converting mathematical expressions to Office Math format. The export functionality is part of the two‑stage generation pipeline located in `lib/generation/`, which produces slide decks, quizzes, and interactive simulations.