What Are Blocks?
In Tesseract, every AI response is a block document — an ordered sequence of content blocks. Each block has a specific type that determines how it’s rendered. The AI automatically selects the most appropriate block type for each piece of content.
Block Types
Text
The default block type. Supports full Markdown formatting including bold, italic, lists, links, and inline code. Most responses include at least one text block for explanations and context.
Callout
Highlighted alert boxes with an icon and colored background. Used for tips, warnings, and important notes.
- Info (amber) — General tips and helpful context
- Warning (orange) — Caution notices and caveats
- Success (green) — Confirmations and positive outcomes Each callout has a title and body text.
Math (KaTeX)
Mathematical equations rendered with KaTeX. Supports both inline mode (within text) and display mode (centered, standalone). The AI uses this whenever formulas, theorems, or mathematical notation would be clearer than plain text.
Table
Sortable data tables with labeled columns and rows. Tables are expandable when they contain many rows.
Try it: “Compare sorting algorithms by time and space complexity”
Chart (Vega-Lite)
Statistical visualizations powered by Vega-Lite. Supports bar charts, line charts, pie charts, and more. Best for standard data visualizations.
Try it: “Show me CO2 emissions by country”
Chart (Plotly)
Advanced interactive charts powered by Plotly. Supports 2D and 3D visualizations including scatter plots, surface plots, heatmaps, contour plots, and animated charts with playback controls.
Diagram (Mermaid)
Diagrams rendered with Mermaid.js — flowcharts, sequence diagrams, state diagrams, class diagrams, entity-relationship diagrams, Gantt charts, and more. This is the primary diagram block: the AI reaches for it whenever a process, relationship, or structure is clearer drawn than described.
Flow Diagram (legacy)
An older interactive diagram type powered by React Flow, kept for backwards compatibility with existing conversations — new responses use Mermaid instead. React Flow diagrams support multiple node types:
| Node Type | Shape | Used For |
|---|---|---|
| Process | Rectangle | Actions and steps |
| Decision | Diamond | Branching logic (yes/no, if/else) |
| Start / End | Rounded pill | Flow entry and exit points |
| Data | Parallelogram | Data input/output |
| Database | Cylinder | Databases and storage |
| Subprocess | Double-bordered rectangle | Reusable sub-processes |
| Annotation | Bracket-style note | Comments and documentation |
React Flow diagrams can be panned and zoomed and support both horizontal and vertical layouts.
Try it: “What’s the decision tree for choosing a database?” — rendered as a Mermaid diagram.
Code
Syntax-highlighted code blocks with automatic language detection and optional line numbers. Used for code examples, configuration snippets, and technical output.
Image
AI-generated images. The AI generates an image when a visual illustration would significantly enhance the explanation, and it can also annotate an image you’ve uploaded — drawing labels, arrows, or highlights on top of it.
Math Video
A short animated math video (Manim-style) shown with an in-block player — play/pause, scrubber, playback speed (0.5×–2×), loop, picture-in-picture, and fullscreen. The AI generates one when an animation explains a concept better than text or a static diagram. Videos render at 1080p (with voiceover) and get their own shareable page — see the Math Videos page.
Divider
A simple horizontal separator used to visually divide sections within a response.
Visual selection policy: The AI defaults to text and math blocks. Visual blocks like tables, charts, diagrams, and videos are only used when they are materially clearer than text. Every visual block includes an internal note explaining why a visual format was chosen.