Math Rendering

LaTeX Response Format

Math AI renders mathematical notation through markdown + KaTeX. Use normal prose for explanations, wrap inline math with single dollar signs, and wrap display equations with double dollar signs.

Do not place ordinary formulas inside code fences unless you intentionally want to show raw source text instead of rendered math.

Rendered example: The slope-intercept form is $y = mx + b$, and a quadratic solution can be shown as $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$.

• Inline math: $x^2 + y^2 = r^2$

• Display math: $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$

• Keep explanation text outside the math delimiters

• Escape backslashes correctly when LaTeX appears inside JSON strings

The slope-intercept form is $y = mx + b$.

To solve the quadratic, use:

$$
x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
$$

JSXGraph Block Format

Math AI can render graphs when the assistant response contains a fenced jsxgraph or json block with valid graph JSON. The renderer accepts either a full GraphSpec object or a generic graph element array.

Recommended pattern: write the math explanation first, then place one fenced graph block below it so prose, formulas, and the graph remain easy to read.

In this documentation, LaTeX examples include a rendered preview below the source block. JSXGraph examples stay as raw JSON/code so developers can copy the exact payload structure.

• Supported fenced languages: jsxgraph and json

• Graph blocks must contain valid JSON

• Use a full GraphSpec object for structured graphs with options, expressions, sliders, or elements

• A generic array of graph elements is also accepted for simpler cases

{
  "options": {
    "boundingbox": [-6, 6, 6, -6],
    "axis": true,
    "grid": true
  },
  "expressions": [
    {
      "latex": "y = 2x + 1",
      "color": "#5BC1C1",
      "label": "y = 2x + 1"
    }
  ],
  "elements": [
    {
      "type": "point",
      "parents": [1, 3],
      "attrs": { "name": "A", "size": 3 },
      "id": "A"
    }
  ]
}

[
  {
    "t": "circle",
    "p": [[0, 0], 3],
    "a": { "strokeColor": "#5BC1C1" }
  }
]

Recommended Assistant Structure

For the best UX, keep the assistant response in this order: explanation prose, LaTeX math, then an optional JSXGraph block. This matches the current Math AI renderer behavior.

• Start with short explanatory text

• Render formulas with LaTeX delimiters

• Put interactive graph JSON in its own fenced block

• Avoid mixing raw graph JSON into normal prose paragraphs

The line has slope $2$ and y-intercept $1$, so its equation is $y = 2x + 1$.

$$
y = 2x + 1
$$

```jsxgraph
{
  "options": { "boundingbox": [-6, 6, 6, -6], "axis": true },
  "expressions": [
    { "latex": "y = 2x + 1", "color": "#5BC1C1" }
  ]
}
```