Math board

math-board

浏览器中的一块黑色黑板，终端辅导老师会在上面作图讲解，就像教授在黑板前授课。对话始终留在终端中。黑板仅供查看：模型通过工具一步步展示方程、图表、分子、示意图和科学插图，我可以观看、回看课程、平移和缩放。我从不在上面作画，作画的是模型。（页面上只有两个按钮能更改内容：确认后清空黑板的 Clear，以及 Save。）

我学习物理、MRI 物理（k 空间、自旋和信号）、神经科学、化学和医学相关的生物学。我用终端编码 Agent pi 自学，运行的是 Eero Alvar 的 learn 配置：以问题为基础，一次学习一个概念。终端辅导老师没有视觉通道，而我学的大多数内容都需要配图，所以我做了这个工具。它在本地运行且免费（无需云服务或额外的 API 密钥）。它是一个独立扩展，因此 Eero 的工具仍保持原样。同一套工具也可以作为 MCP 服务运行，让 Claude Code 在同类黑板上进行教学。在开发前后，我检查了约 100 个现有工具（调查）；没有一个能同时做到仅供查看、本地运行、按课程组织内容并由 Agent 驱动。

为 pi 安装

你需要 pi 和 Node 22.19 或更高版本。我在 macOS 上使用，Linux 也可以。在 Windows 上黑板可以运行，但不会自动为你打开浏览器，因此请自行打开 /board 提供的 URL。

从 npm 安装，发布后：

pi install npm:pi-math-board

从代码检出目录安装，这是我的运行方式：

git clone https://github.com/smdesai27/math-board ~/math-board
cd ~/math-board && npm ci
pi install ~/math-board

pi 会就地加载本地包，不会复制它，因此实际运行的是代码检出目录。它不会安装本地包的依赖，所以要先运行 npm ci。然后在 pi 中运行 /reload，或重启 pi。

请先了解以下两点：

• 每次更新后的布局检查、board_snapshot 和 /board export 生成的 PNG 都需要无头 Chromium：可以使用 Playwright 自带的版本或系统 Chrome。若使用 Playwright 自带的版本，请运行 npx -y [email protected] install chromium 安装此包所需的版本（错误消息会给出确切命令）。没有 Chromium 时，黑板仍可正常使用，但这些功能会说明无法运行的原因。Chromium 会使用其操作系统沙箱；在沙箱无法启动的环境（某些 Linux 容器）中，它会在不启用沙箱的情况下运行，结果中也会注明这一点。
• 黑板的存放位置：代码检出目录会将黑板保存在代码旁边的 .data/ 中（已加入 git 忽略列表）。通过 npm 或 pi 的 git 安装方式安装的副本会在更新时被替换或清理，因此会改为保存在每位用户自己的文件夹中：macOS 上为 ~/Library/Application Support/math-board，Linux 上为 $XDG_STATE_HOME/math-board（通常是 ~/.local/state/math-board），Windows 上为 %LOCALAPPDATA%\math-board。MATH_BOARD_DATA_DIR 可以覆盖这两种设置（旧名称 PI_MATH_BOARD_DATA_DIR 仍然有效）。/board status 会显示当前使用的文件夹。

在 pi 中使用

让辅导老师“在黑板上”讲解某个内容。或者：

/board                 open the board in your browser (also /board open)
/board status          server URL, revision, data folder, viewers, autosave problems
/board save <name>     named snapshot (several words become one name: my lesson -> my-lesson)
/board load <name>     restore it
/board export [name]   write the lesson to ./viz/: board.json, PNGs, lesson.md
/board clear           clear everything (or /board clear equations|scene)
/board stop            stop the server

服务会在首次使用时启动，并且只监听 127.0.0.1。URL 中包含私密的 #token=…，请勿分享。运行 /reload 或 /board stop 后，同一 pi 会话中的下一个黑板会复用原来的端口和令牌，因此仍开着的标签页会自动重新连接。如果服务彻底关闭，页面会在约 10 秒后提示服务已关闭，并在后台继续尝试连接。

