使用说明
视觉MCP
Claude Code的交互式浏览器预览。在AI构建过程中，直观地拖动、选择和编辑元素。
Visual MCP将Claude Code的终端与基于浏览器的可视化编辑器连接起来。每个域都有自己的适配器，带有专门的工具和UI。
Claude Code ←→ MCP (stdio) ←→ Visual Server ←→ Browser Preview
↑
Adapter Plugin
快速开始
git clone https://github.com/Marlin-hi/visual-mcp.git
cd visual-mcp
npm install
作为MCP服务器（推荐）
添加 ~/.claude/mcp.json:
{
"mcpServers": {
"visual-mcp": {
"command": "node",
"args": ["/path/to/visual-mcp/server.js"],
"env": {
"VISUAL_MCP_ADAPTER": "motion",
"VISUAL_MCP_PORT": "4200"
}
}
}
}
打开 http://localhost:4200 在您的浏览器中。工具在Claude Code中自动可用。
适配器
运动图形（默认）
基于CSS/SVG的动画，具有时间线、关键帧和视频导出功能。
VISUAL_MCP_ADAPTER=motion
| 工具 | 它做什么 |
|---|---|
add_element |
添加文本、形状、图像或SVG |
update_element |
更改元素属性 |
remove_element |
删除元素 |
duplicate_element |
带偏移的克隆 |
reorder_element |
更改图层顺序 |
add_keyframe |
随时间设置属性动画 |
set_timeline |
播放、暂停、查找、重置 |
set_scene |
背景、尺寸、持续时间 |
list_elements |
所有元素概述 |
export_video |
通过FFmpeg渲染为MP4 |
Web编辑器
通过iframe对任何网页进行Ember风格的视觉编辑。
VISUAL_MCP_ADAPTER=web-editor
| 工具 | 它做什么 |
|---|---|
load_page |
将URL加载到iframe中 |
toggle_edit_mode |
启用选择/拖动/编辑覆盖 |
modify_element |
通过选择器更改文本或样式 |
read_element |
读取元素内容和样式 |
inject_css |
添加自定义CSS |
inject_script |
在页面上下文中运行JS |
navigate |
转到其他URL |
get_changes |
列出所有用户所做的更改 |
核心工具（所有适配器）
| 工具 | 它做什么 |
|---|---|
get_viewport |
当前状态+用户选择 |
get_user_selection |
浏览器中选择了什么 |
get_user_input |
来自浏览器输入栏的消息 |
update_scene |
将状态推送到浏览器 |
send_command |
发送适配器命令 |
take_screenshot |
将画布捕获为PNG |
save_scene / load_scene |
持久/恢复状态 |
浏览器交互
- 点击 → 选择（橙色轮廓）
- 拖拽 → 移动所选元素
- 双击 text → 内联编辑
- 滚轮 → 缩放画布
- Alt+拖动 → 泛画布
- 空间 → 播放/暂停
- 方向键 → 轻扫（偏移=10px）
- 删除 → 删除所选内容
- F → 调整画布以进行查看
编写自己的适配器
创建 adapters/<name>/index.js:
export const name = 'my-adapter';
export const description = 'What it does';
export function initialScene() {
return { /* initial state */ };
}
export function registerTools(server, bus, state) {
server.tool('my_tool', 'Description', { /* zod schema */ }, async (args) => {
bus.emit('mcp:scene-update', state.scene);
return { content: [{ type: 'text', text: 'Done' }] };
});
}
export async function handleHttp(action, body, state) {
return { ok: true };
}
集 VISUAL_MCP_ADAPTER=my-adapter 使用它。
许可证
麻省理工学院
