PrimitivesMarkdownContent

Markdown Content

MarkdownContent renders the markdown that assistants actually emit. Raw HTML is escaped, links get safe rel attributes, and typography inherits your prose scale.

MarkdownContent ships with a full API table, a copyable example, and accessibility notes.

tsx

Result

Bold and inline code.

Quoted context

Installation

Install the package once, then import MarkdownContent from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { MarkdownContent } from "@agent-ui/react/markdown-content";

Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.

Usage

The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.

tsx

1import { MarkdownContent } from "@agent-ui/react";
2 
3<MarkdownContent
4  content={"## Result\n\n- one\n- two\n\n**Done.**"}
5/>

API reference

Every prop MarkdownContent accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
content	string	—	Markdown source.
className	string	—	Sets the prose width and type scale.

Accessibility

Headings keep document order, links are keyboard reachable, and raw HTML is not executed.

Use it with the rest of the library

MarkdownContent composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

5 lines · copy-ready