Whiteboard Types

19 interactive visual types the AI tutor can generate in real-time.

Overview

The whiteboard is the tutor's signature feature. As the AI explains a concept verbally, it simultaneously generates visuals — equations, graphs, diagrams, molecular structures — synchronized with the audio. The whiteboard supports multi-page navigation so students can refer back to previous work.

Mathematics

Graphs & Data

Diagrams

Science

Programming

Visual Types

Mathematics

LaTeX Equations

showEquation

Renders mathematical equations and expressions with full LaTeX support, including labels.

Example: Quadratic formula, integral notation, matrix equations

Number Lines

showNumberLine

Number lines with customizable intervals and highlighted segments.

Example: Integer placement, fraction comparison, inequality visualization

Geometry

showGeometry

Points, segments, polygons, circles, angles, and arcs with labels and measurements.

Example: Triangle proofs, circle theorems, coordinate geometry

Unit Circle

showUnitCircle

Trigonometry unit circle with angle highlights, sine/cosine projections.

Example: Trigonometric identities, radian measure, sin/cos values

Fraction Bars

showFractionBar

Visual fraction representations with shaded portions for comparison.

Example: Equivalent fractions, adding fractions, mixed numbers

Matrices

showMatrix

Mathematical matrices with proper bracket notation.

Example: Matrix multiplication, determinants, systems of equations

Problem Display

showProblem

Formatted problem statements with proper mathematical notation.

Example: Word problems, exam questions, practice sets

Graphs & Data

Interactive Graphs

showGraph

Interactive function graphs with pan/zoom. Supports position-time, velocity-time, acceleration-time, and generic function plots.

Example: Plotting y = x², showing velocity vs time for projectile motion

Data Tables

showTable

Structured data tables with headers and rows for organizing information.

Example: Experimental data, comparison charts, truth tables

Statistical Displays

showStats

Statistical visualizations including distributions and summary statistics.

Example: Normal distributions, box plots, mean/median/mode

Diagrams

Physics Diagrams

showDiagram

Vector diagrams, free-body diagrams, projectile trajectories, motion diagrams, circular paths, and pipe flow diagrams.

Example: Free-body diagram of a block on an incline, vector addition

Custom SVG Diagrams

showSvgDiagram

Custom SVG layouts with strict zone positioning for flexible visual content.

Example: Circuit diagrams, flow charts, custom illustrations

Tree Diagrams

showTree

Hierarchical tree structures for probability, data structures, and genealogy.

Example: Probability trees, binary search trees, factor trees

Venn Diagrams

showVennDiagram

Overlapping set diagrams for comparing and contrasting concepts.

Example: Set operations, classification, comparing properties

Science

3D Molecular Structures

showMolecule

Interactive 3D molecular viewer for chemistry with rotation and zoom.

Example: Water molecule, organic compounds, protein structures

Programming

Code Blocks

showCode

Syntax-highlighted programming code extracted from markdown fences.

Example: Python functions, JavaScript algorithms, SQL queries

Page Navigation

The whiteboard organizes content into pages. The tutor creates new pages for new concepts and can navigate back to previous pages for review.

New Page

newPage

Creates a new whiteboard page for the next concept or problem.

Page Navigation

goToPage

Navigates back to a previous whiteboard page for review.

Clear

clear

Clears the current whiteboard page.

How Whiteboard Commands Work

Whiteboard commands are generated by the AI as part of its response. When the tutor says "Let me show you this equation," it simultaneously emits a showEquation command that the whiteboard renderer picks up and displays. Partners do not need to implement whiteboard rendering — it is handled entirely within the embed.

If you need whiteboard data for analytics (e.g., which visual types are most used), the whiteboard.generated webhook event fires each time a visual is created, and the full whiteboard history is available via GET /sessions/:id/whiteboard.