在 Claude Code 和其他 MCP 客户端中使用

这些工具也可作为 stdio MCP 服务运行，入口为 mcp/server.mjs。pi 扩展（index.ts）和 MCP 服务都是基于同一实现 tools.mjs 的轻量适配器，因此无论通过哪种方式，大模型获得的工具名称、描述、架构和结果都相同；board_teaching 的教学节奏（阅读、绘制一个步骤、提出一个检查问题）也是服务的指令。无论由哪个 Agent 教学，学习工作流都相同。

只需注册一次，即可在 Claude Code 中使用：

claude mcp add math-board -- npx -y pi-math-board              # from npm, once published
claude mcp add math-board -- node ~/math-board/mcp/server.mjs  # from a checkout, after npm ci

这会将它注册到你运行命令时所在的文件夹（作用域为 local）。我会在自己的学习文件夹中运行它，因此画板及其说明只存在于该文件夹中，就像 pi 的 board_teaching 一样；如需用于每个项目，请添加 --scope user。claude mcp list 应显示 ✔ Connected；修改代码后，在 Claude Code 中运行 /mcp 即可重新连接。在 pi 中，请使用扩展，而不是运行 pi mcp add：两者同时使用会得到两个独立的画板。

其他 MCP 客户端将同一命令作为 stdio 服务使用：

{
  "mcpServers": {
    "math-board": {
      "command": "npx",
      "args": ["-y", "pi-math-board"]
    }
  }
}

对于本地检出，请使用 "command": "node" 和 "args": ["/absolute/path/to/math-board/mcp/server.mjs"]。

• 工具：模型工具中列出的七个工具。从一开始就会列出全部七个工具（MCP 不像 pi 那样支持延迟激活）；大模型会调用 board_open 来显示画板。board_snapshot 会以 MCP 图像块的形式返回 PNG，随后附上文字摘要。
• 浏览器：除非已有浏览器显示画板，否则 board_open 会在默认浏览器中打开画板。只有无法打开浏览器时，URL（含令牌）才会进入大模型的上下文；随后大模型会将其传给你。设置 MATH_BOARD_NO_BROWSER=1 后，不会打开浏览器，并且始终返回 URL：claude mcp add math-board -e MATH_BOARD_NO_BROWSER=1 -- npx -y pi-math-board。
• 独立画板：使用相同的工具，但画板彼此独立。MCP 服务会托管自己的画板服务，该服务在首次调用需要它的工具时启动，监听 127.0.0.1 并使用自己的令牌；保存文件位于数据文件夹的 mcp/ 子文件夹中（参见为 pi 安装），与 pi 的保存文件分开，因此两者的自动保存文件不会相互覆盖。MATH_BOARD_DATA_DIR 可覆盖此目录；如果在两边都设置了它，请分别指定各自的目录。要在另一个 Agent 中继续课程，请复制 saves/<name>.json，再使用 board_save 加载。
• 生命周期和隐私：stdout 仅传输 JSON-RPC（诊断信息发送到 stderr），除回环地址外没有任何地址处于监听状态，也不会收集遥测数据。客户端断开连接，或收到 SIGINT、SIGTERM 或 SIGHUP 时，服务会刷新自动保存文件、关闭无头浏览器并退出。/board 和 /board export 是 pi 命令；MCP 服务没有对应命令。

导师可以绘制什么

• 数学：KaTeX 方程（\color、\boxed、\cancel 等）以及使用 \ce{…} 的化学公式（mhchem）。
• 图表：函数图像、参数曲线、阴影区域、点、渐近线。表达式会交由一个小型解析器处理，绝不会使用 eval。
• 分子：由 SMILES 字符串生成的二维结构（SmilesDrawer）。
• 科学插图：约 2,000 个可离线使用的 Bioicons（解剖结构、器官、细胞、细胞器、血液与免疫学、微生物、病毒、DNA、植物、动物、实验室设备），支持按关键词搜索。
• 图示：手写 SVG（标记、渐变、符号、CSS、SMIL 动画）和 Mermaid（流程图、时序图、类图、状态图、ER 图、甘特图、思维导图、图形；自动布局）。
• 标记：线条、箭头、曲线、矩形、椭圆和文本（默认使用类似 LaTeX 的衬线字体）。

