AI导哈

HTML预览服务

一个基于MCP协议的服务器，允许AI助手在浏览器中即时预览生成的HTML内容，支持热重载、仪表盘和零配置。

  • by mizunashi-mana
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 mizunashi-mana/mcp-html-artifacts-preview

使用说明

mcp-html工件预览

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 <N> 要保留的最大页数（最旧的页面会自动删除）
--ttl <seconds> 页面生存时间（秒）（过期页面会自动清理）

用例

  • 即时预览人工智能生成的HTML/CSS/JS
  • 用图表、比较表和图表可视化讨论
  • 渲染Mermaid图、流程图和架构图
  • 在技术调查期间创建交互式数据可视化

发展

npm install
npm run build
npm run test
npm run lint

许可证

此项目是双重许可的——您可以选择以下任何一种：

相关 MCP