$ loading_
帮助开发者快速安装 Component Explorer 轻量环境并接入 AI 代理集成。
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "setup-component-explorer-light" 技能： 1. 下载 https://raw.githubusercontent.com/microsoft/vscode-team-kit/main/component-explorer/skills/setup-component-explorer-light/SKILL.md 2. 保存为 ~/.claude/skills/setup-component-explorer-light/SKILL.md 3. 装好后重载技能，告诉我可以用了
请为我的前端项目配置 Component Explorer 轻量版，安装所需依赖，并加入 Vite 插件。请给出完整命令和修改步骤。
返回安装命令、配置步骤，以及需要修改的项目文件示例。
请在现有的 Component Explorer 配置中加入 MCP server，用于 AI agent 集成，并说明如何启动与验证连接。
返回 MCP 配置方法、启动命令，以及连通性验证说明。
我在安装 Component Explorer 和 Vite 插件时遇到报错，请根据常见问题给我一个排查清单，并提供修复建议。
返回分步骤排查清单，涵盖依赖、配置、版本兼容和启动问题。
Minimal setup: install packages and wire the Vite plugin so fixtures are served at ___explorer. For the full setup (CLI daemon, VS Code tasks & launch config), use the setup-component-explorer-full skill.
npm install @vscode/component-explorer @vscode/component-explorer-vite-plugin
Use the project's package manager (npm, pnpm, yarn). For workspace monorepos, install into the package that owns the Vite config.
Add componentExplorer() to vite.config.ts:
import { componentExplorer } from '@vscode/component-explorer-vite-plugin';
export default defineConfig({
plugins: [
// ... existing plugins (react, tailwind, etc.)
componentExplorer(),
],
});
| Option | Default | Description |
|---|
include | './src/**/*.fixture.{ts,tsx}' | Glob pattern for fixture files |
route | '/___explorer' | URL path for the explorer UI |
build | 'app-only' | Build mode: 'app-only', 'all', or 'explorer-only' |
outFile | '___explorer.html' | Output filename for built explorer |
logLevel | 'info' | 'silent', 'info', 'verbose', 'warn', 'error' |
For projects where fixtures live outside ./src, set include explicitly:
componentExplorer({
include: './test/**/*.fixture.{ts,tsx,js,jsx}',
}),
npx vite, pnpm dev).simpleBrowser.show with url: http://localhost:5173/___explorer
Important: Before writing any fixtures, read the use-component-explorer skill. It covers fixture patterns, project-specific wrappers, and best practices that are essential for correct usage.
To enable AI agents (Copilot) to take screenshots, compare fixtures, and interact with components, add the MCP server.
npm install @vscode/component-explorer-cli
component-explorer.jsonCreate component-explorer.json next to the Vite config (or at the project root). This points the CLI at the running Vite dev server:
{
"$schema": "node_modules/@vscode/component-explorer-cli/dist/component-explorer-config.schema.json",
"sessions": [{ "name": "current" }],
"server": {
"type": "http",
"url": "http://localhost:5173"
}
}
Adjust the url if the dev server uses a different port.
.vscode/mcp.jsonCreate or update .vscode/mcp.json to register the MCP server:
{
"servers": {
"component-explorer": {
"type": "stdio",
"command": "npx",
"args": [
"component-explorer",
"mcp",
"-p",
"./component-explorer.json"
]
}
}
}
Adjust the -p path if component-explorer.json is not at the workspace root.
调用多模型交叉审查代码变更、PR与高风险修改，辅助发现缺陷与争议点
帮助用户用 MCP 连接 AI 代理与多种服务，搭建自动化工作流。