# @braincrew-lab/langchain-canvas 中文文档

规范地址：https://npmcn.com/package/%40braincrew-lab/langchain-canvas/

版本：0\.7\.57
npm 元数据更新时间：2026-11-08T11:05:17.349Z
中文译文更新时间：2026-11-08T13:58:54.613Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40braincrew-lab/langchain-canvas
原文对照：https://npmcn.com/package/%40braincrew-lab/langchain-canvas/?lang=original
项目主页：https://github.com/braincrew-lab/langchain-canvas#readme
源码仓库：https://github.com/braincrew-lab/langchain-canvas

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：6.2 MB，33 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19
- 运行依赖：5 个
- peer 依赖：react ^18 \|\| ^19，react-dom ^18 \|\| ^19，@langchain/langgraph-sdk \>=0\.0\.70
- 首次发布：2026-07-19T18:03:38.249Z
- 最新版本发布：2026-11-08T11:05:17.158Z
- 近 30 天下载量：3397（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：64（近 12 个月 64 个）

## 中文简介

LangChain代理的活画布——流文件,图表,和丰富的文物入围回放面板.

## 安装

```sh
npm install @braincrew-lab/langchain-canvas
```

也可以使用：`pnpm add @braincrew-lab/langchain-canvas`、`yarn add @braincrew-lab/langchain-canvas`、`bun add @braincrew-lab/langchain-canvas`

## README

# @braincrew-lab/朗链-canvas

一张LangChain聊天软件的画布 您的代理流出一个文物——网页,电子表格,幻灯片甲板,图表,文档——它出现在对话的旁边,可以直播和编辑. 用户可以用手进行微调并导出为真实文件.

想想ChatGPT Canvas 或 Claude Artifacts, 但你掉进自己反应应用程序的软件包 并指向自己的代理商.

