@sudu-cli/fronted-preview-mcp

MCP server 用于前端项目框架检测和 dev server 管理。与 chrome-devtools-mcp 配合使用，实现自动化前端预览和错误检查工作流。

安装

# 在项目中初始化配置
npx @sudu-cli/fronted-preview-mcp init

使用方法

# 启动 MCP server（opencode 自动调用）
npx @sudu-cli/fronted-preview-mcp

# 在项目中初始化 opencode 配置
npx @sudu-cli/fronted-preview-mcp init

# 查看帮助
npx @sudu-cli/fronted-preview-mcp --help

工具

| 工具 | 说明 | |------|------| | 项目管理 | | | quick_preview | 推荐。检测框架 + 启动 dev server，一步完成 | | get_project_info | 仅检测项目框架信息 | | start_dev_server | 仅启动 dev server | | stop_dev_server | 停止 dev server | | 浏览器自动化 | | | navigate | 导航到指定URL，等待页面加载 | | click | 点击页面元素（支持多种点击方式） | | fill | 填充表单输入字段 | | screenshot | 截图功能（支持全页面、元素截图） | | inspect | 元素检查和分析（详细属性、样式、结构） | | 性能分析 | | | core_web_vitals | 分析核心Web指标（LCP、FID、CLS） | | resource_timing | 分析资源加载时间和性能瓶颈 | | lighthouse | 全面质量审计（性能、无障碍、SEO、最佳实践） | | 错误检测 | | | check_page_errors | 检查页面console错误和网络失败 | | get_typescript_diagnostics | TypeScript类型错误检查 | | auto_fix_loop | 自动检测和修复前端错误的迭代循环 |

推荐工作流

基础预览工作流

调用 quick_preview 后，按顺序执行：

1. chrome-devtools navigate_page(url) — 打开页面
2. chrome-devtools list_console_messages() — 检查 console 错误
3. chrome-devtools take_snapshot() — 分析页面结构

自动化测试工作流

1. frontend-preview navigate(url) — 导航到目标页面
2. frontend-preview fill(selector, value) — 填充表单
3. frontend-preview click(selector) — 点击按钮
4. frontend-preview check_page_errors() — 检查错误
5. frontend-preview screenshot() — 截图验证

元素检查工作流

1. frontend-preview navigate(url) — 导航到页面
2. frontend-preview inspect(selector) — 检查元素详情
3. frontend-preview screenshot(selector) — 截取元素截图

性能分析工作流

1. frontend-preview core_web_vitals — 分析核心Web指标
2. frontend-preview resource_timing — 分析资源加载时间
3. frontend-preview lighthouse — 全面质量审计

配置

npx @sudu-cli/fronted-preview-mcp init 会生成：

项目目录/
├── opencode.json                           # MCP 服务器配置
└── .opencode/
    ├── agents/preview-checker.md           # 可选：子智能体
    └── frontend-preview/instructions.md    # 工作流说明

要求

• Node.js >= 18
• opencode 或其他 MCP 客户端
• chrome-devtools-mcp（自动配置）

开发

npm install
npm run build    # 编译 TypeScript
npm run dev      # 监听模式
node dist/cli.js --help