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

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

1. Start the Vite dev server as a background terminal process (e.g. npx vite, pnpm dev).
2. 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.