AI Output Standard

One standard MDX output format for LLMs — so your components render correctly every time, with no post-processing.

Instead of correcting what an LLM outputs, define exactly what it should output upfront. One format, consistently followed, means components render correctly every time — no preprocessing, no patching.

How it works

System prompt defines the standard
        │
        ▼
LLM generates MDX following the standard
        │
        ▼
MDXRemote / MDXProvider renders it
        │
        ▼
Components appear — no correction needed

Standard Markdown elements

These map to styled components automatically via mdxComponents. Write plain Markdown — the renderer handles everything else.

Write	Renders as
`## Section`	Styled H2
`### Subsection`	Styled H3
`bold`	Emphasis strong
`italic`	Emphasis em
`inline code`	InlineCode
`> text`	Blockquote
`- item`	UnorderedList + ListItem
`1. item`	OrderedList + ListItem
```lang block	CodeBlock with syntax highlight
`\| col \|` table	Table components
`---`	HorizontalRule
`![alt](url)`	Image

No JSX needed for these

Never write <h2>, <strong>, <p>, <ul>, <li>, <table> — just write plain Markdown.

Custom components

Use JSX only for these. Everything else is standard Markdown.

Callout

For notes, warnings, tips, and key concepts.

<Callout variant="info" title="Key Concept">
  Content here. **Bold** and `code` work inside.
</Callout>
 
<Callout variant="warning" title="Common Mistake">
  What students often get wrong.
</Callout>
 
<Callout variant="success" title="Remember">
  A short rule to memorize.
</Callout>
 
<Callout variant="error" title="Do Not">
  Something that must be avoided.
</Callout>

title is optional. Variants: info · warning · success · error

Steps

For sequential procedures only — not for math derivations.

<Steps>
### Step 1: Identify the equation type
Determine whether the equation is linear or quadratic.
 
### Step 2: Apply the method
 
Use the appropriate technique for the type identified.
 
### Step 3: Verify
 
Substitute the result back to confirm it is correct.
 
</Steps>

Each step uses a ### heading inside <Steps>.

Accordion

For optional depth — proofs, derivations, extra examples.

<Accordion>
  <AccordionItem value="proof">
    <AccordionTrigger>Show full derivation</AccordionTrigger>
    <AccordionContent>
      Detailed proof or worked example goes here.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="example">
    <AccordionTrigger>Worked example</AccordionTrigger>
    <AccordionContent>Step-by-step example with explanation.</AccordionContent>
  </AccordionItem>
</Accordion>

Tabs

For alternative explanations or parallel content.

<Tabs>
  <TabsList>
    <TabsTrigger value="simple">Simple</TabsTrigger>
    <TabsTrigger value="formal">Formal</TabsTrigger>
  </TabsList>
  <TabsContent value="simple">A plain-language explanation here.</TabsContent>
  <TabsContent value="formal">
    A rigorous, technical explanation here.
  </TabsContent>
</Tabs>

CodeGroup

For showing the same code in multiple languages.

<CodeGroup>
  ```python title="Python" area = 3.14159 * r ** 2 ``` ```js title="JavaScript"
  const area = Math.PI * r ** 2; ```
</CodeGroup>

Math

Always use primitive components — never dollar signs or LaTeX strings. Each component reads exactly like what it renders — no engine, no backslashes.

Inline — compose primitives in prose:
 
π r<Squared />
 
<Frac num="a" den="b" />
 
Block — use Equation for display:
 
<Equation>
  x ={" "}
  <Frac
    num={
      <span>
        −b <PlusMinus />{" "}
        <Sqrt>
          <Squared>b</Squared> − 4ac
        </Sqrt>
      </span>
    }
    den="2a"
  />
</Equation>
 
<Equation>
  <Integral from="0" to={<Inf />}>
    <Pow
      exp={
        <span>
          −<Squared>x</Squared>
        </span>
      }
    >
      e
    </Pow>{" "}
    <Differential />x
  </Integral>{" "}
  ={" "}
  <Sqrt>
    <PiSym />
  </Sqrt>
</Equation>

Never use dollar signs or LaTeX props

$\pi r^2$ , $$\int...$$, <InlineMath math="...">, and <BlockMath math="..."> will not render. Use math primitives: <Frac>, <Pow>, <Integral>, <Alpha />, etc.

What is not allowed

These break rendering

If the LLM outputs any of these, components fail to render correctly.

Pattern	Use instead
$...$ inline math	`<Frac>`, `<Pow>`, `<Alpha />` etc.
`$$...$$` block math	`<Equation>` with primitives
`<InlineMath math="...">`	math primitives
`<BlockMath math="...">`	`<Equation>` with primitives
`<div>`, `<span>`, `<p>`, `<b>`, `<i>`	Plain Markdown
`# H1 heading`	Start sections with `##` minimum
`####` or deeper	Max depth is `###`
Invented component names	Only use components listed above
Markdown inside JSX props	Props take plain strings only

