MAIC-UI: Making Interactive Courseware with Generative UI

Abstract: Creating interactive STEM courseware traditionally requires HTML/CSS/JavaScript expertise, leaving barriers for educators. While generative AI can produce HTML codes, existing tools generate static presentations rather than interactive simulations, struggle with long documents, and lack pedagogical accuracy mechanisms. Furthermore, full regeneration for modifications requires 200--600 seconds, disrupting creative flow. We present MAIC-UI, a zero-code authoring system that enables educators to create and rapidly edit interactive courseware from textbooks, PPTs, and PDFs. MAIC-UI employs: (1) structured knowledge analysis with multi-modal understanding to ensure pedagogical rigor; (2) a two-stage generate-verify-optimize pipeline separating content alignment from visual refinement; and (3) Click-to-Locate editing with Unified Diff-based incremental generation achieving sub-10-second iteration cycles. A controlled lab study with 40 participants shows MAIC-UI reduces editing iterations (4.9 vs. 7.0) and significantly improves learnability and controllability compared to direct Text-to-HTML generation. A three-month classroom deployment with 53 high school students demonstrates that MAIC-UI fosters learning agency and reduces outcome disparities -- the pilot class achieved 9.21-point gains in STEM subjects compared to -2.32 points in control classes. Our code is available at https://github.com/THU-MAIC/MAIC-UI.

• The paper introduces MAIC-UI, a zero-code system that leverages a two-stage generate-verify-optimize pipeline for creating interactive STEM courseware.
• It employs multimodal vision-language models to extract key pedagogical data from instructional documents and link UI elements to precise code segments.
• Empirical evaluations show reduced editing iterations and significant learning gains, with marked improvements in STEM scores and reduced achievement variance.

MAIC-UI: A Generative User Interface System for Zero-Code Interactive Courseware Authoring

Introduction

The paper "MAIC-UI: Making Interactive Courseware with Generative UI" (2604.25806) presents a comprehensive system for zero-code authoring of interactive STEM courseware. Although LLMs have enabled code generation from natural language, their application in educational authoring is hampered by limited support for pedagogical rigor, poor interactive simulation capabilities, slow iteration cycles, and deficient mechanisms for precise control and editing. MAIC-UI addresses these limitations through a modular system that combines structured multimodal knowledge extraction, a two-stage generate-verify-optimize pipeline, and a fast, granular, zero-code editing paradigm built on Unified Diff incremental updates and Click-to-Locate referencing.

System Architecture and Pipeline

The architecture is designed for direct engagement by educators without programming expertise. It supports automatic extraction of key pedagogical and procedural knowledge from instructional documents (up to 50 pages) via multimodal vision-LLMs, supporting both document uploads and direct structure input.

Figure 1: The system parses pedagogical PDFs using VLM-based analysis and generates interactive, pedagogically grounded HTML courseware with visual theming.

The data flow is structured as follows: after document upload or direct concept entry, structured knowledge—including concepts, procedural steps, learning objectives, and visual design cues—is extracted. The pipeline then decouples content generation from visual optimization:

1. Stage 1 (Content Alignment): An initial HTML/JS simulation tightly aligned with the curriculum and procedural logic is generated. This output features distinct panels for process steps and real-time interactive controls, with strict coupling to ensure parameter manipulation immediately affects the simulation state.
2. Stage 2 (Visual Polish): This stage performs HTML/CSS refinement, injects domain-specific themes (e.g., blue for physics) and animations, polishes typography, and ensures responsive design. It incorporates HTML validation and fallback strategies for robust output.

   Figure 2: Teachers can enter structured concepts directly to produce interactive simulations—for example, physics explorations of Newton's laws with controllable simulation parameters.

The architecture is implemented as a web application with React-based frontend and Python FastAPI backend, integrating GLM-4.7 for text and GLM-4.6V for vision-language analysis.

Incremental Editing: Click-to-Locate and Unified Diff

Existing LLM-driven authoring pipelines suffer from slow and unreliable revision cycles, typically requiring 200–600 seconds for end-to-end regeneration. MAIC-UI addresses this with its Click-to-Locate + Unified Diff mechanism:

