InstructionalX Builder – UI Prototype

Course Setup

Set metadata + modules. (Prototype stores state in localStorage.)

Identity

Title Description

Estimated Duration Language

Course Type Completion

Modules

Script & Course Builder

Paste/write script, then use the tool panels to insert markers.

Click a chip on the right to insert a marker at your cursor.

Avatar Actions (click to insert)

Action Intensity

Inspector

Active module

—

Chars

Modules

[AVATAR: gesture=Wave intensity=50]
[MEDIA_START: file=office.jpg placement=top-right duration=0]
[MEDIA_END]
[PAUSE: ms=400]
[PACE: slow]

Media Library

Mock library. Click “Insert to Script” to drop START/END markers.

Details

Select an asset.

Avatar

Mock avatar chooser + settings.

Avatar Gallery

Avatar Settings

Camera Framing Default Idle Mood / Energy

Preview placeholder (real 3D preview comes later).

Record Training

Prototype: simulates live transcript and converts it to script markers.
NEW (placeholder): “Record” can also mean Compile & Cache pre-generated LLM output + TTS audio + timing, so playback uses zero tokens. Q&A can still be live-token.

Live Session Capture (existing prototype)

Sessions (existing prototype)

Compile & Cache (token-saver placeholders)

This simulates creating a “compiled build” with: manifest.json + per-line audio files + cue timings. In production, these would be written to the published course folder (static-first).

Cache Mode Voice / Version Tag

Player behavior (future):

Playback mode: read manifest + play audio files sequentially (no LLM calls).
Interrupt: learner raises hand → live Q&A (tokens) → resume at same cue index.

No compiled builds yet.

Compiled Builds (placeholder list)

AI Assist

Prototype: generates mock script. (Real AI will be server-side.)

Course Goal

Audience Length

Notes

Preview

Mock learner view + validation warnings.

Start at module

Learner View (Mock)

Course Title

Module • Scripted

Avatar: …

Background: …

Trainer: …

Later: this becomes embedded shared player using a real course.json URL.

Publish

Build course.json preview + simulated output plan.

Click “Simulate Publish”…

course.json Preview

Click “Build course.json”…

Settings / API

Prototype only. For SaaS/Enterprise, API keys should be stored server-side and never shipped to the browser.

LLM Provider LLM Key (prototype only)

TTS Provider

Note: Browser TTS quality and voices vary by browser/OS and are not consistent. We strongly recommend using Google, ElevenLabs, Azure, or Polly for consistent results. If a selected provider is missing required keys, the builder will fall back to Browser TTS.

Browser TTS: Free fallback. We attempt to pick a good voice automatically, but it will vary by device.

Browser Voice Preset

Default Voice Label Lipsync Language

Enterprise later: disable AI, enforce asset whitelists, SSO, on-prem runtime.