不只是数学

名字里有数学，但白板并不知道自己在教什么。它可以展示方程、绘图、分子、插图、图表和文本，而大多数学科都需要混合使用其中几种。不同学科的呈现方式如下：

• 物理和数学：每步推导单独占一行，函数图和参数图，以及用 SVG 绘制的受力图和矢量图。
• 化学：根据 SMILES 绘制二维结构，用 \ce{…} 表示反应和化学平衡。
• 生物学和医学：使用离线图库中的解剖图、器官和细胞插图，将通路和作用机制绘制成流程图。
• 计算机科学：用流程图表示算法，绘制状态机和复杂度图，以及时序图和类图。
• 历史和人文学科：时间线、因果关系思维导图，以及由方框和箭头构成的论证图。
• 语言：将语法树绘制成 Mermaid 图。

示例课程中的三个章节（node scripts/demo-lessons.mjs <out-dir> 会渲染全部五个章节）：

化学：从水杨酸到阿司匹林，两者均根据 SMILES 绘制，反应则用 \ce{…} 表示。

计算机科学：用流程图表示二分查找，并展示使用和不使用二分查找时进行 n 次查找的代价。

历史：由矩形、文本和箭头构成的论证图。

课程是如何构建的

• 坐标：每个章节和主页画布都是一个 1200×800 的空间，原点位于左上角。文本的 y 是基线；公式的 x,y 是其边界框的左上角；矩形、椭圆和图形的 x,y 是其左上角。
• 章节：在无限画布上从左向右排列的命名 1200×800 区域（未指定 x 的章节会放在最右侧章节的右边；指定了 x 或 y 的坐标则保持不变）。带有 chapter: id 的项目使用章节局部坐标，因此移动章节时其内容也会随之移动。重叠的章节会被报告。删除章节会清除其中的项目，除非设置了 keepItems。
• 未指定 x,y 的公式会沿其所属章节的左侧向下排列（x 为 88，间距为 115 px），且位置会被保存，因此其他内容发生变化时它们不会移动。
• 摄像机：camera: {chapter}（或画布矩形，或表示主页的 null）会平滑平移和缩放，让每位后续观看者都能跟随导师的授课位置。
• 步骤：每个添加项目的 board_update 都是一个课程步骤。新步骤会实时绘制：图表滑入画面，笔画像手写一样描出，绘图先画坐标轴再画曲线，文本和公式从左向右书写。项目可以设置 step、reveal（draw、write、wipe、fade、none）、duration 和 order。强调效果使用相同的机制：设置 reveal: "draw" 的椭圆会圈出某个术语，设置 reveal: "wipe" 的半透明矩形会将其高亮显示。
• 图层：z 用于排列所有类型项目的层级。还支持 opacity、dash、fill、文本 font（serif、sans、mono）、anchor、bold、italic 和多行文本。

导师写入 scene.artifacts 的图形如下所示：

