OpenMAIC-React
A full conversion of OpenMAIC from Next.js to React (Vite).
OpenMAIC is the open-source AI interactive classroom — upload a PDF to instantly generate an immersive, multi-agent learning experience.
What Changed (Next.js → React)
| Feature | Next.js (Original) | React + Vite (This Repo) |
|---|---|---|
| Framework | Next.js 16 | React 19 + Vite 6 |
| Routing | App Router (app/ directory) |
React Router DOM v7 |
| Pages | app/page.tsx, app/classroom/[id]/page.tsx |
src/pages/ with lazy loading |
| Layout | app/layout.tsx |
src/App.tsx with <BrowserRouter> |
| API Routes | app/api/*/route.ts |
src/api-routes/ (for separate Express backend) |
'use client' |
Required for client components | Removed (all components are client-side) |
| Navigation | useRouter from next/navigation |
useNavigate from react-router-dom |
| Route Params | useParams from next/navigation |
useParams from react-router-dom |
| Fonts | next/font/local |
@fontsource-variable/inter CSS import |
| Themes | Custom ThemeProvider (no next-themes) |
Same custom ThemeProvider |
| CSS | Tailwind CSS v4 + PostCSS | Tailwind CSS v4 + PostCSS (identical) |
| Env Variables | process.env.* |
import.meta.env.VITE_* |
| Middleware | Next.js middleware | Kept in src/api-routes/ for backend |
| Build | next build |
vite build |
Routes
| Path | Component | Description |
|---|---|---|
/ |
HomePage |
Landing page with classroom list and generation form |
/classroom/:id |
ClassroomPage |
Interactive classroom view |
/generation-preview |
GenerationPreviewPage |
Live generation preview with step visualization |
/eval/whiteboard |
WhiteboardEvalPage |
Whiteboard evaluation tool |
Project Structure
src/
├── main.tsx # Entry point
├── App.tsx # Root component with Router + Providers
├── globals.css # Global styles (Tailwind v4)
├── pages/ # Page components (lazy loaded)
│ ├── HomePage.tsx
│ ├── ClassroomPage.tsx
│ ├── generation-preview/
│ └── eval/
├── components/ # Shared UI components (200+ files)
│ ├── ui/ # shadcn/ui components
│ ├── ai-elements/ # AI interaction components
│ ├── agent/ # Agent management
│ ├── chat/ # Chat interface
│ ├── canvas/ # Canvas drawing
│ ├── whiteboard/ # Whiteboard
│ └── ...
├── lib/ # Utilities, hooks, stores, types
│ ├── hooks/ # React hooks (theme, i18n, etc.)
│ ├── store/ # Zustand stores
│ ├── i18n/ # Internationalization (5 languages)
│ ├── types/ # TypeScript types
│ ├── ai/ # AI/LLM utilities
│ ├── audio/ # TTS/ASR
│ └── ...
├── api-routes/ # Server-side API routes (for Express backend)
packages/
├── mathml2omml/ # MathML to OMML converter
└── pptxgenjs/ # PowerPoint generation
Getting Started
Prerequisites
- Node.js >= 20.9.0
- npm or pnpm
Install & Run
# Install dependencies
npm install --legacy-peer-deps
# Build workspace packages
cd packages/mathml2omml && npm install && npm run build && cd ../..
cd packages/pptxgenjs && npm install && npm run build && cd ../..
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
Environment Variables
Copy .env.example and configure with your API keys. In Vite, client-side env vars must be prefixed with VITE_:
cp .env.example .env
API Backend
The API routes from the original Next.js project are preserved in src/api-routes/ for reference. To use them, set up a separate Express/Fastify backend and configure the Vite dev server proxy in vite.config.ts:
server: {
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
},
},
},
Tech Stack
- React 19 + Vite 6 — Fast builds, HMR
- React Router DOM v7 — Client-side routing
- Tailwind CSS v4 — Utility-first CSS
- Zustand — State management
- shadcn/ui — Radix-based component library
- AI SDK — Multi-provider LLM integration
- i18next — Internationalization (zh-CN, en-US, ja-JP, ru-RU, ar-SA)
- Motion (Framer Motion) — Animations
- ProseMirror — Rich text editing
- Dexie — IndexedDB wrapper
- ECharts — Data visualization
Credits
Based on OpenMAIC by THU-MAIC.
License
AGPL-3.0 (same as original)