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.
Flow Diagram
Interactive diagrams powered by React Flow. Supports 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 |
Diagrams can be panned, zoomed, and support both horizontal (left-to-right) and vertical (top-to-bottom) layouts.
Try it: “What’s the decision tree for choosing a database?”
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 created via DALL-E. The AI generates an image when a visual illustration would significantly enhance the explanation.
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, and flow diagrams are only used when they are materially clearer than text. Every visual block includes an internal note explaining why a visual format was chosen.