setup-component-explorer-light

Thiết lập nhẹ — cài đặt các gói Component Explorer và thêm plugin Vite, kèm máy chủ MCP để tích hợp tác nhân AI.

npx skills add https://github.com/microsoft/vscode-team-kit --skill setup-component-explorer-light

Skill: Setup Component Explorer (Light)

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.

Prerequisites

The project uses Vite as its bundler
Node.js >= 22

Step 1: Install Packages

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.

Step 2: Configure Vite Plugin

Add componentExplorer() to vite.config.ts:

import { componentExplorer } from '@vscode/component-explorer-vite-plugin';

export default defineConfig({
  plugins: [
    // ... existing plugins (react, tailwind, etc.)
    componentExplorer(),
  ],
});

Plugin Options

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}',
}),

Step 3: Start Dev Server and Open Explorer

Start the Vite dev server as a background terminal process (e.g. npx vite, pnpm dev).
Once the server is ready, open the component explorer in VS Code's Simple Browser by running the VS Code command (adjust port if needed):
```
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.

Optional: MCP Server for AI Agent Integration

To enable AI agents (Copilot) to take screenshots, compare fixtures, and interact with components, add the MCP server.

Install the CLI

npm install @vscode/component-explorer-cli

Create `component-explorer.json`

Create 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.

Configure `.vscode/mcp.json`

Create 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.