MAIC-UI: Generative UI for STEM Courseware

Updated 4 July 2026

MAIC-UI is a zero-code generative-UI system that converts textbooks, PPTs, and PDFs into interactive STEM simulations with real-time feedback.
It employs a two-stage generate–verify–optimize pipeline to ensure pedagogical accuracy, procedural integrity, and visual polish.
Its Click-to-Locate editing feature uses Unified Diff patches for rapid, localized updates, reducing edit times to under 10 seconds.

MAIC-UI is a zero-code, generative-UI authoring system for turning textbooks, PPTs, and PDFs into interactive STEM courseware and for rapidly editing the resulting HTML/CSS/JavaScript simulations. It was introduced to address four educator-identified pain points—pedagogical accuracy, local editability without code, active learning support, and visualization of procedures—through structured knowledge analysis with multi-modal understanding, a two-stage generate–verify–optimize pipeline, and Click-to-Locate editing with Unified Diff-based incremental generation (Tu et al., 28 Apr 2026).

1. Scope and pedagogical motivation

MAIC-UI is framed against a longstanding authoring bottleneck in STEM education: creating interactive courseware traditionally requires HTML/CSS/JavaScript fluency, component debugging, and layout polish, while off-the-shelf generative tools often yield static slides or text/image pages rather than scientific, parametric simulations with real-time feedback. The system also targets two further limitations of contemporary LLM-based authoring: weak alignment over long source documents and slow edit cycles caused by full-file regeneration, which prior approaches are described as performing in 200–600 seconds per change. A formative study with six instructors identified four needs: correctness and content alignment, localized and predictable editing, simulations that support learning-by-doing, and concrete visualizations of procedural knowledge (Tu et al., 28 Apr 2026).

Within this problem setting, MAIC-UI is designed for educators rather than programmers. Its outputs are interactive simulations deployable on student tablets, and its authoring workflow begins from educator-provided materials rather than handcrafted UI specifications. The system’s emphasis on procedural knowledge is notable: it does not only restate concepts, but tries to externalize steps, variables, and manipulable parameters into coupled interactive views. This separation between authoring intent and implementation detail is central to its design.

2. System architecture and knowledge representation

MAIC-UI comprises three interconnected stages: input handling, content analysis and generation, and editing. Inputs include textbook chapters, PPTs, PDFs, and optional structured concept forms containing subject, concept, overview, mastery points, and procedural ideas. The content analysis module processes up to 50 pages by extracting page images and applying a vision–LLM with a structured analysis prompt. The resulting schema identifies Main Topics, Key Concepts, Learning Objectives, Prerequisite Knowledge, Procedural Concepts, Subject Area, and Grade Level; this schema is then used as the backbone for pedagogical alignment and theme selection.

Component	Main function	Output
Content Analysis Module	Multi-modal extraction from textbook chapters, PPTs, and PDFs	Structured knowledge schema
Stage 1 generation	Produce content-aligned simulations	Two-panel interactive UI
Stage 2 generation	Verify layout and polish visuals	Refined UI preserving function
Editing Module	Localized updates from rendered-element clicks	Unified Diff patches

The structured knowledge object is formalized as

$K = (T, C, L, P, R, S, G),$

where $T = \text{MainTopics}$ , $C = \text{KeyConcepts}$ , $L = \text{LearningObjectives}$ , $P = \text{ProceduralConcepts}$ , $R = \text{Prerequisites}$ , $S = \text{SubjectArea}$ , and $G = \text{GradeLevel}$ . Each procedural concept is represented as $p = (\text{name}, \text{steps}, \text{params})$ , with steps $[s_1, \ldots, s_k]$ and parameter tuples including name, range, and unit. UI generation is then expressed as a mapping

$T = \text{MainTopics}$ 0

where $T = \text{MainTopics}$ 1 is the HTML/CSS/JS artifact with a process panel and a simulation panel. The paper characterizes this schema as a lightweight ontology in which entities and relations such as depends_on, illustrates, parameter_of, and step_precedes organize content for generation and validation (Tu et al., 28 Apr 2026).

3. Generation and verification pipeline

The generation workflow is explicitly divided into two stages. Stage 1 produces content-aligned interactive simulations with a left “process” panel and a right “simulation” panel, with coupling between the two. Stage 2 then applies layout verification and visual polish—theme colors, typography hierarchy, spacing, and animation smoothing—while preserving Stage 1 functionality. This separation is presented as a way to isolate “what to teach” from “how it looks.”

Stage 1 is formalized as an optimization problem that maximizes pedagogical alignment under correctness constraints:

$T = \text{MainTopics}$ 2