System prompt

Copy this into your system prompt. The LLM will follow it to generate valid MDX.

You generate content as MDX — Markdown with a small set of JSX components.
 
STRUCTURE
- Start sections with ## headings, subsections with ###, never go deeper
- Separate major sections with ---
- One blank line between block elements
 
STANDARD MARKDOWN (write these normally — they map to styled components automatically)
- Headings: ## and ###
- Bold: **text**, Italic: *text*
- Inline code: `code`
- Code blocks with language tag: ```lang
- Lists: - for unordered, 1. for ordered
- Tables: standard markdown | col | syntax
- Blockquotes: > text
- Horizontal rule: ---
 
CUSTOM COMPONENTS (use JSX for these only)
 
CALLOUT — notes, warnings, tips:
<Callout variant="info" title="Title">Content here.</Callout>
<Callout variant="warning" title="Title">Content here.</Callout>
<Callout variant="success" title="Title">Content here.</Callout>
<Callout variant="error" title="Title">Content here.</Callout>
 
STEPS — sequential procedures:
<Steps>
### Step 1: Title
Step content here.
### Step 2: Title
Step content here.
</Steps>
 
ACCORDION — optional depth, proofs, extra examples:
<Accordion>
  <AccordionItem value="unique-id">
    <AccordionTrigger>Label</AccordionTrigger>
    <AccordionContent>Content here.</AccordionContent>
  </AccordionItem>
</Accordion>
 
TABS — alternative explanations:
<Tabs>
  <TabsList>
    <TabsTrigger value="a">Label A</TabsTrigger>
    <TabsTrigger value="b">Label B</TabsTrigger>
  </TabsList>
  <TabsContent value="a">Content A</TabsContent>
  <TabsContent value="b">Content B</TabsContent>
</Tabs>
 
MATH — use primitive components only, never $ signs or LaTeX strings:
Fraction:  <Frac num="a" den="b" />
Power:     <Pow exp="2">x</Pow>
Subscript: <Sub sub="i">x</Sub>
Root:      <Sqrt>x</Sqrt>
Integral:  <Integral from="0" to="1">f(x) dx</Integral>
Sum:       <Sum from="i=0" to="n">i</Sum>
Greek:     <Alpha /> <Beta /> <Theta /> <Lambda /> <PiSym /> <Omega />
Display:   <Equation label="1">content using primitives</Equation>
 
STRICT RULES
- NEVER use $...$ or $$...$$
- NEVER use <InlineMath>, <BlockMath>, or any LaTeX string props
- NEVER use raw HTML tags
- NEVER invent component names not listed above
- NEVER use # (h1) headings
- NEVER go deeper than ### headings
- Props take plain strings; nested primitives in props: {<span>...</span>}

Quick reference

Variant	Use for
`info`	Key concepts, definitions, background context
`warning`	Common mistakes, things to watch out for
`success`	Rules to remember, tips, best practices
`error`	Things that must never be done

<Frac num="a" den="b" /> fraction
<Sqrt>x</Sqrt> square root
<Pow exp="2">x</Pow> superscript
<PiSym /> r<Squared /> Greek letter
<Sin />
<Theta /> trig function
<Vec>v</Vec> vector
<Bar>x</Bar> mean x̄
 
<Sum from="n=1" to={<Inf />}>
  <Frac num="1" den={<Squared>n</Squared>} />
</Sum>
<Integral from="a" to="b">
  f(x) <Differential />x
</Integral>
<Pow
  exp={
    <span>
      i<PiSym />
    </span>
  }
>
  e
</Pow>
+ 1 = 0

Next Steps

PreviousMCP Server

NextComponent Mappings

On This Page

How it works Standard Markdown elements Custom components Callout Steps Step 1: Identify the equation type Step 2: Apply the method Step 3: Verify Accordion Tabs CodeGroup Math What is not allowed System prompt Step 1: Title Step 2: Title Quick reference Next Steps

AI Output Standard

How it works#

Standard Markdown elements#

Custom components#

Callout#

Steps#

Accordion#

Tabs#

CodeGroup#

Math#

What is not allowed#

System prompt#

Quick reference#

Next Steps#