Installation Markstream

Intégrez le package Markstream approprié dans une application existante sans installer de dépendances optionnelles inutiles ni affaiblir ses paramètres de sécurité par défaut.

Consultez references/scenarios.md avant de choisir les packages ou les pairs.

Quand utiliser cette compétence

Utilisez cette skill quand l'utilisateur demande de :

ajouter un rendu Markdown en streaming à une interface de chat IA ou de document ;
installer Markstream dans Vue, Nuxt, React, Next.js, Svelte, Angular ou Vue 2 ;
réparer une installation Markstream cassée, des styles manquants ou une défaillance SSR ;
remplacer un autre moteur de rendu Markdown par Markstream ;
choisir entre une entrée AST statique, en streaming fluide ou analysée en externe.

Flux de travail

1. Inspecter l'application hôte

Avant de modifier les dépendances, inspectez :

le framework et sa version dans package.json ;
le fichier lockfile du gestionnaire de packages ;
si l'application utilise SSR ;
les styles de réinitialisation, Tailwind, UnoCSS ou design-system ;
les fonctionnalités optionnelles requises : coloration syntaxique, surfaces File/Diff améliorées, Monaco, Mermaid, D2, blocs infographiques ou KaTeX.

Ne supposez pas que le package Vue est correct simplement parce que le dépôt source s'appelle markstream-vue. Sélectionnez le package spécifique au framework dans le tableau des scénarios.

2. Installer l'ensemble minimal de dépendances

Installez exactement un package framework. Ajoutez les pairs optionnels uniquement quand l'interface utilisateur demandée utilise leur fonctionnalité.

Exemples :

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

Préservez le gestionnaire de packages existant du dépôt. N'installez pas tous les pairs optionnels de manière préventive.

3. Câbler les styles dans le bon ordre

Importez les réinitialisations d'application avant les styles Markstream. Importez le CSS du package explicitement ; ne vous fiez pas aux imports de composants pour l'injecter.

Pour Tailwind ou UnoCSS, utilisez le chemin de sous-package approprié dans une couche de composants :

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

Utilisez le nom de package correspondant pour React, Svelte, Angular ou Vue 2. Si le rendu mathématique est activé, importez aussi :

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

Vue CLI 4 et autres applications Vue 2 basées sur Webpack 4 ne peuvent pas résoudre les cartes d'export de packages. Dans ces projets, importez le fichier publié directement :

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

4. Ajouter le plus petit moteur de rendu fonctionnel

Préférez content pour les documents statiques et la plupart des interfaces de chat en streaming. Le streaming fluide intégré de Markstream peut réguler la livraison irrégulière de tokens sans exiger que l'hôte maintienne un AST.

Pour les surfaces de chat Vue 3, commencez par :

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

Pour l'historique de chat complété, maintenez le même mode de moteur de rendu et désactivez la régulation :

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

En React, Svelte et Angular, utilisez la syntaxe de liaison camelCase ou framework équivalente. Maintenez smoothStreaming="auto", fade=false et typewriter=true pendant le streaming ; utilisez smoothStreaming=false et typewriter=false pour l'historique complété.

Utilisez nodes plus final uniquement quand un worker, un magasin AST partagé, une transformation personnalisée ou une autre couche d'application possède déjà l'analyse.

5. Gérer les limites spécifiques au framework

Dans Nuxt, gardez les pairs optionnels réservés au navigateur derrière des limites client.
Dans Next.js, utilisez l'entrée racine markstream-react à l'intérieur d'un composant 'use client' pour les flux SSE ou WebSocket en direct. Utilisez markstream-react/next pour l'HTML d'abord SSR avec hydratation, ou markstream-react/server pour un rendu réservé au serveur.
Utilisez markstream-svelte uniquement avec Svelte 5.
Confirmez que l'application Angular satisfait à la condition actuelle requise par markstream-angular.
Dans Vue 3, utilisez mode="chat" pour le chat IA, mode="docs" pour les documents enrichis, et mode="minimal" pour les surfaces légères sans chat.
Pour les longues conversations Vue 3 ou un virtualisateur de messages existant, consultez le guide de performance Markstream avant d'ajouter un deuxième virtualisateur.

6. Préserver les paramètres par défaut sûrs

La politique HTML par défaut est safe et Mermaid utilise le mode strict. N'élargissez aucun paramètre sauf si l'utilisateur identifie explicitement une surface héritée de confiance qui l'exige. Limitez toute exception à cette surface.

7. Valider

Exécutez la commande de build, typecheck ou test la plus petite pertinente. Confirmez :

que le package sélectionné correspond au framework ;
que seuls les pairs optionnels demandés ont été ajoutés ;
que les styles se chargent après les réinitialisations ;
que les pages SSR n'évaluent pas les pairs réservés au navigateur sur le serveur ;
que le contenu statique et au moins une mise à jour incrémentielle se rendent correctement.

Rapportez le package sélectionné, les pairs ajoutés, l'emplacement CSS, le choix d'entrée en streaming et la commande de validation.

markstream-install