Docs MCP Server

将网页选中区域以 HTML 快照方式捕获，保留渲染后的 DOM 结构与内联样式，并通过 MCP 服务供 AI 智能体读取。

开源地址：https://github.com/jsCanvas/docs-mcp-server

演示

使用 — 选中并捕获

在飞书文档中拖选内容（含代码块），点击 Chrome 扩展一键捕获为 HTML 快照。

效果 — 智能体精准读取

将 content id 粘贴给 Cursor / Claude，智能体通过 MCP 读取完整快照并理解文档内容。

使用 docs-mcp-server 获取内容，内容id为： docs-mcp-server content id:
a4900368-a8bd-49d1-a211-06e0b392505b
@http://127.0.0.1:3847/api/snapshots/a4900368-a8bd-49d1-a211-06e0b392505b.html

方案调研结论：可行

能力	可行性	说明
保留 DOM 结构	✅ 完全可行	克隆选区 DOM 树，独立 HTML 文件可离线打开
内联样式	✅ 完全可行	将 getComputedStyle() 转为 inline style，还原视觉布局
代码块	✅ 可行	飞书代码块是 DOM 渲染，样式可内联保留
SVG 流程图	✅ 可行	直接序列化 SVG 节点
Canvas 图表	✅ 基本可行	转为 PNG data URL 嵌入
图片	⚠️ 部分可行	同源图片可 base64 内嵌；跨域图片保留绝对 URL（需网络访问）
Web 字体	⚠️ 部分可行	离线打开可能 fallback 到系统字体，不影响文字内容
iframe 嵌入内容	❌ 不可行	跨文档内容无法捕获
Shadow DOM	⚠️ 有限	开放 shadow root 可遍历，closed shadow 无法访问

结论：对于飞书文档这类 DOM 渲染的富文本（标题、段落、代码块、图片、SVG 流程图），HTML 快照方案比纯文本提取更可靠，推荐采用。

架构

选中区域 → clone DOM + 内联 computed styles + 图片/Canvas 处理
         → 完整 HTML 文件 → data/snapshots/{id}.html
         → MCP Resource: docs://snapshot/{id}
         → MCP Tool: get_snapshot_html

快速开始

cd docs-mcp-server
npm install
npm run build
npm run server          # HTTP API :3847
# MCP 由 Cursor 通过 stdio 启动

Chrome 扩展

1. chrome://extensions/ → 开发者模式 → 加载 extension/ 目录
2. 在页面先选中内容，再打开弹窗点击「捕获当前选区」
3. 或使用右键 → Capture selection to MCP

Cursor MCP 配置

{
  "mcpServers": {
    "docs-mcp-server": {
      "command": "node",
      "args": ["/Users/bryan.ren/faco/office/docs-mcp-server/dist/server/mcp.js"],
      "env": {
        "DOCS_MCP_DATA_DIR": "/Users/bryan.ren/faco/office/docs-mcp-server/data"
      }
    }
  }
}

重要：HTTP 服务与 MCP 必须指向同一 data/ 目录。若 MCP 报 Document not found，请确认 env.DOCS_MCP_DATA_DIR 已配置，并在 Cursor 中重启 MCP 服务。

MCP 能力

类型	名称	说明
Resource	docs://index	文档索引
Resource	docs://document/{id}	元数据 + 文本预览
Resource	docs://snapshot/{id}	完整 HTML 快照
Tool	list_documents	列出所有快照
Tool	get_snapshot_html	获取完整 HTML 内容
Tool	get_document	获取元数据
Tool	search_documents	关键词搜索

智能体推荐用法

1. list_documents          → 找到目标文档 ID
2. get_snapshot_html(id)   → 读取完整 HTML（含样式、代码块、图片）
   或 Fetch Resource docs://snapshot/{id}

捕获内容说明

每次捕获生成一个自包含 HTML 文件：

• 选区 DOM 完整克隆
• 所有可见样式内联化（getComputedStyle → style=""）
• 图片：尽量 base64 内嵌，跨域则保留原始 URL
• Canvas：转为 PNG 嵌入
• SVG：保留原始 markup
• 移除 script / 事件处理器

文件保存在 data/snapshots/{id}.html，也可通过 HTTP 预览：

http://127.0.0.1:3847/api/snapshots/{id}.html

HTTP API

Method	Path	说明
GET	/api/health	健康检查
POST	/api/documents	上传 HTML 快照
GET	/api/documents	列出文档
GET	/api/documents/:id	文档元数据
GET	/api/snapshots/:id.html	下载 HTML 快照
DELETE	/api/documents/:id	删除文档及快照

开发

npm run dev:server
npm run dev:mcp
npm run build

环境变量

变量	默认值	说明
DOCS_MCP_PORT	3847	HTTP API 端口

产品演示幻灯片

HTML 演示文稿见 ppt/index.html。

cd docs-mcp-server
python3 -m http.server 8765
open http://127.0.0.1:8765/ppt/index.html