Instalação do Markstream

Integre o pacote Markstream apropriado a uma aplicação existente sem instalar dependências opcionais desnecessárias ou enfraquecer seus padrões de segurança.

Leia references/scenarios.md antes de escolher pacotes ou peers.

Quando Usar

Use esta habilidade quando o usuário pedir para:

• adicionar renderização de Markdown em streaming a uma interface de chat de IA ou de documentos;
• instalar o Markstream em Vue, Nuxt, React, Next.js, Svelte, Angular ou Vue 2;
• corrigir uma instalação quebrada do Markstream, estilos ausentes ou falha de SSR;
• substituir outro renderizador de Markdown pelo Markstream;
• escolher entre entrada AST estática, de streaming suave e analisada externamente.

Fluxo de Trabalho

1. Inspecione a aplicação host

Antes de alterar as dependências, inspecione:

• o framework e a versão em package.json;
• o arquivo de bloqueio do gerenciador de pacotes;
• se a aplicação usa SSR;
• estilos de reset, Tailwind, UnoCSS ou design-system;
• recursos opcionais necessários: realce de código, superfícies de Arquivo/Diferença aprimoradas, Monaco, Mermaid, D2, blocos de infográficos ou KaTeX.

Não presuma que o pacote Vue está correto apenas porque o repositório de origem se chama markstream-vue. Selecione o pacote específico do framework na tabela de cenários.

2. Instale o menor conjunto de dependências

Instale exatamente um pacote de framework. Adicione peers opcionais apenas quando a UI solicitada usar o recurso deles.

Exemplos:

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

Preserve o gerenciador de pacotes existente do repositório. Não instale todos os peers opcionais preventivamente.

3. Conecte os estilos na ordem correta

Importe os resets da aplicação antes dos estilos do Markstream. Importe o CSS do pacote explicitamente; não confie nas importações de componentes para injetá-lo.

Para Tailwind ou UnoCSS, use o subcaminho do pacote relevante em uma camada de componente:

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

Use o nome do pacote correspondente para React, Svelte, Angular ou Vue 2. Se a renderização de matemática estiver habilitada, importe também:

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

Vue CLI 4 e outras aplicações Vue 2 baseadas em Webpack 4 não conseguem resolver mapas de exportação de pacotes. Nesses projetos, importe o arquivo publicado diretamente:

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

4. Adicione o menor renderizador funcional

Prefira content para documentos estáticos e a maioria das interfaces de chat em streaming. O streaming suave integrado do Markstream pode controlar a entrega irregular de tokens sem exigir que o host mantenha um AST.

Para superfícies de chat Vue 3, comece com:

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

Para histórico de chat concluído, mantenha o mesmo modo de renderizador e desative o controle de ritmo:

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

Em React, Svelte e Angular, use a sintaxe equivalente em camelCase ou de ligação de framework. Mantenha smoothStreaming="auto", fade=false e typewriter=true durante o streaming; use smoothStreaming=false e typewriter=false para histórico concluído.

Use nodes mais final apenas quando um worker, um armazenamento AST compartilhado, uma transformação personalizada ou outra camada de aplicação já possuir a análise.

5. Lide com limites específicos do framework

• Em Nuxt, mantenha os peers opcionais apenas para navegador atrás de limites do cliente.
• Em Next.js, use a entrada markstream-react raiz dentro de um componente 'use client' para streams SSE ou WebSocket ao vivo. Use markstream-react/next para HTML com SSR primeiro e hidratação, ou markstream-react/server para renderização apenas no servidor.
• Use markstream-svelte apenas com Svelte 5.
• Confirme se a aplicação Angular atende ao requisito de versão atual do markstream-angular.
• Em Vue 3, use mode="chat" para chat de IA, mode="docs" para documentos ricos e mode="minimal" para superfícies leves não de chat.
• Para longas conversas em Vue 3 ou um virtualizador de mensagens existente, consulte o guia de desempenho do Markstream antes de adicionar um segundo virtualizador.

6. Preserve padrões seguros

A política de HTML é definida como safe por padrão, e o Mermaid usa o modo estrito. Não amplie nenhuma configuração a menos que o usuário identifique explicitamente uma superfície legada confiável que a exija. Limite qualquer exceção a essa superfície.

7. Valide

…