Markstream Install

Overview

Integrate the correct Markstream streaming Markdown renderer into an existing frontend application. This skill selects the framework package, installs only requested optional peers, preserves safe HTML and Mermaid defaults, and handles CSS, streaming state, and SSR boundaries.

Read references/scenarios.md before selecting packages or optional peers.

When to Use

Use this skill when the user asks to:

• add streaming Markdown rendering to an AI chat or document interface;
• install Markstream in Vue, Nuxt, React, Next.js, Svelte, Angular, or Vue 2;
• repair missing Markstream styles, an incorrect framework package, or an SSR failure;
• replace another Markdown renderer with Markstream;
• choose between static content, built-in smooth streaming, or externally parsed AST input.

How It Works

1. Inspect the host application

Before changing dependencies, inspect:

• the framework and version in package.json;
• the existing package-manager lockfile;
• whether the application uses SSR;
• reset, Tailwind, UnoCSS, or design-system styles;
• required optional features such as highlighted code, Monaco, Mermaid, D2, or KaTeX.

Do not select markstream-vue merely because the source repository has Vue in its name. Choose the framework-specific package from the scenario table.

2. Install the smallest dependency set

Before installing or changing source files, preview the exact dependency and code changes and obtain explicit user approval. Do not switch package managers or replace an existing renderer implicitly.

Install exactly one framework package and preserve the repository's package manager. Add optional peers only when the requested UI uses their feature.

Examples:

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

For Vue 2.6, also install and register @vue/composition-api. Vue 2.7 has a built-in Composition API and must not install that plugin.

3. Wire styles in the correct order

Import application resets before Markstream styles. Import package CSS explicitly instead of relying on component imports to inject it.

For Tailwind or UnoCSS, put the matching package stylesheet in a component layer:

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

When math rendering is enabled, also import:

@import 'katex/dist/katex.min.css';

Vue CLI 4 and other Webpack 4-based Vue 2 projects do not understand package export maps. Use the published file path in those projects:

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

4. Add the smallest working renderer

Prefer content for static documents and most streaming chat interfaces. Markstream's built-in smooth streaming can pace irregular token delivery without requiring the host application to maintain an AST.

Use nodes plus final only when a worker, shared AST store, custom transform, or another application layer already owns parsing.

5. Handle framework boundaries

• In Nuxt, keep browser-only optional peers behind client boundaries.
• In Next.js, use root markstream-react inside a 'use client' component for live SSE or WebSocket streams.
• Use markstream-react/next for SSR-first HTML with hydration and markstream-react/server for server-only rendering.
• Use markstream-svelte only with Svelte 5.
• Confirm the host meets the current markstream-angular version requirement.
• In Vue 3, use mode="chat" for AI chat, mode="docs" for rich documents, and mode="minimal" for lightweight non-chat surfaces.

6. Preserve safe defaults

HTML policy defaults to safe, and Mermaid uses strict mode. Do not broaden either setting unless the user explicitly identifies a trusted legacy surface that requires it. Scope any exception to that surface.

7. Validate

Run the smallest relevant build, typecheck, or test command. Confirm:

1. the selected package matches the framework;
2. only requested optional peers were added;
3. styles load after resets;
4. SSR pages do not evaluate browser-only peers on the server;
5. static content and at least one incremental update render correctly.

Report the selected package, added peers, CSS location, streaming input choice, and validation command.

Examples

Vue 3 streaming chat

<MarkdownRender
  mode="chat"
  :content="markdown"

…