可视化代码预览工具是 Marlin-hi 开发的 MCP 服务器：Visual MCP是一款连接Claude Code终端与浏览器可视化编辑器的工具，提供实时预览和交互式元素编辑功能。接入方法见官方仓库 README，在客户端 mcpServers 段加入其配置即可：https://github.com/Marlin-hi/visual-mcp
它是干什么的
可视化代码预览工具做的事可以一句话说清：Visual MCP是一款连接Claude Code终端与浏览器可视化编辑器的工具，提供实时预览和交互式元素编辑功能 在 MCP 架构里，它把这项能力封装成 AI 可调用的工具。
| 项目 | 数据 |
|---|---|
| 开发者 | Marlin-hi |
| Star | 1 |
| 收藏 | 0 |
| 质量等级 | A |
| 平台分类 | 浏览器工具 |
| 部署标签 | 本地部署、浏览器自动化、可视化编辑 |
| 仓库 | visual-mcp |
核心能力
- 本地部署（平台标签）
- 浏览器自动化（平台标签）
- 可视化编辑（平台标签）
适合谁用
最该装的是要让 AI 操控浏览器做抓取、填表、自动化测试的人。如果你只是偶尔用一次它背后的服务，开网页就够了，不必上 MCP。
接入指引
- 1打开官方仓库，看 README 顶部的 Installation。
- 2把仓库给出的
mcpServers配置并进你客户端的配置文件（Claude Desktop 在~/Library/Application Support/Claude/claude_desktop_config.json，Cursor 在~/.cursor/mcp.json）。 - 3完全退出客户端再打开，工具列表出现该产品即成功。
需要带完整安装命令和配置 JSON 的教程？看 Top 20 的深度文档：代码文档查询工具 context7。
常见问题
Q
可视化代码预览工具免费吗？
A
代码在 GitHub 开放获取，费用与许可证以仓库为准。
Q
可视化代码预览工具能用在 Cursor / Cline 吗？
A
能。MCP 是通用协议，配置在各客户端之间基本通用，只是配置文件位置不同。