> [读取](https://npmcn.com/package/%40braincrew-lab/langchain-canvas/README.ko.md)

```tsx
const { sendMessage, messages, canvas } = useCanvasStream({ endpoint: "/api/chat" });
// user: "make a pricing table for 3 plans"
// → a real spreadsheet appears in <Canvas />, formulas and all
```

## 安装

```bash
npm i @braincrew-lab/langchain-canvas
```

`docx`, (中文(简体) ), `docx-preview` 财务报告和审定财务报表 `fast-formula-parser` 带着包裹来. 缺少依赖性导出或公式引擎报告 打破剩余特性. `docx-preview` 用于导出平价 测试,不是通过存储文件查看器.

**存储 Word 文档使用服务器发送的页面图像**,通过 `PageViewer` 当两者都 `pageBaseUrl` 和正数 `pageCount` 备有。 否则他们 显示现有的网格图像、封面图像或文件卡。 没有消息 文本选择模式或被提取文本倒置,没有预览-不可声明栏.

**Python 侧打开并写入电子表格**,通过 `xlsx_import` 财务报告和审定财务报表 `TableXlsxExporter` 内 `langchain-canvas[xlsx]`读取a 工作簿下至其字体、填充、数字格式、合并、宽度和图像 超过浏览器应该携带, 和两个读者 持有相同的 是金色的装饰 网格本身没有变化:一张桌子的文物没有变 在浏览器中打开、编辑和导出 CSV.

**从 Python 侧导出到 PowerPoint 的甲板**,通过 `SlidesPptxExporter` 内 `langchain-canvas[office]`它建立在甲板上 模板外观,所以原作的主人公,布局和嵌入字体能活下来—— 这是浏览器从未有过的。 导出菜单为甲板提供PDF; 电线 Python 导出于您自己的端点 `.pptx`。 。 。 .

## 上马

有两件事:一个是接收你经纪人流的钩子,另一个是制作它的面板. 他们共用一家商店,所以他们之间没有线.

```tsx
import { Canvas, useCanvasStream } from "@braincrew-lab/langchain-canvas";
import "@braincrew-lab/langchain-canvas/styles.css";

function App() {
  const { sendMessage, messages } = useCanvasStream({ endpoint: "/api/chat" });
  return <Canvas />; // render sendMessage/messages in your own chat UI
}
```

-   `useCanvasStream({ endpoint })` → `{ sendMessage, messages, canvas, isStreaming, editSelection }`。 。 。 .
-   `<Canvas />` 拥有 `"use client"`,所以它掉进一个 **Next.js App路由器** 以文件形式存在.
-   `/api/chat` 使用电线协议的流 SSE(`canvas.create` 编号 : `append` 编号 : `patch` 编号 : `replace`) (中文(简体) ). 同伴Python包从LangChain/LangGraph代理中释放出这些;任何后端发送相同的JSON帧都有效.

这就是整个设置。 剩下的内容是 **如何使用每个特性** ——所有这一切都是直接操纵用户对所制成的文物的操作,没有你的额外代码.

### 只读文件查看器和可分块标签

存储的Office文件使用只读取的取景器:Word和演示文稿的服务器发送页面,Excel的单元格/公式检查. Word没有可选择的文本模式;没有服务器页面,它会使用图像/文件倒置. 幻灯片最初适合整个页面,Word适合宽度,页面计数器接受直接导航. 缩放保存读取位置。 页面/zoom/scroll 和工作簿工作表/选择状态在同一 Canvas 商店内存活的标签更改,但重新设置用于新的修改或重设商店;最多保留了32个文档视图,没有挂起隐藏的查看器. 工作簿提供键盘工作表切换,A1导航,复制动作和数字范围摘要不包括公式缓存. 查看器控件跟随主机主题,从不写入原始文档.

```tsx
<Canvas readOnly chrome={{ tabClose: true }} />
```

`tabClose` 选择进入。 关闭标签保存其文物、历史和位置 `canvas.order`; 它只在商店的视图中记录 id - 本地 `closedArtifactIds`。 。 。 . `store.getState().setActiveArtifact(id)` 重新打开它,并 `closeArtifact(id)` 关闭它而不发射编辑/保存回调。 关闭活动标签选择邻居; 关闭最后一个标签集 `activeId` 改为 `null`。 。 。 . `reset()` 清除闭塞状态。 主机盘点应继续列出完整的文物订单,以便关闭的文件仍然可以发现.

只读 HTML 框架保留 `allow-scripts` 沙盒没有同样来源的进入。 他们拒绝编辑消息,将 Escape 转发到主机,这样一个扩展的查看器就可以关闭而不允许编辑.

### 办公室要素参考

主机选择引用选择 `selectionMode="elements"`, (中文(简体) ), `loadElements`, (中文(简体) ), `onAddElement`,并控制 `selectedElements`。这无法进行编辑. `loadElements({ path, revision, signal })` 返回 a `CanvasElementCollection` 对于精确的修改; Word/PPT 覆盖使用正则的上-左上 `bounds` ,同时 Excel 将工作表实际名称和选定的 A1 范围进行分级. `onAddElement(reference, element)` 允许主机显示可移动的作曲芯片,并随其下一个聊天请求发送仅包含身份的引用. 主机拥有经认证的元数据加载,附件寿命,出版指针,服务器验证以及被接受的发端清除. 永远不要从图像坐标中推断出原生段落或形状身份。 只读的 HTML 保留其现有的检查器障碍沙盒 .

* * *

## 特性和如何使用

### \* 网页`html`)——可视页面构建器

HTML是底物,在被沙盒所制成的iframe中被制成. 选择和编辑代理器生成的任何 HTML 上的工作 .

-   **单击以选择** ——徘徊突出元素,单击选择.
-   **拖曳以移动** ——拖动所选元素重新定位(使用 CSS 变换,所以无损并保持页面的流量/响应性).
-   **对齐坐标向导** ——在移动时,边缘/中心会突起到附近的元素和容器中心,并有红色导线(如法格玛).
-   **调整手柄大小** ——拖起拐角调整大小. **图像大小在 `%`**,因此它们以布局来进行规模化——在移动式上较小,在桌面上更大.
-   **选中 Marque** ——拖出一个盒子来选择它里面的所有东西;选择是可预测的(最外层的物品,钻入由几个孩子组成的包装).
-   **组/ 取消组** ——选择2+元素和Group;它们获得一个共享的ID(没有包装,所以布局永远不会中断)并一起移动. 单击成员选择组合,然后是Ungroup.
-   **编辑内含文本** ——双击任意文本;浮动工具栏给出 **粗体 / 斜体 / 下划线 / 链接**。 。 。 .
-   **样式检查员** - 颜色、背景、字体大小/重量、行高、字母间隔、贴花、半径、宽度等 **背景梯度和背景图像** (上载或 URL).
-   **替换图像** 选择一个图像 **上传** 文件( 作为数据 URI 嵌入) 或粘贴 a **網址**。 。 。 .
-   **添加块** 从工具栏中插入标题、文本、按钮、图像或分隔符.
-   **节模板** ——投入现成 **英雄/地物/呼吁行动** 一节(自定和响应).
-   **结构行动** ——重复,删除,重排(上下移动)所选元素.
-   **响应预览** 切换 **桌面/ 平板电脑/ 移动** 宽度; 媒体查询会如实回答.
-   **代码视图** - 切换到 **代码** 以手方式编辑 HTML; 切换回 **设计** 变化是活的 一个视图元自动被注入,使页面在导出时响应.
-   **选择 − 代理人** - 通过 `onEditElement` 并出现了"向这个选择应用一个指令"栏,因此用户可以要求代理完全改变自己选择的内容.

### 电子表格`table`)——真实的电子表格

在电子表格引擎(财富表)上运行,而不是静态表格.

-   **活式公式** - 类型 `=SUM(C2:C4)`, (中文(简体) ), `=AVERAGE(...)`, (中文(简体) ), `=A2*B2`;它们用单元格引用、范围、函数自动完成来计算.
-   **数据公式** ——代理发送的公式作为值(例如. `"=AVERAGE(B2:B4)"`)为 **预计算负载** 所以它立即显示出它的结果.
-   **完整工具栏** ——字体,数字/货币/百分比格式,粗体/斜体,边框,单元格合并,对齐,多工作表——如桌面电子表格.
-   **平滑滚动** 双向覆盖一个大网格.
-   **导出** 改为 `.csv` 在这里,或去 `.xlsx` 通过 Python 一侧,有字体、合并和格式.

### QQ 幻灯片(`slides`)——免费帆船甲板

每个元素都是可移动的 PowerPoint 风格编辑器 .

-   **自由定位** ——拖放并调整文本/图像元素的大小;向向导靠拢.
-   **内置编辑** ——双击以编辑文本;粗体/大小/颜色/对齐的格式工具栏.
-   **结构** - 增加/复制/删除/重排幻灯片、缩略图、扬声符.
-   **主题和背景**,当前模式(全屏、箭键导航).
-   **导出** 改为 `.pptx`,或复制到 **图片** (直接插入可编辑的框架),或 **专题报告** (所有幻灯片).

### ∗∗ 文号`document`)——马克下/字

-   **点击到编辑** 页面为 Markdown, 由 GFM 制取.
-   **导出** 改为 `.docx`, (中文(简体) ), `.md`, (中文(简体) ), `.pdf`,或 `.html`。 。 。 .

### \* 图表`chart`(中文(简体) )

-   **行/行/区/派**,在一击中可切换.
-   **编辑内置数据** ——一个小网格来改变数值,添加/移动行.
-   **重新颜色** 每个序列(或每个派切片),重命名序列,设置y轴标签,切换堆放.
-   **导出** 改为 `.pdf` (图表是SVG,所以它打印清晰) 或生JSON.

### QQ 文件—— 往返

-   **导入** 通过拖放或文件拾取器: **CSV · 标记下 · HTML · JSON**。它们作为可编辑的文物打开。 Python 侧打开电子表格(`xlsx_import`) (中文(简体) ).
-   **导出** 每件古董都符合其原型 再加上通用 **独立 `.html`** 财务报告和审定财务报表 **专题报告** (浏览器印出.

### 每一个文物

-   **撤消/ 重做** —— 说 `⌘Z` 编号 : `⌘⇧Z` (或工具栏按钮)返回 _用户_ 编辑(代理串流不会被污染入堆栈).
-   **版本历史** ——每个 `canvas.replace` 抓取您可以退一步的版本 .
-   **错误隔离** ——投出一个渲染器显示的是内向倒置,而不是崩溃主机应用.
-   **多个画布** - 把树包起来 `<CanvasProvider>` 在一个应用程序中运行独立实例.

* * *

## 包装在您的应用程序中

-   **同伴依赖 :** 反应18或19——你带来自己的. 仅限无害环境管理.
-   **样式 :** `import "@braincrew-lab/langchain-canvas/styles.css"` 一次 一次吗.
-   **孤立事件:** `<CanvasProvider>` 给每个树种自己的商店.
-   **带上你的制造器:** 通过 `registry` 以添加或覆盖一个类型是如何构成的.

```tsx
import { Canvas, mergeRegistries, builtinRenderers } from "@braincrew-lab/langchain-canvas";

const registry = mergeRegistries(builtinRenderers, {
  metric: ({ artifact }) => <div className="big-number">{artifact.data.value}</div>,
});

<Canvas registry={registry} />
```

### 没有后端? 重放固定或嘲笑聊天

```tsx
import { useCanvasReplay, scenarios } from "@braincrew-lab/langchain-canvas";

const { play } = useCanvasReplay();
useEffect(() => { play(scenarios.find((s) => s.id === "table")!.events); }, [play]);
```

```tsx
useCanvasStream({ mock: (msg) => (/chart/i.test(msg) ? chartEvents : null) }); // null → hit the endpoint
```

## 如何运作

```
agent  ──SSE──▶  canvas events  ──▶  reconciler  ──▶  store  ──▶  renderer
                (create/append/patch/replace)   (pure function)          │
                                                                         ▼
                        user edits (type / drag / select)  ──▶  same reconciler
```

调和器是一个单一的纯函数——每次更改(流出令牌,用户编辑,新版本)都会经过它,因此状态保持可预见和可审计性. 铸币师只看过和解的文物.

## 警卫

代理输出和导入文件被视为不可信 :

-   HTML 在 iframe 中制作 `sandbox="allow-scripts"` 财务报告和审定财务报表 **没有** `allow-same-origin` —— 无效来源, 无法进入您的应用程序的 DOM, cookie, 或存储( Claude Artifacts 模型) .
-   PDF 导出在 **脚本已损坏** 沙盒化的 iframe, 这样导出一个恶意的页面 无法运行您来源的任何东西 .
-   被导入的Markdown不通过原始的HTML.

### 扶养咨询

`pnpm audit` 财务报告和审定财务报表 `npm audit` 报告不违反此套件。 有两个 依赖性仍然可以解决带有咨询意见的旧的中转包,以及 既不发表任何内容,也不发表任何内容 **** 应用程序—— a lockfile 覆盖仅适用于宣布它的项目, 绝不适用于一个 您安装的库.

npm/ 线条 :

```json
"overrides": {
  "uuid": "14.0.1",
  "brace-expansion": "^2.1.4",
  "@ungap/structured-clone": "1.3.0"
}
```

时间 :

```json
"pnpm": { "overrides": {
  "uuid@<14.0.1": "14.0.1",
  "brace-expansion@<1.1.17": "^1.1.17",
  "brace-expansion@>=2.0.0 <2.1.4": "^2.1.4",
  "@ungap/structured-clone": "1.3.0"
} }
```

`uuid` 从v12起,只有无害环境管理 `@fortune-sheet/core` 还没到 通过一个普通JS条目。 节点解决这一点 `require(esm)`, (中文(简体) ), 着陆在 **20.19 联合国**如此倾注 `uuid` 过了 v11 升起这个软件包的地板 因此 `engines` 字段。 Bundlers 接受无害环境管理条目 不受影响;是平地 `node` 这需要更新运行时间。 在节点20.18 网格完全无法加载,所以地板不是建议.

有了这些 `npm audit` 财务报告和审定财务报表 `pnpm audit` 两人都没有新消息 安装此软件包。 此寄存器所运行的相同覆被 锁定文件,对它的测试套房.

咨询素材不同意,私人可以标出公共素材的版本 (笑声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) 以上版本为: 是这个仓库测试的对象.

`@ungap/structured-clone` 无法被删除.. `react-markdown` 到达它穿过 `mdast-util-to-hast`,其目前的释放仍然取决于它。 没错 **公务员制度委员会** 财务报告和审定财务报表 上面的条目将准确版本刻入 ưμ㼯A 标记下, GFM 表格和链接全部 用来对付被钉住的.

## 许可证

麻省理工学院

## 常见问题

### @braincrew-lab/langchain-canvas 是什么？

LangChain代理的活画布——流文件,图表,和丰富的文物入围回放面板\.

### 如何安装 @braincrew-lab/langchain-canvas？

在项目目录运行 npm install @braincrew-lab/langchain-canvas，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18 \|\| ^19）、react-dom（^18 \|\| ^19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @braincrew-lab/langchain-canvas 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @braincrew-lab/langchain-canvas 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @braincrew-lab/langchain-canvas 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.19。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @braincrew-lab/langchain-canvas 可以商用吗？

@braincrew-lab/langchain-canvas 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @braincrew-lab/langchain-canvas 的下载量有多少？

根据 npm 官方下载统计，@braincrew-lab/langchain-canvas 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,397 次，日均约 113 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @braincrew-lab/langchain-canvas 还在维护吗？

最新版本 0\.7\.57 发布于 2026/11/08（今天）；至今共发布 64 个版本，其中过去 12 个月发布了 64 个；首次发布于 2026/07/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。