🌐 Browser MCP Server

A powerful MCP tool for UI designers and developers to extract, analyze, and clone website front-end code (HTML, CSS) with pixel-perfect accuracy.

English | 中文文档

✨ What's New in v2.0

🎉 Major Upgrade! The v2.0 release includes 8 powerful new features:

• 🖱️ User Interaction Support - Visual browser mode for handling logins and interactions

• 🎨 Smart Component CSS Extraction - Auto-generate ready-to-use component code

• 📦 Resource Downloader - Actually download images, fonts, and CSS files to local disk

• 🎨 Color Palette Extraction - Extract all colors used in the page

• 📱 Responsive Analysis - Detect CSS breakpoints and responsive design patterns

• 🔢 Batch Element Extraction - Extract multiple elements in one call

• 🎯 Interactive Element Analysis - Analyze buttons, forms, and interactive components

• 📸 Enhanced Screenshots - More flexible screenshot options with quality control

See full upgrade details →

Related MCP server: Screenshot MCP

🎯 专为UI设计师打造

专业的浏览器MCP工具，用于完整抓取和分析网站的前端代码（HTML、CSS等），实现一比一网站UI还原。

🎯 核心特性

• 完整HTML源码获取 - 获取页面完整的HTML结构

• 真实CSS样式提取 - 获取计算后的CSS样式（computed styles），而非AI猜测

• CSS类完整分析 - 提取所有CSS类定义和使用情况

• 静态资源下载 - 批量获取CSS、字体、图片等资源URL

• 布局结构分析 - 分析Flexbox、Grid等现代布局

• 字体信息提取 - 获取所有@font-face和使用的字体

• 元素精确定位 - 通过CSS选择器精确获取任何元素的样式

• 自定义脚本执行 - 在页面中执行JavaScript获取运行时数据

📦 安装

1. 安装依赖

npm install

2. 安装Chromium浏览器

npm run install-browser

或者手动安装：

npx playwright install chromium

🚀 使用方法

在Claude Desktop中配置

编辑Claude Desktop配置文件：

Windows: %APPDATA%\Claude\claude_desktop_config.json macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Linux: ~/.config/Claude/claude_desktop_config.json

添加以下配置：

{
  "mcpServers": {
    "browser": {
      "command": "node",
      "args": ["/path/to/browser-mcp/browser-mcp-server-v2.js"]
    }
  }
}

💡 提示: 替换 /path/to/browser-mcp/ 为你的实际安装路径 🔄 v1 升级: 如果你还在使用 v1，将 browser-mcp-server.js 改为 browser-mcp-server-v2.js

重启Claude Desktop后即可使用。

🛠️ 可用工具

1. navigate

访问指定的URL网页

{
  "url": "https://example.com",
  "waitUntil": "networkidle"  // 可选: load, domcontentloaded, networkidle
}

2. get_page_source

获取当前页面的完整HTML源码

3. get_element_styles

获取指定元素的所有CSS样式（包括计算后的样式）

{
  "selector": ".header",
  "includeComputed": true  // 默认true
}

4. get_all_stylesheets

获取页面所有CSS样式表的内容（包括外部和内联）

{
  "includeInline": true  // 默认true
}

5. extract_css_classes

提取页面中所有CSS类的定义和使用情况

6. get_element_by_selector

通过CSS选择器获取元素的HTML和样式信息

{
  "selector": "#main-content",
  "includeChildren": false  // 默认false
}

7. download_assets

获取页面所有静态资源的URL列表

{
  "types": ["css", "font", "image"]  // 或 ["all"]
}

8. analyze_layout

分析页面布局结构（Flexbox、Grid等）

{
  "selector": ".container"  // 可选，不填则分析整个页面
}

9. get_fonts

获取页面使用的所有字体信息

10. screenshot

对当前页面或指定元素截图

{
  "selector": ".hero-section",  // 可选
  "fullPage": false  // 默认false
}

11. execute_script

在页面中执行自定义JavaScript代码

{
  "script": "return document.title"
}

💡 使用场景示例

场景1: 完整复制一个网站的导航栏

1. 访问目标网站: navigate(url: "https://example.com")
2. 获取导航栏元素: get_element_by_selector(selector: "nav", includeChildren: true)
3. 提取所有CSS类: extract_css_classes()
4. 下载字体和图标: download_assets(types: ["font", "image"])

场景2: 分析某个页面的布局系统

1. 访问页面: navigate(url: "https://example.com")
2. 分析布局: analyze_layout()
3. 获取所有样式表: get_all_stylesheets()

场景3: 提取特定组件的完整样式

1. 访问页面: navigate(url: "https://example.com")
2. 定位组件: get_element_by_selector(selector: ".card-component", includeChildren: true)
3. 获取样式: get_element_styles(selector: ".card-component")

⚙️ 技术栈

• MCP SDK: Model Context Protocol官方SDK

• Playwright: 浏览器自动化引擎

• Node.js: v18+

🔒 安全说明

• 本工具仅用于学习和参考，请尊重网站的版权和使用条款

• 使用时请遵守目标网站的robots.txt和服务条款

• 不建议用于商业抄袭用途

📝 注意事项

1. 跨域CSS问题: 某些跨域加载的CSS文件可能无法直接读取内容，工具会自动跳过

2. 动态内容: 工具支持等待页面完全加载（包括AJAX内容）

3. 性能: 首次启动会下载Chromium浏览器（约150MB）

🐛 故障排除

无法安装Chromium

# 手动指定代理
set HTTPS_PROXY=http://your-proxy:port
npm run install-browser

Node版本过低

确保使用Node.js 18或更高版本：

node --version

📝 许可证

MIT License - 查看 LICENSE 文件了解详情。

🤝 贡献

欢迎提交Issue和Pull Request！

如何贡献

1. Fork 这个仓库

2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)

3. 提交你的修改 (git commit -m 'Add some AmazingFeature')

4. 推送到分支 (git push origin feature/AmazingFeature)

5. 打开一个Pull Request

⭐ Star History

如果这个项目对你有帮助，请给我们一个 Star ⭐！

🙏 鸣谢

• Model Context Protocol - 提供了MCP标准和SDK

• Playwright - 强大的浏览器自动化引擎

• 所有贡献者们的支持和反馈

Made with ❤️ by Browser MCP Contributors