setup-component-explorer-full

Skill: Setup Component Explorer

When the user asks to add, set up, or integrate the component explorer into their project, follow this guide.

Prerequisites

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

Step 1: Install Packages

npm install @vscode/component-explorer @vscode/component-explorer-cli @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 ./, set include explicitly:

componentExplorer({
  include: './test/**/*.fixture.{ts,tsx,js,jsx}',
}),

Step 3: Create component-explorer.json

Create a configuration file for the CLI/daemon/MCP features (place next to the Vite config or at the project root):

{
  "$schema": "./node_modules/@vscode/component-explorer-cli/dist/component-explorer-config.schema.json",
  "screenshotDir": ".screenshots",
  "viteConfig": "./vite.config.ts",
  
  // If you need a stable port, configure the redirection server port (required for the launch config in Step 6):
  "redirection": { "port": 5331 }
}

Step 4: Configure VS Code — MCP Server

Create or update .vscode/mcp.json to add the component explorer MCP server. This enables AI agents to take screenshots, compare fixtures, and interact with components:

{
  "servers": {
    "component-explorer": {
      "type": "stdio",
      "command": "npm",
      "args": [
        "exec",
        "component-explorer",
        "--no",
        "--",
        "mcp",
        "-p",
        "./component-explorer.json"
      ]
    }
  }
}

Adjust the -p path to point to the component-explorer.json location relative to cwd.

Step 5: Configure VS Code — Component Explorer Server Task

Add a task to .vscode/tasks.json to start the component explorer server:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Component Explorer Server",
      "type": "shell",
      "command": "./node_modules/.bin/component-explorer serve -p ./component-explorer.json --kill-if-running",
      "isBackground": true,
      "problemMatcher": {
        "owner": "component-explorer",
        "fileLocation": "absolute",
        "pattern": {
          "regexp": "^\\s*at\\s+(.+?):(\\d+):(\\d+)\\s*$",
          "file": 1,
          "line": 2,
          "column": 3
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": ".*Setting up sessions.*",
          "endsPattern": "Redirection server listening on.*"
        }
      }
    }
  ]
}

If other tasks already exist, merge the new task into the existing tasks array.

Step 6: Configure VS Code — Launch Configuration (Optional)

To open the component explorer UI in Chrome, add a launch configuration to .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Component Explorer (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5331/___explorer",
      "preLaunchTask": "Component Explorer Server"
    }
  ]
}

This requires the redirection port to be configured in component-explorer.json (see Step 3). The preLaunchTask starts the daemon automatically before opening the browser.

If other launch configurations already exist, merge the new configuration into the existing configurations array.

Step 7: Create a First Fixture and Verify

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.

Create a .fixture.tsx (or .fixture.ts) file to verify the setup works:

1. Start the dev server as a background terminal process: npx vite (or pnpm dev, etc.)
2. Once the server is ready, open the component explorer in VS Code's Simple Browser by running the VS Code command:

   simpleBrowser.show with url: http://localhost:5173/___explorer
   

3. Run the "Component Explorer Server" VS Code task (or the launch configuration) to start the daemon.
4. Verify the MCP server connects (Copilot can now list_fixtures, screenshot, etc.).