{ "type": "svg", "source": "<svg viewBox=…>…</svg>", "x": 40, "y": 90, "width": 680, "height": 520 }
{ "type": "mermaid", "source": "graph LR\n  A[Input] --> B(Process) --> C[Output]", "x": 620, "y": 120, "width": 420, "height": 200 }
{ "type": "plot", "x": 40, "y": 40, "width": 560, "height": 360, "xRange": [-6.3, 6.3],
  "functions": [{ "expr": "sin(x)", "label": "sin x" }, { "expr": "x^2/8 - 1", "dash": "7 5" }],
  "areas": [{ "expr": "sin(x)", "from": 0, "to": 3.14159 }], "points": [{ "x": 0, "y": 0, "label": "O" }],
  "parametric": [{ "x": "cos(t)", "y": "sin(t)", "t": [0, 6.283] }], "vlines": [{ "x": 3.14159 }],
  "xLabel": "x", "yLabel": "y", "equalAspect": false }
{ "type": "molecule", "smiles": "CC(=O)Oc1ccccc1C(=O)O", "x": 640, "y": 40, "width": 260, "height": 200 }
{ "type": "icon", "icon": "heart-cross-section-2", "x": 700, "y": 100, "width": 220, "card": true }

所有图形都支持 chapter、z、opacity、label、step、reveal、duration 和 order。card: true 会在插图下方添加柔和的浅色面板，适用于在白纸上绘制的图形。绘图表达式支持 + - * / ^、隐式乘法（2x、3(x+1)）、pi、e、tau 以及 sin cos tan asin acos atan sinh cosh tanh asinh acosh atanh sec csc cot exp ln log log2 log10 sqrt cbrt abs sign floor ceil round min max pow atan2 hypot mod step sinc gauss。board_docs 会向模型提供完整参考文档，并为每种格式提供一个示例。

构建实际课程后设置的渲染默认值：Mermaid 使用粉笔主题（衬线字体、带粉笔轮廓和边线的深色节点，以及不透明的标签背景，避免边线穿过标签）；布局检查会在图表缩小到文字低于约 12 px 时发出警告，并提示所需尺寸。绘图会在曲线上方显示刻度、坐标轴、曲线和标记标签（vlines 和 hlines 接受 label），并为其添加细黑色轮廓；y 轴标签位于绘图区域上方。分子图会根据所绘结构调整边框，使其填满边界框（缩放上限约为 2 倍）。缩小视图时，无论是在总览视图还是总览快照中，章节标题都会保持清晰易读。

查看器控制

操作	按键 / 鼠标
平移	滚动 / 双指滑动、拖动、Shift+方向键
以光标位置为中心缩放	⌘/Ctrl+滚动、捏合、+ / -
向后 / 向前浏览课程步骤	← / →
重播当前视图中的章节	r（或 Replay）
从当前步骤继续播放 / 暂停	Space
返回实时进度（最新步骤）	End
上一个 / 下一个章节	[ / ]、PageUp / PageDown
整节课程	o（Overview）
再次跟随导师的摄像机	f、双击、0（Follow）
指示导师查看某个项目	悬停时显示 step n · id · chapter；点击会复制 step n, id (chapter c)，以便粘贴到终端中

悬停时，控制项和 step n / N 指示器会显示在右上角。手动平移会暂停摄像机跟随，直到按下 Follow。

模型工具

工具	用途
board_open	打开画板：启动服务并打开浏览器；只有在无法打开浏览器时才返回 URL。可以安全地重复调用。在 pi 中，它只会在交互模式下打开浏览器，并启用其他画板工具，这些工具在此之前处于未激活状态：未使用的画板每轮会占用模型 255 个字符（仅 board_open），而不是全部七个工具的 12,197 个字符。/board open 和 /board load 也会启用这些工具。
board_read	读取一个章节的修订版本、标题、章节目录、摄像机、步骤和布局（id、类型、位置、尺寸）（一次读取一个章节；使用 chapter 参数；默认值为摄像机所在章节；未知章节会报错）。更新前请先读取。
board_update	比较并交换更新（baseRevision）：chapters、equations（添加、更新、删除）、scene（shapes、artifacts；追加或替换）、items（按 id 更新、移动或删除任何项目）、camera、title、clear。不符合要求的输入（未知或拼写错误的字段、以字符串形式提供的数字、空文本、超过 64 个字符的 id，或被其他项目使用的 id）会被拒绝并说明原因，且不会应用任何更改。每次更新后都会测量渲染后的布局，并报告文本和方程式重叠、素材重叠、项目溢出章节以及素材渲染失败的问题；优先报告本次更新的问题。
board_snapshot	以查看者视角呈现的画板 PNG（默认显示摄像机所见内容；也可指定 chapter、overview、region、width），并附带每个项目测得的边界框和布局警告。使用 Playwright 的 Chromium 或系统 Chrome；无头页面在闲置 5 分钟后关闭。
board_library	按关键词或类别搜索离线插图库；返回图标 id。
board_save	对命名快照执行 save、list 或 load（load 需要 baseRevision）。
board_docs	按 topic 获取参考文本（overview、workflow、chapters、equations、marks、plot、svg、mermaid、molecule、icon、animation、layout、saves）：素材格式及示例、SVG 规则、绘图表达式语法、显示和动画选项、章节与摄像机、布局约定、保存内容。

