@braincrew-lab/朗链-canvas

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

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

读取

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

安装

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。 。 。 .

上马

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

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导航,复制动作和数字范围摘要不包括公式缓存. 查看器控件跟随主机主题,从不写入原始文档.

<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 以添加或覆盖一个类型是如何构成的.

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} />

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

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

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

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/ 线条 :

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

时间 :

"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 表格和链接全部 用来对付被钉住的.

许可证

麻省理工学院