wehub-resource-sync
e30e75b5d4
Changesets / Create Version PR (push) Has been cancelled
Deploy Shadcn Registry / Deploy Production (push) Has been cancelled
Template Metrics / LOC + Bundle Size (push) Has been cancelled
Code Quality / Oxlint + Oxfmt (push) Has been cancelled
Code Quality / Template Sync (push) Has been cancelled
Code Quality / Build Changed Packages (push) Has been cancelled
Code Quality / Test Changed Packages (push) Has been cancelled
Deploy Expo Example / Deploy Production (push) Has been cancelled
Deploy Ink Example / Deploy Production (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-stream, 3.12) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Has been cancelled
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Has been cancelled
33 lines
1.4 KiB
Markdown
33 lines
1.4 KiB
Markdown
# `@assistant-ui/react-markdown`
|
|
|
|
[`react-markdown`](https://github.com/remarkjs/react-markdown) integration for `@assistant-ui/react`. Renders the assistant's markdown output as React components inside `MessagePrimitive.Parts`.
|
|
|
|
## When to use this
|
|
|
|
| Package | Best for |
|
|
| ---------------------------------------- | ----------------------------------------------------------------- |
|
|
| `@assistant-ui/react-markdown` | Lightweight rendering; bring your own syntax highlighter. |
|
|
| `@assistant-ui/react-streamdown` | Feature-rich with built-in Shiki, KaTeX, and Mermaid. |
|
|
| `@assistant-ui/react-syntax-highlighter` | Pair with `react-markdown` when you only need code-block highlighting. |
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @assistant-ui/react @assistant-ui/react-markdown react-markdown remark-gfm
|
|
```
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
|
|
export const MarkdownText = () => (
|
|
<MarkdownTextPrimitive remarkPlugins={[remarkGfm]} className="aui-md" />
|
|
);
|
|
```
|
|
|
|
Plug `<MarkdownText />` into `MessagePrimitive.Parts` as the `Text` component to render markdown for every text part.
|
|
|
|
Full reference at [assistant-ui.com/docs/ui/markdown](https://www.assistant-ui.com/docs/ui/markdown).
|