在我的学习文件夹（~/Learn，或 MATH_BOARD_LEARN_DIR 指向的位置）中，且不在子 Agent 中（即未设置 PI_SUBAGENT_NAME 的环境），pi 扩展会在系统提示词中添加一个简短且固定的 board_teaching 部分：何时绘图、每次讲解一个步骤并提一个检查问题、每章讲解一个概念，以及如何通过阅读画板来解析“step 4, eq2”之类的引用。MATH_BOARD_TEACHING=always 会在所有环境中添加该部分；never 则不会在任何环境中添加。无人查看时，读取、更新和加载的结果末尾会显示“No browser is showing the board”，以便导师知道需要调用 board_open。

保存和导出

• 自动保存：每次更改都会以防抖和原子方式写入数据文件夹中的 autosave.json，并保留三个较早的副本（autosave.1.json 是最新的）。新启动的画布服务会在启动时恢复该文件，因此执行 /reload 或重启 pi 后，画布仍会保留。如果写入失败（例如文件夹不可写），下一条工具结果和 /board status 都会说明原因。无法恢复的自动保存文件会被移至一旁，命名为 autosave.corrupt-<time>.json，并报告相关情况，绝不会被覆盖。同一数据文件夹中的两个画布仍可正常运行，但各自都会警告对方，因为最后一次更改会决定自动保存文件的内容。
• 命名快照：/board save <name>、board_save 或“保存”按钮会写入 saves/<name>.json。加载时会重新验证所有内容；无法使用的项目会被跳过，而不会导致加载失败，结果中会列出跳过的内容。保存文件包含格式版本；如果文件来自较新版本，则会拒绝加载，避免错误解读。
• 导出：/board export [name] 会将当前运行的画布写入 pi 当前文件夹中的 viz/board-<name>-<YYYYMMDD-HHMM>/，如有重名则依次添加 -2、-3 等，而不会覆盖已有内容。文件夹中包含：board.json（命名快照格式：将其复制到数据文件夹中的 saves/<name>.json，再执行 /board load <name> 即可打开）、每个章节对应的 chapter-<id>.png（1600 px，渲染方式与 board_snapshot 相同）、画布主页中位于各章节之外的项目对应的 home.png（除非某个章节覆盖了画布主页）、区域数多于一个时生成的 overview.png，以及 lesson.md，其中包含标准 Markdown 图片链接，Obsidian 和 GitHub 都可以显示。文件仅对你可见（文件夹权限为 0700，文件权限为 0600，与保存文件相同）；如果 viz 是符号链接，则会拒绝跟随。导出只能手动执行：仅当你输入命令时才会运行，不会在自动保存或关闭时运行，也不会通过模型工具运行，并且绝不会启动画布服务。如果没有无头浏览器，仍会写入 board.json 和 lesson.md，并说明缺少图像的原因。
• 数据文件夹：检出目录中的 .data/（已被 git 忽略，因此画布内容永远不会进入提交记录）、已安装副本对应的用户文件夹，或 MATH_BOARD_DATA_DIR（参见安装 pi）。MCP 服务使用自己的 mcp/ 子文件夹，因此它的画布与 pi 的画布不会共用自动保存文件。测试和脚本始终使用临时文件夹，因此绝不会触碰真实保存文件。
• 限制：最多 200 个章节、1,000 个方程、总计 5,000 个形状和工件；每次更新最多 2,000 个形状和 100 个工件；每个画布最多 6 MiB，每个 SVG 最多 128 KiB。

