Fast Html Mcp

OpenTalk2HTML-NotMD MCP 服务

AI 通过精美页面与您交流，而不是让人应接不暇的 Markdown 长文。

OpenTalk2HTML-NotMD 是一个 MCP 服务，可改变 AI Agent 与您的沟通方式。AI 不再用难以阅读的原始 Markdown 文件让您眼花缭乱，而是构建清晰、有条理的 HTML 页面——报告、仪表板、落地页、发票等各种内容，即刻呈现，无需浏览器。

---

愿景

AI 与人沟通的方式，应当像人与人沟通一样：通过设计精良的页面，而不是原始文本文件。

每当 AI Agent 把 Markdown 一股脑丢给您，它选择的都是对机器最简单的方式，而不是对您最好的方式。OpenTalk2HTML-NotMD 正是为改变这一现状而生。它为 AI Agent 提供了一个工具，用来创建规范、结构清晰、精美的 HTML 页面，让您真正能够阅读、浏览和分享。

一条命令。支持任意 AI 平台。呈现真实页面。

npx -y @aimino/fast-html-mcp-server

---

问题 → 解决方案

🚫 您只能面对这些	✅ 您将获得这些
难以浏览的原始 Markdown 长文	带有导航和分区的清晰 HTML 页面
到处都是 ## Headings 和 - bullets	样式精美的报告、仪表板和数据表格
滚动 20 分钟，只为找到一个数字	在不同分区间跳转，只读重要内容
一个再也不会打开的超大文件	您真正愿意分享的精美页面
AI 选择对自己来说简单的做法	AI 为 您 构建真正有用的内容

---

实际效果

AI 能在几秒钟内构建真正的仪表板页面——无需浏览器、Playwright 或 Docker。

---

快速开始

npx -y @aimino/fast-html-mcp-server

添加到 Claude Desktop、Cursor、VS Code 或任意 MCP 客户端：

{
  "mcpServers": {
    "open-talk-2-html-not-md": {
      "command": "npx",
      "args": ["-y", "@aimino/fast-html-mcp-server"]
    }
  }
}

就这么简单。 您的 AI Agent 现在会通过页面与您交流。

---

效果如何？

使用 OpenTalk2HTML-NotMD 的 AI Agent 可以为您构建：

