Back to Details

markstream-react

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Markstream React

Markstream React

Use this skill when the host app is React or Next and the task is to wire Markstream safely.

当宿主应用为React或Next，且需要安全集成Markstream时，可使用本技能。

Workflow

工作流程

Confirm the repo is React, Next, or another React-based host.
Install
```
markstream-react
```
plus only the requested optional peers.
Import
```
markstream-react/index.css
```
from the app shell or client entry.
Start with
```
content
```
.
- Move to
```
nodes
```
  plus
```
final
```
  only when the UI receives streaming or high-frequency updates.
Respect SSR boundaries in Next.
- Prefer
```
use client
```
  , dynamic imports with
```
ssr: false
```
  , or other client-only boundaries when browser-only peers are involved.
Use scoped Markstream overrides before custom parser work.
Validate with the smallest useful dev, build, or typecheck command.

确认代码仓库为React、Next或其他基于React的宿主应用。
安装
```
markstream-react
```
及仅所需的可选依赖包。
从应用外壳或客户端入口导入
```
markstream-react/index.css
```
。
从
```
content
```
开始使用。
- 仅当UI需要接收流式更新或高频更新时，切换为
```
nodes
```
  搭配
```
final
```
  使用。
遵守Next中的SSR边界规则。
- 当涉及仅浏览器端依赖时，优先使用
```
use client
```
  、设置
```
ssr: false
```
  的动态导入或其他仅客户端边界。
在进行自定义解析器工作前，使用作用域内的Markstream覆盖配置。
使用最精简的dev、build或typecheck命令进行验证。

Default Decisions

默认决策

Renderer wiring first, migration cleanup second.
If the repo already uses
```
react-markdown
```
, pair this skill with
```
markstream-migration
```
.
Prefer the smallest client-only boundary that solves the SSR issue.

优先完成渲染器集成，再进行迁移清理工作。
若代码仓库已使用
```
react-markdown
```
，请将本技能与
```
markstream-migration
```
配合使用。
优先选择能解决SSR问题的最小仅客户端边界。

Useful Doc Targets

实用文档目标

```
docs/guide/react-quick-start.md
```
```
docs/guide/react-installation.md
```
```
docs/guide/react-markdown-migration.md
```
```
docs/guide/component-overrides.md
```

```
docs/guide/react-quick-start.md
```
```
docs/guide/react-installation.md
```
```
docs/guide/react-markdown-migration.md
```
```
docs/guide/component-overrides.md
```