# Inspector Workbench

Runs Inspector UI work on the standalone Threads state lab so the agent can see the...

- Repository: https://github.com/CopilotKit/CopilotKit (38452 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add CopilotKit/CopilotKit --skill inspector-workbench -g -a claude-code -y`
Codex: `npx skills add CopilotKit/CopilotKit --skill inspector-workbench -g -a codex -y`
Cursor: `npx skills add CopilotKit/CopilotKit --skill inspector-workbench -g -a cursor -y`
Gemini CLI: `npx skills add CopilotKit/CopilotKit --skill inspector-workbench -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add CopilotKit/CopilotKit`

## Description

Runs Inspector UI work on the standalone Threads state lab so the agent can see the overlay. Use when a CopilotKit employee asks an agent to fix, polish, add, or debug Inspector UI, chrome, panes, overlay actions, launcher, Home, Threads, Playground, Memory, or any visual behavior in @copilotkit/web-inspector. Don't use for docs-only Callout updates (load inspector-docs), runtime or core changes with no Inspector UI, showcase cell work, or reading Inspector as a consumer inside an app.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Inspector Workbench

The Inspector overlay is a visual product. Code that compiles is not proof.
The agent must run the standalone workbench and look at screenshots after
each visual change.

This skill does not replace `inspector-docs`. If a pane is added, renamed,
or removed, load `inspector-docs` as well.

## When To Use

Load this skill at the start of any task that changes
`packages/web-inspector` UI, chrome, or overlay behavior.

Do not load it for docs-only Callout work. Do not load it for showcase
cells. If the host app is the bug (z-index against host CSS, CopilotChat
layout), use that host, then still take screenshots.

## Default host

The default host is the standalone Threads state lab:

- Command, from the repo root: `nx run @copilotkit/web-inspector:dev:standalone`
- URL: `http://127.0.0.1:5177/?scenario=pro-enabled-existing&reset=1`
- The lab mounts the real `cpk-web-inspector` and opens the overlay.

Do not start a showcase app, an example app, or Storybook as the default
host. Those are slower and hide Inspector-only faults.

The Nx target runs Vite and the CSS watch together. Do not run Vite alone.
Do not run `pnpm --filter @copilotkit/web-inspector run dev`. That watch
serves consumers, not this lab.

## Procedures

### Procedure 1: Start the workbench

1. If the change adds, renames, or removes a pane, load `inspector-docs` too.
2. From the repo root, start `nx run @copilotkit/web-inspector:dev:standalone`.
3. Wait until `http://127.0.0.1:5177` serves.
4. Open the browser tool this session has (Playwright MCP, Claude browser, or Codex computer use).
5. Go to `http://127.0.0.1:5177/?scenario=pro-enabled-existing&reset=1`.
6. If the bug is an empty, locked, error, or unread state, pick that scenario in the lab dropdown, then reload.
7. Wait until the overlay is open on Home or Threads. The lab clicks the launcher.
8. Take a baseline screenshot. Look at it before any edit.

### Procedure 2: Edit, screenshot, look

The rest: https://github.com/CopilotKit/CopilotKit/blob/HEAD/skills/inspector-workbench/SKILL.md