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

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, the project specifies React 19 for component rendering and Next.js 16 for server‑side rendering, API routes, and static optimization [source].

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]. 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]. The component library combines shadcn/ui with Radix UI primitives to deliver accessible, unstyled components that integrate seamlessly with Tailwind [source].

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]. These graphs coordinate between teaching agents, student simulations, and content generation services.

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]. This abstraction allows the system to switch between OpenAI, Anthropic, Google, and other backends via configuration changes rather than code rewrites.

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].

State Management and Persistence

Global classroom state is managed by Zustand, a lightweight state management library referenced in the project documentation [source]. For persistent storage, the platform uses PostgreSQL accessed via the pg driver, storing classroom assets, session histories, and user settings [source].

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]. 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:

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] [source]. 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]. The action engine in lib/action/ executes over 28 distinct classroom actions, including voice synthesis, whiteboard drawing, and spotlight effects [source].

Docker provides containerization for reproducible deployments, with configurations defined in Dockerfile and docker‑compose.yml [source].

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]. The build configuration in next.config.ts manages server‑external packages and Content Security Policy headers [source].

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 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.

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