import { MarkdownView } from "@elabs-ai/components-ai";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-aiPrompt for your coding agent
Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui MarkdownView component (from @elabs-ai/components-ai) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look MarkdownView up before writing code: `npx -y @elabs-ai/components-cli docs MarkdownView` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-ai is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Avoid
- Rendering a produced document with CodeBlock instead — documents are read, not syntax-highlighted (research 09).
- Passing untrusted HTML through it expecting sanitization — it renders markdown; the app owns what it trusts.
- Using it for streamed chat prose — that is MessageResponse; MarkdownView is for a settled asset.
Works with
Used inside
Pairs with
Examples
Constrained Headings
The constrained rung for narrow embeds (research 09 §G.2): `baseHeadingLevel={2}` maps a document `#` to the title rung — never "biggest text on screen" in a rail.
Inline Citations
The #10 motivating use case: a RAG answer's markdown emits `[1](url)`-style citation markers. Overriding `components.a` swaps those for `InlineCitation` chips — every other element (the `##` heading, the "dashboard" link) still renders through the internal Prose* map because `MarkdownView` MERGES the override in per key rather than replacing the whole map.
API
MarkdownView
| Prop | Type | Description |
|---|---|---|
baseHeadingLevel | ProseHeadingLevel | The prose level a markdown `#` maps to; deeper headings shift with it (capped at 6). Default `1` (the full reading scale). Pass `2` in narrow embeds (a context rail) so headings stay on the constrained rung. |
components | StreamdownComponents | Per-element renderer overrides, MERGED over the internal Prose* map (#10) — a consumer entry wins for its key; every key the consumer does NOT set keeps rendering through `buildProseComponents()`. This is the seam for rendering inline citations: override `a` (or a custom node type) to swap a `[1](url)`-style marker for an `InlineCitation` chip while headings/lists/etc. keep the branded prose styling. Deliberately a MERGE, not a replace: sanitisation is unaffected either way (see `plugins` below), but a wholesale replace would silently drop the branded styling from every element the consumer didn't think to re-declare — a citation override should not have to also re-implement headings/lists/code to keep them on-brand. **Known constraint: a `components` change alone does not force a re-render of already-rendered markdown (#10).** Streamdown memoizes on `children`/`plugins`/theme/etc but NOT on `components` (`streamdown@2.5.0`'s top-level `memo` comparator omits it), so if the SAME markdown string is still current when an override's closed-over data changes — e.g. an inline-citation chip that resolves its title asynchronously — the new render function is captured but nothing schedules Streamdown to call it again. Don't rely on a `components` closure to reflect state that arrives after the initial render; instead have the overriding component read that state itself (a shared context, a store keyed by citation id, or an internal `useState`/subscription inside the override) so IT re-renders independently of `MarkdownView`'s own render pass — the pattern `InlineCitation`/`InlineCitationCard` already use. |
plugins | StreamdownPlugins | Streamdown plugin-slot overrides (`cjk`/`code`/`math`/`mermaid`/ `renderers`), MERGED per key over the internal defaults (the reactive, brand-token-derived `code` plugin and i18n-aware `cjk`/`math`/`mermaid` set — see `_streamdown-i18n.ts`). **This narrow `plugins` prop can only APPEND — it can never displace Streamdown's default `rehypePlugins` chain** (`rehype-raw` → `rehype-sanitize` → `rehype-harden`). `MarkdownView` never sets `rehypePlugins` itself, and nothing in `PluginConfig` removes or replaces a member of that pipeline, so the sanitiser cannot be turned off through this prop. But two of the five slots are **not** upstream of it and must be treated as trusted code: - **`math.rehypePlugin` runs AFTER `rehype-sanitize`/`rehype-harden`** (appended to the end of the rehype pipeline, verified against `streamdown@2.5.0`'s `dist/chunk-BO2N2NFS.js`) — its output is never re-sanitised. - **`mermaid` never enters the rehype/remark pipeline at all.** Its `getMermaid().render()` result is written via `dangerouslySetInnerHTML` (streamdown's only such sink). brand-ui's own `useStreamdownPlugins()` default pins `securityLevel: "strict"` (`_lazy-mermaid.ts`); a replacement `mermaid` plugin must sanitise its own SVG output the same way. - `cjk` (remark-stage only — its output is re-sanitised downstream by the rehype pipeline like any other remark result), `code` (feeds only `shikiTheme`, no HTML injection) and `renderers` (ordinary React components rendered with the fenced block's raw `code` string as a `string` prop, the same trusted-component boundary as a `components` override) do not bypass sanitisation. **`rehypePlugins` is NOT exposed on this component (#36, fixed).** Unlike `plugins`, a caller-supplied `rehypePlugins` array would REPLACE Streamdown's default rehype pipeline wholesale rather than extending it, silently dropping `rehype-raw`/`rehype-sanitize`/`rehype-harden` and letting a plain markdown string execute script in the host page — so `MarkdownViewProps` `Omit`s it at the type level AND `stripSanitizerOverrides()` deletes it at runtime before the `{...props}` spread below, even if a JS consumer or a cast reaches this component with it set. If you need to widen sanitisation, use `allowedTags`/`literalTagContent`, which MERGE into the sanitize schema instead of replacing the pipeline. See `packages/ai/src/_streamdown-safety.ts`. **`remarkPlugins` IS supported** (PR #74 review, round 1 — the original #36 fix over-reached and removed it too). The remark stage runs strictly upstream of the rehype chain, and Streamdown builds its rehype list without reading `remarkPlugins`, so everything a remark plugin emits is still sanitised downstream — measured across raw-`html` mdast nodes, `data.hName`/`hChildren` hast elements, `hProperties` event handlers, `javascript:` link URLs and smuggled `raw` hast children. Note the ordinary (non-security) footgun: your array REPLACES Streamdown's own remark defaults (`remark-gfm`, `codeMeta`), so spread `Object.values(defaultRemarkPlugins)` from `streamdown` back in if you want to keep GFM tables/strikethrough. |