您的需求……	而不是 Markdown	AI 创建的内容
“展示第三季度数据”	## Q3\n- Revenue: $1.2M\n- Users: 45K	带表格和徽章的精美报告
“制作一张发票”	# Invoice\n**Client:** Acme Corp	规范的发票页面
“来一份仪表板”	## Metrics\n**ARR:** $10M	带有可视化图表的分析仪表板
“为投资者制作路演演示文稿”	带 --- 分隔幻灯片的原始文本	设计精美的幻灯片
“API 文档”	含 ``` 代码块的 Markdown	规范的 API 文档页面

在互动展示中查看 22+ 种使用场景。

---

工作原理

OpenTalk2HTML-NotMD 是一款专为 AI 与人类沟通打造的五层 MCP 服务：

OpenTalk2HTML-NotMD MCP Server
├── Assembly   → render_page (compose pages from components)
├── Patch      → patch_html, set_attribute, edit_html_range (make surgical edits)
├── Read       → read_html (inspect with 97% token savings)
├── Raw        → write_raw_html, format_html, preview_html
├── Email      → render_email, html_to_email (send to inbox)
└── Consistency→ propagate_edit, check_consistency (keep data in sync)

AI 构建、编辑、阅读并优化 HTML 页面——就像你编辑文档一样，只不过整个过程在毫秒内完成，成本仅需几分钱。

---

为什么需要它

Markdown 陷阱

AI Agent 默认使用 Markdown，因为它是最简单的输出格式。但 Markdown 是为轻量级文本排版设计的，并不适合向人类传达复杂的 AI 输出。因此：

• 用户被淹没在大片原始文本中
• 没有结构——所有内容都平铺呈现，无法快速浏览
• 没有视觉元素——表格、图表和徽章最多只能用 ASCII 字符表示
• 无法分享——你不能把 Markdown 文件发给同事

HTML 方案

HTML 解决了以上所有问题：结构、导航、样式、视觉元素和分享功能一应俱全，服务端无需浏览器。AI 创建的是真正的页面，人们可以轻松阅读和使用。

**OpenTalk2HTML-NotMD 填补了这一空白：**AI 使用 HTML 而非 Markdown 编写内容，让你获得可阅读、可浏览、可分享的页面。

---

工具

层级	工具	功能
组装	render_page	使用组件和模板组合页面
组装	register_template	在运行时添加自己的模板
补丁	patch_html	按 CSS 选择器替换内容
补丁	set_attribute	按 CSS 选择器更改属性
补丁	edit_html_range	替换行（最节省令牌的编辑方式）
读取	read_html	以 4 种模式检查 HTML（节省 97% 的令牌）
原始	write_raw_html	将原始 HTML 写入文件
原始	format_html	美化 HTML
原始	preview_html	预览内容，不写入磁盘
电子邮件	render_email	构建适用于电子邮件的 HTML
电子邮件	html_to_email	将网页 HTML 转换为适用于电子邮件的 HTML
一致性	propagate_edit	更新所有交叉引用
一致性	check_consistency	检查是否存在过时引用
实用工具	list_components	浏览可用组件
实用工具	list_templates	浏览可用模板
实用工具	get_template_schema	查看模板变量
实用工具	get_component_schema	查看组件属性

---

组件与模板

22 个组件

布局：header、footer、sidebar、card-deck、grid 数据：data-table、stats-grid、timeline、financial-table、evidence-grid 可视化：risk-matrix、valuation-chart、prisma-flow 媒体：figure、image-gallery 交互：tabs、accordion 实用工具：hero、callout、code-block、citation-block

25 个以上模板

报告：report、exploration、research、code-review、equity-research、lit-review、research-briefing、scientific-paper、journal-club、earnings-summary、industry-overview

商务：invoice、budget、financial-summary、data-sheet、dashboard、financial-dashboard

沟通：newsletter、changelog、faq、meeting-notes、comparison、landing-page、error-page

演示：pitch-deck、deck、design、prototyping、illustrations

开发者：api-doc、custom-editor、minimal、documentation

---

性能基准

操作	OpenTalk2HTML-NotMD	替代方案
冷启动 → 首次渲染	~1.5s	Playwright/Puppeteer：5-15s
页面渲染	~900ms	Handlebars：相近
按 #id 修补	~200ms	Cheerio：2-5s
按 CSS 选择器修补	~800ms	Regex：1-3s
顺序执行 5 次修补	总计 ~2s	重新解析：10s+
压缩率	40-70%	html-minifier：10-30%
AI 压缩读取（106KB 页面）	~1,000 个 token（节省 97%）	原始：30,553 个 token

为什么这么快？

1. #id 快速路径 — 直接替换文本，而不是完整解析 AST（快约 10 倍）
2. 预编译的 doT.js — 模板在启动时编译，而非渲染时编译
3. 无需浏览器运行时 — 基于字符串和 AST 操作，完全没有无头浏览器开销

---

架构

Ping-Pong 循环

1. Discover   → list templates & components
2. Build      → render a page
3. Inspect    → read it back (97% token savings)
4. Refine     → patch, edit, set attributes
5. Consistency→ propagate edits across sections

关键设计决策

• doT.js — 编译速度比 Handlebars/EJS 快 10 倍
• #id 快速路径 — 对目标为 id 的编辑直接进行字符串替换
• parse5 — 基于 AST 安全修补 HTML（而非使用正则表达式）
• DOMPurify — 防止所有输出中的 XSS
• 原子写入 — 临时文件 + 重命名，防止文件损坏
• ESM — Node.js 20+、TypeScript、ES 模块

---

Token 效率（AI Agent 为何喜爱它）

从设计之初就针对 AI 的 token 预算进行了优化：

读取 106KB 的 HTML 页面

模式	Token 数	节省	用途
文本	1,000	97%	最少 token 的读取方式
压缩	3,909	87%	摘要 + 统计信息
内容	7,991	74%	带类型的区块
结构	9,163	70%	树结构概览

编辑（500 行页面，更改一个值）

方式	Token 数	使用场景
按 id 使用 patch_html	~2,396	小目标
edit_html_range	~48	大容器、精准修改

---

开发

git clone https://github.com/Aimino-Tech/OpenTalk2HTML-NotMD.git
cd OpenTalk2HTML-NotMD
npm install
npm run build
npm run dev              # hot reload
npm test                 # vitest

---

许可证

GNU General Public License v3.0 — 参见 LICENSE。

---

由 Aimino Tech 构建 — 让 AI 像人类一样交流。