Instalar Markstream

Visão Geral

Integre o renderizador de streaming de Markdown Markstream correto em uma aplicação frontend existente. Esta habilidade seleciona o pacote do framework, instala apenas os peers opcionais solicitados, preserva os padrões seguros de HTML e Mermaid, e lida com CSS, estado de streaming e limites de SSR.

Leia references/scenarios.md antes de selecionar pacotes ou peers opcionais.

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 Markstream em Vue, Nuxt, React, Next.js, Svelte, Angular ou Vue 2;
• corrigir estilos Markstream ausentes, um pacote de framework incorreto ou uma falha de SSR;
• substituir outro renderizador de Markdown por Markstream;
• escolher entre conteúdo estático, streaming suave integrado ou entrada de AST analisada externamente.

Como Funciona

1. Inspecione a aplicação host

Antes de alterar dependências, inspecione:

• o framework e a versão em package.json;
• o arquivo de lock do gerenciador de pacotes existente;
• se a aplicação usa SSR;
• estilos reset, Tailwind, UnoCSS ou design-system;
• recursos opcionais necessários, como código destacado, Monaco, Mermaid, D2 ou KaTeX.

Não selecione markstream-vue meramente porque o repositório de origem tem Vue em seu nome. Escolha o pacote específico do framework da tabela de cenários.

2. Instale o menor conjunto de dependências

Antes de instalar ou alterar arquivos de origem, visualize as dependências exatas e as alterações de código e obtenha aprovação explícita do usuário. Não troque de gerenciador de pacotes nem substitua um renderizador existente implicitamente.

Instale exatamente um pacote de framework e preserve o gerenciador de pacotes do repositório. Adicione peers opcionais apenas quando a UI solicitada usar seu recurso.

Exemplos:

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

Para Vue 2.6, também instale e registre @vue/composition-api. Vue 2.7 tem uma Composition API integrada e não deve instalar esse plugin.

3. Conecte os estilos na ordem correta

Importe os resets da aplicação antes dos estilos Markstream. Importe o CSS do pacote explicitamente em vez de depender das importações de componentes para injetá-lo.

Para Tailwind ou UnoCSS, coloque a folha de estilo do pacote correspondente em uma camada de componente:

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

Quando a renderização de matemática estiver habilitada, também importe:

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

Vue CLI 4 e outros projetos Vue 2 baseados em Webpack 4 não entendem mapas de exportação de pacotes. Use o caminho do arquivo publicado nesses projetos:

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 a aplicação host mantenha um AST.

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

5. Lide com limites de framework

• Em Nuxt, mantenha peers opcionais apenas para navegador atrás de limites do cliente.
• Em Next.js, use o 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, e markstream-react/server para renderização apenas no servidor.
• Use markstream-svelte apenas com Svelte 5.
• Confirme se o host 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.

6. Preserve padrões seguros

A política de HTML tem como padrão safe, e o Mermaid usa o modo estrito. Não amplie nenhuma dessas configurações, 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

Execute o menor comando de build, verificação de tipos ou teste relevante. Confirme:

1. o pacote selecionado corresponde ao framework;
2. apenas os peers opcionais solicitados foram adicionados;
3. os estilos carregam após os resets;
4. as páginas SSR não avaliam peers apenas para navegador no servidor;
5. o conteúdo estático e pelo menos uma atualização incremental renderizam corretamente.

Relate o pacote selecionado, os peers adicionados, a localização do CSS, a escolha da entrada de streaming e o comando de validação.

Exemplos

Chat em streaming Vue 3

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

…