安全

简而言之。SECURITY.md 介绍了威胁模型、不在范围内的事项，以及如何报告问题。

• 仅限环回的服务，每个会话使用随机 bearer token，精确检查 Host 和 Origin，限制请求正文大小，使用比较并交换修订版本，原子保存。
• 页面为只读：无人能在上面绘图。页面仅有两种写入操作：Clear 按钮（如果此间画板已更改，会再次询问）和 Save；页面执行的任何操作都不会启动模型轮次。
• 只有在无法打开浏览器时，URL 中的 token 才会传给模型；否则，工具结果只会显示 127.0.0.1:<port>。
• KaTeX 使用 trust: false、严格模式和扩展限制进行渲染。标签和文本会作为文本插入，绝不会作为 HTML 插入。
• SVG、Mermaid、分子结构和图标都会在验证后通过 <image> 显示（图像上下文：无脚本、无外部加载）。Mermaid 使用 securityLevel: "strict" 运行，并拒绝链接、回调、嵌入式标记和 %%{init}%% 指令。SMILES 字符串仅允许使用 SMILES 字符。绘图表达式由小型解析器（shared/expr.mjs）编译，该解析器只支持算术运算、固定的函数表和绘图变量。
• SVG 使用严格的 XML 解析器（@rgrove/parse-xml）解析，在解析后的树上进行检查，并根据该树重新写出，因此存储的内容与检查过的内容完全一致。允许使用形状、line、text/tspan/textPath、defs/symbol/use、标记、渐变、图案、裁剪路径、蒙版、<style> 块和 SMIL 动画。拒绝：格式不正确的 XML（附带解析器提供的消息）、DOCTYPE、CDATA、处理指令、脚本、foreignObject、image、事件属性、外部 URL、data: URI、其他命名空间、CSS 转义，以及除颜色、calc/var、变换、@keyframes、@media 和 url(#id) 之外的所有 CSS at-rule 和函数。url(…) 和 href 必须指向同一 SVG 中的 #id，并在解码字符引用后进行检查。缺少 xmlns 时会自动添加。错误会指出违规的元素、属性或结构。
• 布局检查和快照使用的无头 Chromium 会在操作系统沙箱中运行（仅在无法启动时才会回退到无沙箱运行，并说明原因）。
• 静态文件仅从 public/ 提供，依据文件扩展名选择，并进行严格的路径检查。图标会在构建时使用同一验证器进行清理。

构建与测试

cd ~/math-board
npm ci                      # includes pi 1.4.0 and TypeScript, for the type check and loader tests
npm run build               # bundle the browser app into public/, write mcp/schemas.json and THIRD_PARTY_NOTICES.md
npm run typecheck           # index.ts against pi's types
npm run build:icons         # (re)build the icon library (network)
npm test                    # unit, HTTP, hardening, validator and snapshotter tests, and the MCP server over stdio
npm run test:browser        # Playwright browser tests
npm run test:load           # real pi loader + /reload regression
node scripts/e2e-snapshot.mjs   # end to end: update, layout check, snapshot, /board export
node scripts/demo-lessons.mjs <out-dir> [physics|mri|chem|cs|history]   # visual QA on five sample lessons

• test:load、e2e-snapshot.mjs 和 demo-lessons.mjs 会通过 pi 的真实加载器加载扩展。如果设置了 PI_HOST_ROOT，则使用该目录（已安装的 @earendil-works/pi-coding-agent 软件包目录）；否则使用 npm ci 安装到 node_modules 中的 pi；再否则使用全局安装版本（npm root -g）。
• npm test 包含 test/mcp.test.mjs，它会在临时数据文件夹中通过 node mcp/server.mjs 启动服务，设置 MATH_BOARD_NO_BROWSER=1，并使用 MCP SDK 客户端驱动服务；如果没有可用的无头浏览器，则会跳过 board_snapshot 检查，并说明原因。
• 浏览器测试需要 Playwright 的 Chromium（npx playwright install chromium）。快照脚本会使用它或系统 Chrome，检查布局检查能否捕获重叠和超出画板的项目，以及修复后能否消除这些问题；除非指定路径，否则会将 PNG 写入临时文件夹，并导出到临时文件夹。demo-lessons.mjs 会写入每个章节、相机视图和概览在 1200 和 1600 px 下的版本，以及包含工具返回的所有布局警告的 warnings.json。
• CI（.github/workflows/ci.yml）会在 Node 22 上针对每次推送到 main 和每个针对 main 的拉取请求运行类型检查，重新构建并在 public/、mcp/schemas.json 或 THIRD_PARTY_NOTICES.md 与提交内容不同时失败，然后运行 npm test、test:browser、test:load（针对 pi 1.4.0）和端到端脚本。因此，修改 browser/ 或 tools.mjs 后，请运行 npm run build 并提交生成的文件。
• 开发期间：如果扩展文件在服务加载后发生变化，工具输出会发出警告；/reload 会载入服务端的更改（服务端代码通过版本查询参数导入）。该检查会比较修改时间，因此保留较早时间戳的副本（cp -p、rsync -a、某些同步工具）不会被检测到；使用这些工具后也要运行 /reload。
• 依赖项：运行时只有三个固定版本的依赖：官方 MCP TypeScript SDK 当前稳定的主版本 v2，发布为 @modelcontextprotocol/server（@modelcontextprotocol/sdk 属于 v1 维护分支）；用于无头页面的 playwright-core；以及用于 SVG 检查的 @rgrove/parse-xml。React、KaTeX、Mermaid 和 SmilesDrawer 会在构建时打包进 public/，因此它们属于 devDependencies。MCP 服务从 mcp/schemas.json 读取工具架构；构建过程会使用 TypeBox 从 tools.mjs 生成该文件。pi 会使用自己的 TypeBox 构建相同的架构，测试会检查二者是否一致。测试使用 @modelcontextprotocol/client。

图标库由 npm run build:icons 构建：该命令会下载 Bioicons，保留不超过 128 KiB、采用 CC0、CC-BY 3.0/4.0、MIT 和 BSD 许可的图标，内联其 CSS，剥离编辑器元数据、滤镜、栅格图像和外部引用，并使用画板的 SVG 验证器逐个验证。

鸣谢

• Eero Alvar 的 learn：本画板旨在与之配套使用的教学设置。基于问题，一次讲解一个概念。
• pi，本项目扩展的终端 Agent。
• 插图来自 Bioicons。每个图标均保留其自身许可（CC0、CC-BY 3.0、CC-BY 4.0 或 MIT），每个图标的作者和许可均列于 public/icons/CREDITS.md。如果发布使用了 CC-BY 图标的材料，必须注明其作者。
• KaTeX、Mermaid、SmilesDrawer 和 React，均打包进页面。

关于为何采用这种构建方式，以及仍待解决的事项（公式变换、布局地图、向量、测验镜像），请参阅 docs/design.md。关于先前相关工作的研究笔记（tldraw 的 Agent 工具包、TheoremExplainAgent、Code2Video、HeyTutor、Manim 风格的时间线等），请参阅 docs/prior-art.md。

许可证

MIT，详见 LICENSE。捆绑的库和图标保留各自的许可证：THIRD_PARTY_NOTICES.md 中包含完整文本（由构建流程从捆绑内容生成），public/icons/CREDITS.md 中列出了每个图标的作者和许可证。