Install Markstream renderer into any frontend framework

Integrates the correct Markstream streaming Markdown renderer package into an existing frontend application, selecting the framework-specific package rather than assuming Vue just because the source repository has Vue in its name. Before touching dependencies it inspects the host's package.json framework and version, the existing package-manager lockfile, whether the app uses SSR, any reset/Tailwind/UnoCSS/design-system styles already in place, and which optional features (highlighted code, Monaco, Mermaid, D2, KaTeX) are actually requested - then installs exactly one framework package and only the optional peers the requested UI genuinely uses, previewing the exact dependency and code changes and getting explicit approval before installing or changing source files. Framework selection follows a fixed table: markstream-vue for Vue 3 / Nuxt 3 or 4, markstream-vue2 for Vue 2 (paired with @vue/composition-api on 2.6, but explicitly NOT installed on 2.7 since that version has Composition API built in), markstream-react for React 18+ / Next.js, markstream-angular for Angular 20+, and markstream-svelte for Svelte 5 only.

Styles must load in a specific order - application resets first, then the matching Markstream package CSS imported explicitly rather than relying on component imports to inject it; Tailwind/UnoCSS projects put the package stylesheet in a component layer (@import 'markstream-vue/index.css' layer(components)), math rendering additionally needs @import 'katex/dist/katex.min.css', and legacy Webpack 4-based Vue 2 projects (Vue CLI 4 and similar) can't resolve package export maps, so they need the literal published file path instead (import 'markstream-vue2/dist/index.css'). For the renderer input itself, content is preferred for static documents and most streaming chat interfaces, since Markstream's built-in smooth streaming can already pace irregular token delivery on its own; nodes plus final is reserved for cases where a worker, a shared AST store, a custom transform, or another application layer already owns parsing. Framework SSR boundaries matter specifically: in Nuxt, browser-only optional peers stay behind client boundaries; in Next.js, root markstream-react goes inside a 'use client' component for live SSE/WebSocket streams, markstream-react/next is for SSR-first HTML with hydration, and markstream-react/server is for server-only rendering; and in Vue 3, mode="chat"/"docs"/"minimal" selects the right surface. HTML policy defaults to safe and Mermaid defaults to strict mode, and neither should be broadened unless the user explicitly names a trusted legacy surface that needs it, scoped to only that surface. A completed message needs final=true set explicitly - disabling smooth-streaming pacing alone does not finalize trailing constructs, which is a documented common pitfall (a completed response that still looks incomplete).

Use it when the user wants 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; or choose between static content, built-in smooth streaming, or externally parsed AST input. Its own limitations: it does not choose application-specific visual styling or chat architecture, optional browser-heavy peers can require framework-specific client boundaries and bundler configuration, Vue 2.6/legacy Webpack projects need the documented compatibility steps, and current package/framework requirements must be checked against the host lockfile and Markstream's own docs before installing.

Install exactly one framework package, preserving the repo's existing package manager:

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

After installing, the validation step runs the smallest relevant build/typecheck/test command and confirms: the selected package matches the framework, only requested optional peers were added, styles load after resets, SSR pages don't evaluate browser-only peers server-side, and both static content and at least one incremental update render correctly - then reports the selected package, added peers, CSS location, streaming input choice, and the validation command used.

Covers the full Markstream package family (markstream-vue, markstream-vue2, markstream-react with its /next and /server entries, markstream-svelte, markstream-angular) plus optional peers: stream-markdown for lightweight highlighted code blocks (via a MarkdownCodeBlockNode override on the code_block node), stream-monaco for Monaco-powered code blocks, mermaid for diagrams, @terrastruct/d2 for D2 diagrams, and katex for math rendering. Listed as usable from Claude, Cursor, Gemini, and Codex.

Frontend developers adding or repairing streaming Markdown rendering in an AI chat or document interface, across Vue, React, Svelte, Angular, Nuxt, and Next.js, who need the framework-correct package and safe-by-default HTML/Mermaid settings rather than a broadened trust policy. Official skill from Simon-He95/markstream-vue under the MIT license, added 2026-07-19.