subject to pedagogy constraints $T = \text{MainTopics}$ 3. Here $T = \text{MainTopics}$ 4 scores alignment between UI logic and structured knowledge, including coverage of Key Concepts, correctness of equations, and presence of steps and parameters, while $T = \text{MainTopics}$ 5 measures complexity or cost. Verification combines rule checks with LLM-based critiques, such as checking that tooltips exist for terms, sliders exist for parameters, and step changes update simulation state. If constraints fail, extracted errors are fed back into refinement.

Stage 2 is defined as visual optimization under semantic preservation:

$T = \text{MainTopics}$ 6

subject to functional equivalence constraints $T = \text{MainTopics}$ 7 and repeated pedagogical checks $T = \text{MainTopics}$ 8. The system’s iterative refinement pseudocode first loops until VerifyPedagogy(U, K) succeeds, then polishes the UI until VerifyLayout(U', U) succeeds. The result is a pipeline in which correctness is secured before polish. This suggests a deliberate rejection of one-shot generative UI in favor of staged validation, especially for STEM content where equations, units, and procedural order matter (Tu et al., 28 Apr 2026).

4. Incremental editing and interaction model

A defining feature of MAIC-UI is Click-to-Locate editing. The rendered preview is a sandboxed iframe with event capture; when an element is clicked, the system records its XPath or CSS selector, its outerHTML snippet, and bounding-box metadata as a visual citation. The teacher then supplies a natural-language instruction, and the model returns a code patch in Unified Diff format that changes only the necessary lines. The patch applicator uses fuzzy context matching so that minor whitespace and formatting differences do not prevent application.

The Unified Diff is represented as a sequence of hunks with headers of the form $R = \text{Prerequisites}$ 6 followed by context lines, deletions, and insertions. The system caches the last generated artifact and maintains a DOM-indexed map from elements to source ranges, so that only diff hunks affecting the cited element and minimal surrounding context need to be produced. The paper attributes the resulting sub-10-second round trips to reduced token generation—approximately 90% fewer tokens than full HTML regeneration—together with SSE streaming, incremental patching, and partial iframe reloads. Empirically, median edit time is reported as 6.2 seconds, with $T = \text{MainTopics}$ 9 seconds, versus 200–600 seconds in full-regeneration baselines (Tu et al., 28 Apr 2026).

The same mechanism is used for stylistic and functional edits. One example changes a title to “gradient red and bold” by updating only the <h1> element; similar localized edits can adjust slider ranges or tooltip text. The operational significance is not only latency but predictability: the editing target is bound to rendered UI state rather than described indirectly in a prompt.

5. Implementation profile and generated simulations

The frontend is implemented with React 18 and TypeScript, uses Tailwind CSS for styling, Zustand and React Query for state management, Monaco Editor for code viewing, and a sandboxed iframe with bi-directional postMessage for preview. The backend uses Python 3.11 FastAPI, SQLite with SQLAlchemy, Celery/Redis for asynchronous tasks, and local filesystem or CDN storage. MAIC-UI integrates Zhipu AI’s GLM-4.6V for multi-modal document analysis with temperature 0.2 and max_tokens 4096, with fallback to GLM-4.5V, and GLM-4.7 for text/code generation with temperature 0.3 and max_tokens 8192, with fallback to GLM-4.6. Analysis results are cached for 24 hours, generation templates are cached indefinitely, and the repository is provided at https://github.com/THU-MAIC/MAIC-UI (Tu et al., 28 Apr 2026).

The generated courseware is organized as a two-panel simulation and themed by subject, with examples such as blue physics and green biology. Demonstrations in the paper span multiple STEM topics. In gravitational potential energy, students manipulate mass $C = \text{KeyConcepts}$ 0 and height $C = \text{KeyConcepts}$ 1 while observing energy bars and motion under $C = \text{KeyConcepts}$ 2. In Hooke’s law, sliders for $C = \text{KeyConcepts}$ 3 and $C = \text{KeyConcepts}$ 4 update vector arrows and magnitude bars under $C = \text{KeyConcepts}$ 5, with tooltips for “spring constant” and “displacement.” In kinematics, students adjust $C = \text{KeyConcepts}$ 6, $C = \text{KeyConcepts}$ 7, and $C = \text{KeyConcepts}$ 8 while a moving dot and numerical readout implement

$C = \text{KeyConcepts}$ 9

A Newton’s First Law example uses skater mass, initial velocity, and friction parameters to visualize inertia and stopping distance. Across these examples, the process panel mirrors extracted procedural steps, while the simulation panel exposes adjustable parameters and real-time visualization (Tu et al., 28 Apr 2026).

6. Empirical evaluation and classroom deployment

MAIC-UI was evaluated in both a controlled lab study and a classroom deployment.

Setting	Sample	Main outcomes
Controlled lab study	40 participants	Fewer editing iterations; higher learnability and controllability
Classroom deployment	53 high school students	Higher STEM gains; lower outcome disparity

In the controlled lab study, 40 graduate students with teaching practicum were randomly assigned either to MAIC-UI ( $L = \text{LearningObjectives}$ 0) or to a baseline that sent prompts and revisions directly to an AI without structuring or validation. Participants authored courseware from 20–30 page slides, revised it, completed peer review, questionnaires, and interviews. MAIC-UI required fewer editing rounds— $L = \text{LearningObjectives}$ 1, $L = \text{LearningObjectives}$ 2, $L = \text{LearningObjectives}$ 3, $L = \text{LearningObjectives}$ 4– $L = \text{LearningObjectives}$ 5—than the baseline, which required $L = \text{LearningObjectives}$ 6, $L = \text{LearningObjectives}$ 7, $L = \text{LearningObjectives}$ 8, $L = \text{LearningObjectives}$ 9– $P = \text{ProceduralConcepts}$ 0; the reported Mann–Whitney statistic is $P = \text{ProceduralConcepts}$ 1, $P = \text{ProceduralConcepts}$ 2, $P = \text{ProceduralConcepts}$ 3. It also scored significantly higher on learnability (Item 1: $P = \text{ProceduralConcepts}$ 4 vs. $P = \text{ProceduralConcepts}$ 5, $P = \text{ProceduralConcepts}$ 6) and editing controllability (Item 3: $P = \text{ProceduralConcepts}$ 7 vs. $P = \text{ProceduralConcepts}$ 8, $P = \text{ProceduralConcepts}$ 9). Within the MAIC-UI condition, layout intuitiveness, attention attraction, concept accuracy, coverage, language clarity, and concept intuitiveness all scored above 4.0 on average. Time cost and usage preference were not statistically different, and the paper notes a possible ceiling effect (Tu et al., 28 Apr 2026).

The three-month classroom deployment was conducted in a Chinese public high school with 53 students in a pilot class, denoted C1, during physics–chemistry–biology classes. C1 improved by $R = \text{Prerequisites}$ 0 points on average in STEM subjects, while other classes averaged $R = \text{Prerequisites}$ 1; an exploratory student-level comparison reported Mann–Whitney $R = \text{Prerequisites}$ 2, $R = \text{Prerequisites}$ 3, $R = \text{Prerequisites}$ 4. Humanities gains in C1 were $R = \text{Prerequisites}$ 5, described as less pronounced than STEM. The pilot class also showed the lowest variance of STEM gains, at 562 versus 598–1054 across other classes. Among the bottom 25% at pre-exam, C1 showed larger average gains (15.46 vs. 12.42), a higher proportion of positive gains (78.6% vs. 63.5%), and lower variance (251.02 vs. 671.34). The paper interprets these findings as indicating that MAIC-UI fosters learning agency and reduces outcome disparities, with benefits extending to lower-performing students (Tu et al., 28 Apr 2026).

The paper identifies several boundary conditions. Complex and noisy documents, including dense notation and atypical diagrams, may challenge multi-modal extraction. Vision–LLMs can misinterpret specialized notation, and the authors suggest that hybrid OCR+VLM or fine-tuning would help. Fuzzy diff application can fail when structural drift is large, requiring occasional full regeneration. The system currently focuses on single-page simulations; multi-page narratives and non-STEM domains remain open design problems. Planned extensions include richer widgets such as plots, 3D, and data logging, stronger verification through static analysis of bindings and unit checks, faster diffs, and additional teacher tooling such as rubrics, concept map editors, and reusable templates. The paper also stresses that teachers should remain in the loop to validate scientific accuracy, and it flags privacy and ethics concerns around uploaded materials, pointing to local model deployment and data governance as future directions (Tu et al., 28 Apr 2026).

The acronym “MAIC-UI” is not unique across the UI literature. In "ILuvUI: Instruction-tuned LangUage-Vision modeling of UIs from Machine Conversations," it denotes machine-authored instructional conversations for UI modeling rather than educational courseware generation (Jiang et al., 2023). Related UI understanding work such as "UI Semantic Group Detection: Grouping UI Elements with Similar Semantics in Mobile Graphical User Interface" studies component-level semantic groups for mobile GUI screenshots (Xiao et al., 2024). This suggests that the educational MAIC-UI system sits at an intersection of multi-modal document understanding, generative UI, and UI-grounding techniques, but its defining contribution remains the authoring of pedagogically aligned interactive STEM courseware with rapid localized editing.