mcp-html工件预览
  ](https://www.npmjs.com/package/@mizunashi_mana/mcp-html-artifacts-preview)
MCP服务器，让AI助手在浏览器中即时预览生成的HTML。
这是什么？
一个MCP服务器，它从你的AI助手接收HTML，并立即在你的浏览器中呈现——具有热重新加载、仪表板和零配置功能。
不再保存文件并手动打开。建立在 模型上下文协议（MCP），它可以与任何兼容MCP的AI助手（如Claude Code）配合使用。
特性
- 谷歌搜索结果预览功能 --AI生成的HTML立即在浏览器中呈现
- 热重新加载 --当内容发生变化时，页面会实时更新
- 仪表盘 --在一个地方浏览所有工件，并自动导航到新创建的页面
- 浏览器自动打开 --在创建第一页时自动打开仪表板
- 历史记录管理 --设置页面保留限制(
--max-pages)以及到期(--ttl)，已删除页面历史记录 - 动态端口分配 --多个会话可以同时运行，而不会发生端口冲突
- CDN脚本支持 --加载Mermaid.js、Chart.js或任何CDN库以获得丰富的可视化效果
- 零配置 --只需添加到MCP设置中即可
快速开始
添加到MCP客户端配置中：
{
"mcpServers": {
"html-artifacts-preview": {
"command": "npx",
"args": ["-y", "@mizunashi_mana/mcp-html-artifacts-preview"]
}
}
}MCP工具
| 工具 | 说明 |
|---|---|
create_page | 创建HTML页面并获取浏览器可访问的URL |
update_page | 更新页面内容或标题（触发热重新加载） |
destroy_page | 删除页面（保留在已删除的历史记录中） |
get_pages | 列出所有创建的页面（使用 includeDeleted 也显示已删除的） |
get_page | 获取特定页面的HTML内容 |
add_scripts | 添加CDN脚本（例如Mermaid.js、Chart.js） |
add_stylesheets | 添加外部样式表 |
CLI选项
| 选项 | 描述 |
|---|---|
--no-open | 禁用自动打开浏览器 |
--max-pages | 要保留的最大页数（最旧的页面会自动删除） |
--ttl | 页面生存时间（秒）（过期页面会自动清理） |
用例
- 即时预览人工智能生成的HTML/CSS/JS
- 用图表、比较表和图表可视化讨论
- 渲染Mermaid图、流程图和架构图
- 在技术调查期间创建交互式数据可视化
发展
npm install
npm run build
npm run test
npm run lint许可证
此项目是双重许可的——您可以选择以下任何一种：