MCP 浏览器画布 — Rabbithole 模式

核心理念

来自 rabbithole 的洞察：Agent 需要一个浏览器画布来展示超出纯文本的东西。 不是让用户在终端看结果，而是 Agent 主动打开浏览器展示可视化、图表、交互式内容。

Hermes 已有的浏览器能力

Rabbithole 模式的三个用法

1. 知识画布（对照 rabbithole 原版）

Agent 在浏览器打开一个 HTML 页面，用户选中文字追问，答案作为子页面展开。

Hermes 实现方式：
1. 生成一个自包含的 HTML 文件（内嵌 JS + CSS）
2. mcp-chrome 导航到 file://路径
3. 用户在浏览器里交互，Hermes 通过 JS 注入获取反馈

2. 可视化仪表盘

Agent 把分析结果渲染成交互式 ECharts 仪表盘，浏览器打开。

"分析最近 10 次对话的 token 趋势" →
1. 提取 session_search 数据
2. 生成 ECharts HTML（折线图 + 饼图）
3. mcp-chrome 打开

3. 比较视图

并列展示多个方案的对比，用户可切换查看。

"对比 SigMap vs CKG vs RAG 三种方案" →
1. 生成三栏 HTML 对比页
2. mcp-chrome 打开
3. 用户点击切换，实时高亮差异

实现步骤（最小可行版）

Step 1：生成 HTML

html = f"""<!DOCTYPE html>
<html><head><meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head><body>
<div id="chart" style="width:100%;height:100vh"></div>
<script>
// ECharts 配置
const option = {json.dumps(chart_config)};
echarts.init(document.getElementById('chart')).setOption(option);
</script></body></html>"""
write_file("D:/Hermes/temp/canvas.html", html)

Step 2：浏览器打开

用 mcp-chrome 导航到 file:///D:/Hermes/temp/canvas.html

Step 3：交互反馈（可选）

用 mcp_chrome_chrome_javascript 注入 JS 读取用户操作状态

已实现的可视化

• D:/Hermes/knowledge-base/技能图谱/dashboard.html — 105 技能力导向图
• D:/Hermes/knowledge-base/技能图谱/chat-mirror.html — 对话镜像
• agent-visualization-flint 技能 — 三级可视化输出

与 rabbithole 的差异

Hermes 方案的优势：不需要额外装任何东西，mcp-chrome 扩展已有，生成 HTML 零依赖。

参考

• rabbithole: https://github.com/shlokkhemani/rabbithole (195⭐)
• 演示站: https://rabbithole.ing/app
• Hermes 已有: mcp-chrome (20+工具), agent-visualization-flint, dashboard.html