• Click-to-Locate: Users select any rendered visual element, which is internally referenced via XPath and CSS selectors. The teacher provides a natural language modification ("Make this title gradient red and bold"), and the backend automatically resolves which segment of code to update.
• Unified Diff: Rather than regenerating the entire code base, only the code patch is generated and applied, with robust handling of context drift via fuzzy matching. Edit turns are typically executed in under 10 seconds, ensuring creative flow is maintained even during fine-grained changes.

This workflow supports the core principle of end-user programming in education technology: educators can realize complex instructional designs without code exposure.

Empirical Evaluation

Lab User Study

A controlled study with 40 participants (20 per condition) compared MAIC-UI to a baseline system (direct prompt-to-code LLM pipeline). Results indicate:

• Mean edit iterations reduced (MAIC-UI: 4.9 vs. baseline: 7.0, $p = 0.019$).
• Significant improvements on learnability and editing controllability (Items 1 and 3, $p < 0.05$).
• Ratings for visual intuitiveness, pedagogical accuracy, and accessibility were consistently above 4.0 in MAIC-UI group.

  Figure 3: Lab study questionnaire response distributions demonstrate clear improvements in learnability and controllability for MAIC-UI.

  

  Figure 4: Participant ratings confirm gains across visual design, pedagogical rigor, and ease of understanding.

Qualitative analysis reveals that participants could articulate editing intentions more easily and achieve desired results in fewer iterations, highlighting the efficacy of the modular pipeline and the interface's explicit linking of UI elements to their code representations.

Three-Month Classroom Deployment

A three-month in-class deployment (n=53, secondary school STEM track) demonstrated:

• STEM score gains: MAIC-UI pilot class +9.21 points; control cohort -2.32 points ($p<0.001$).
• Humanities gain: Pilot class +6.43 points (less pronounced advantage).
• Score gain variance was minimized in the pilot (C1: 562 vs. 598–1054 elsewhere), indicating reduced achievement disparity.
• Lower-quartile students in the pilot saw larger average gains and lower variance compared to controls.

  Figure 5: Pilot MAIC-UI class achieved strongest STEM gains among all classes between November and February exams.

  

  Figure 6: The C1 class (MAIC-UI) showed the lowest variance in STEM score gains, suggesting benefits are widely distributed and not concentrated among high performers.

Interviews corroborate a shift toward higher student agency and increased classroom participation, with the interactive UI supporting visualization of procedural logic and more equitable learning opportunities.

Practical and Theoretical Implications

Balancing Automation and Pedagogical Control

The two-stage generate-verify-optimize pipeline ensures pedagogical substance takes precedence over visual refinement, partially mitigating LLM hallucination risks and misalignment—pressing issues identified in prior work [zhang2025siren, yu2024kola]. Clear separation of content and style modules also enhances transparency and enables teacher oversight.

End-User Programming for Non-Experts

MAIC-UI's localized editing mechanism advances the state of LLM-based EUP, matching domain experts' mental models of editing ("what to change, not how"). This points toward future generative UIs that move beyond prompt engineering into bi-directional visual-code coupling, likely orthogonal to classical IDE paradigms.

Procedural Knowledge Externalization and Equity

Interactive externalization of schematic/procedural knowledge is known to benefit lower-performing students by minimizing cognitive load and supporting distributed cognition [hollan2000distributed]. Empirical variance reduction data suggest that generative, interactive courseware is a plausible intervention for closing persistent STEM achievement gaps.

Limitations and Directions

The system is currently constrained to single-page simulations, limiting multi-page or curricular sequencing. Multimodal analysis can misinterpret domain-specific notation, which could be mitigated by training VLMs with more discipline-specific corpora or supplementing with OCR. The proxy instructor sample in the lab study and the single-site, single-country deployment limit direct generalization; long-term, cross-institutional evaluation is required. Incremental diff application also assumes code-base stability—drift in large-scale editing may necessitate periodic regeneration.

Conclusion

MAIC-UI presents a robust paradigm for zero-code interactive courseware production, combining structured knowledge extraction, two-stage generation workflows, and rapid, granular incremental editing. Empirical results confirm strong reductions in editing time, significant learning gains in real classroom deployments, and minimized achievement disparities. The architecture underscores a design direction in educational AI: tightly-coupled, user-centric interfaces that empower non-programmer experts via reliable, explainable, multimodal LLM tooling, grounded in pedagogical rigor. Future extension to extended courseware sequence generation, additional subject domains, and adaptive scaffolding will determine its longitudinal efficacy and scalability.

(2604.25806)