Markstream Install

Markstream install

Integrates the smallest correct Markstream package into an existing frontend, wires package CSS in the right order, preserves safe rendering defaults, and validates static and streaming Markdown output.

When to invoke

• "Add streaming Markdown rendering to this AI chat."
• "Install Markstream in my Vue, React, Svelte, Angular, Nuxt, or Next.js app."
• "Fix missing Markstream styles or SSR errors."
• "Replace our Markdown renderer with Markstream."
• "Should this use content, smooth streaming, or nodes?"

Prerequisites and context

Inspect the host application before changing dependencies:

• Framework and version in package.json.
• Package manager lockfile.
• SSR mode: Nuxt, Next.js, server components, or static SPA.
• Reset, Tailwind, UnoCSS, or design-system style order.
• Requested optional peers: code highlighting, enhanced File/Diff surfaces, Monaco, Mermaid, D2, infographic blocks, or KaTeX.

Read references/scenarios.md before choosing packages or peers. Official sources are https://markstream.simonhe.me/ and https://github.com/Simon-He95/markstream-vue .

Procedure

1. Inspect the host application and identify the exact framework boundary.
2. Install exactly one framework package and only the optional peers required by the requested UI.
3. Import Markstream CSS explicitly after resets; use a component layer for Tailwind or UnoCSS.
4. Add the smallest renderer that matches the input model: content, smooth streaming, or nodes plus final.
5. Apply framework-specific SSR and client boundaries.
6. Preserve safe HTML and strict Mermaid defaults unless the user explicitly requires a trusted exception.
7. Run the smallest relevant build, typecheck, or test command.

Package selection

Install examples:

npm install markstream-vue
npm install markstream-react
npm install markstream-svelte
npm install markstream-angular
npm install markstream-vue2

Styling and renderer rules

Import application resets before Markstream styles. Do not rely on component imports to inject CSS.

@import 'markstream-vue/index.css' layer(components);
@import 'katex/dist/katex.min.css';

Use the matching package subpath for React, Svelte, Angular, or Vue 2. For Webpack 4-based Vue 2 applications, use:

import 'markstream-vue2/dist/index.css'

For Vue 3 streaming chat, start with:

<MarkdownRender
  mode="chat"
  :content="markdown"
  :final="false"
  smooth-streaming="auto"
  :fade="false"
  typewriter
/>

For completed history, keep the mode and switch pacing off:

<MarkdownRender
  mode="chat"
  :content="markdown"
  :final="true"
  :smooth-streaming="false"
  :fade="true"
  :typewriter="false"
/>

In React, Svelte, and Angular, use equivalent camelCase or framework binding syntax: smoothStreaming="auto", fade=false, typewriter=true while streaming; smoothStreaming=false and typewriter=false for completed history.

Input and security choices

Gotchas

• Do not install every optional peer: install Monaco, Mermaid, D2, KaTeX, or infographic support only when requested.
• Do not assume Vue because the source repo is named markstream-vue: select the framework-specific package.
• Do not run browser-only peers during SSR: isolate them behind Nuxt client boundaries or Next.js client components.
• Do not add a second virtualizer blindly: for long Vue 3 conversations or an existing message virtualizer, consult the performance guide first.

Progressive disclosure and bundled resources

• references/scenarios.md: package choice, optional peer, and scenario matrix.

Markstream mode vocabulary

Markstream has built-in smooth streaming for chat and non-chat surfaces such as docs or minimal renderers. Keep those distinctions when choosing modes.

Output template

### Markstream install result

**Status:** installed | plan only | blocked
**Framework:** <Vue 3 | Nuxt | React | Next.js | Svelte 5 | Angular | Vue 2>
**Package:** `<markstream package>`
**Optional peers:** <none | list>
**CSS location:** `<file and import order>`
**Streaming input:** `content` | `nodes` plus `final` | static

**Changes**
- <dependency change>
- <renderer/component change>
- <style import change>

**Validation**
- `<build/typecheck/test command>`: pass | fail

Quality gate

• The selected package matches the detected framework.
• Only requested optional peers were added.
• CSS imports are explicit and load after resets.
• Tailwind or UnoCSS imports use a component layer when needed.
• SSR pages do not evaluate browser-only peers on the server.
• Static content and at least one incremental update render correctly.
• HTML policy remains safe and Mermaid remains strict unless a scoped trusted exception is documented.

References

• Installation
• AI chat and streaming
• Performance
• Troubleshooting
• Component overrides