Rich output

The agent doesn't just write text back at you. Its replies stream into a chat that knows how to render tables, diagrams, code diffs, math, HTML previews, PDFs, and more — all inline, all interactive.

This page is a tour. Each section links to a dedicated deep-dive if there is one.

Markdown

Every assistant message is Markdown. Headings, lists, tables, blockquotes, inline code, emphasis, links — they all render live as the response streams in. If the agent writes **bold**, you see bold; no waiting for the full response to finish before formatting applies.

Links open in your default browser (external) or navigate inside the app (for internal routes like deeplinks).

Code blocks

Triple-backtick code fences render with syntax highlighting via Shiki. The language tag controls the highlighter:

```python
def hello(name):
    return f"Hello, {name}"
```

Every code block gets:

• Copy button in the top right.
• Fullscreen on hover for long blocks.
• Language badge if the agent specified one.

Diffs

A diff fence, or any tool that produces a code change, gets the full diff viewer:

• Unified or split view.
• Per-file headers with addition/deletion counts.
• Scrollable, fullscreen-capable.
• Multi-file changes group by file with a jump list.

When the agent uses Edit / Write, the tool result is automatically rendered as a diff.

Mermaid diagrams

A mermaid fence renders a live diagram:

```mermaid
graph LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Do it]
  B -->|No| D[Skip]
```

Supported diagram types: flowcharts (graph), state diagrams (stateDiagram-v2), sequence diagrams, class diagrams, ER diagrams. Colours follow your theme automatically — no extra work needed to match dark mode.

See Mermaid for diagram types and syntax examples.

Math (LaTeX)

Inline math with $...$ and block math with $$...$$ or a math / latex fence render through KaTeX. Good for anything that would lose fidelity in plain text — probability, linear algebra, derivations.

Data tables

Tabular data rendered as a structured table rather than Markdown pipes. Get sorting, filtering, grouping, and export to CSV / XLSX. The agent produces these by calling transform_data with a small JSON schema:

{
  "title": "Open PRs",
  "columns": [
    { "key": "repo", "label": "Repository", "type": "text" },
    { "key": "title", "label": "Title", "type": "text" },
    { "key": "author", "label": "Author", "type": "badge" },
    { "key": "age_days", "label": "Age", "type": "number" }
  ],
  "rows": [
    { "repo": "api", "title": "Fix auth bug", "author": "alex", "age_days": 3 },
    { "repo": "web", "title": "Add dark mode", "author": "sam", "age_days": 7 }
  ]
}

See Data Tables for the full column-type catalogue and export options.

Markdown preview

When the agent wants to show a rendered .md file inline — a README, a generated report, a design doc — it uses a markdown-preview block referencing the file by absolute path:

```markdown-preview
src: /Users/you/project/README.md
```

The file renders through the same rich Markdown pipeline as every assistant message — headings, tables, diagrams, code, math — rather than appearing as a raw code dump. Pass an items array to preview several files at once:

```markdown-preview
items:
  - /Users/you/project/README.md
  - /Users/you/project/CHANGELOG.md
```

A markdown-preview won't recursively render another markdown-preview nested inside it, but every other inline block (diagrams, data tables, the previews below) still renders normally within the previewed file.

HTML preview

When the agent generates an HTML document — a quick prototype, a landing page mockup, an email template — it appears as a sandboxed iframe preview with a live render and a view-source toggle.

The iframe doesn't execute <script> tags (scripts are sandboxed out); links redirect to external browsers rather than navigating inside the preview. It's for rendering, not running.

See HTML Preview for the sandbox model.

PDF preview

PDF attachments and PDFs generated by the agent open in an in-app viewer with zoom, fullscreen, and page navigation. See PDF Preview.

Image preview

Images in messages — whether attached by you or produced by the agent via screenshot or an MCP tool — get fullscreen click-through, zoom, and pan. Image files in datatables render as thumbnails.

JSON preview

Long JSON structures from tool results render as a collapsible tree with search, copy-key, copy-value, and jump-to-path. Useful for API responses the agent surfaces mid-conversation.

Browser snapshots

When the agent uses the browser tool, its screenshots come back as image blocks you can click through. Annotated screenshots (with @e1, @e2, … labels overlaid on interactive elements) help you see what the agent was about to do.

Tool results

Every tool call gets a structured card in the chat with:

• Tool name and an _intent line if the agent provided one (e.g. "checking current branch").
• Collapsible input / output sections.
• Tool-specific renderers (e.g. Bash shows a terminal-styled output; Read shows a file peek with a jump-to-editor link).

The underlying raw tool I/O is always available behind the fold for auditing — the card is the pretty view, the raw is the source of truth.

Across providers

All rich rendering works regardless of which LLM is driving the session. Claude, GPT-4o, Gemini, local Ollama models — they all output text, and Fabric Agents' renderer does the heavy lifting client-side. So @ollama Draw me a sequence diagram works the same as @anthropic.

Related

• Data Tables — the full column-type catalogue and export format.
• Mermaid — diagram types and rendering details.
• HTML Preview — iframe sandbox specifics.
• PDF Preview — in-app PDF viewer.
• Tool Icons — customising the icons shown on tool-result cards.