About inspector-docs
A documentation skill for CopilotKit Inspector, the localhost overlay for Threads, Agents, and Learning. It helps maintain accurate links between shipped Inspector panes and product documentation, and defines when quickstarts should point readers to the overlay.
Key features
- 01Maps shipped panes to documentation
- 02Adds and removes pane callouts
- 03Maintains the pane map
- 04Defines quickstart Inspector checks
- 05Excludes unshipped panes and non-web surfaces
Use cases
- 01Document a newly shipped Inspector pane
- 02Update docs when a pane is renamed or removed
- 03Review quickstart steps that reference Inspector
- 04Check whether a surface should include an Inspector pointer
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/inspector-docsin Claude Code to confirm it loaded.
Bundled filesreferences/pane-map.md
Details
From the project READMEInspector Docs Callouts
Inspector is the localhost overlay that shows Threads, Agents, and Learning. Every shipped pane that a reader can use must have a docs pointer. The pointer tells the reader to open Inspector and look at that pane.
When To Use
Load this skill when:
- A pane, tab, or overlay action is added, renamed, or removed in Inspector
- A docs page teaches a feature that Inspector already shows
- A PR touches both Inspector source and product docs
Do not load it for icon, ping, layout, or copy-only Inspector changes that
do not add a pane. Those UI changes use inspector-workbench.
If the same change also edits Inspector UI, load inspector-workbench as
well and start the standalone lab.
Procedures
Procedure 1: Map a shipped pane to docs
- Name the shipped pane using the label the reader sees in Inspector.
- If mapping a pane, read
references/pane-map.mdbefore proceeding. - If the pane is not shipped, stop. Do not add a Callout.
- If the map already has a page, open that page and confirm the Callout names this pane and what success looks like.
- If the map has no page, add a Callout on the matching shared root docs page, or write
no page yetin the map. Do not invent a page. - Update
references/pane-map.mdin the same change.
Procedure 2: Remove a pane
- If removing a pane, read
references/pane-map.mdbefore proceeding. - Remove the Callout from the mapped page.
- Delete the map row.
Procedure 3: Quickstart sanity-check step
The default web quickstart includes a numbered step after the first chat:
- Agents then Agent: the agent is listed.
- Send a chat message. Agents then AG-UI Events: events are moving.
- Threads: unlocked, or locked with Enable Intelligence.
Angular uses the shared step snippet, like every other web frontend: @copilotkit/angular auto-mounts a pinned @copilotkit/web-inspector, so there is no install step to link (OSS-948). React Native and Channels do not get this step at all.
Decision Tree
- Inspector pane added, renamed, or changed:
- If the pane is not shipped: stop
- Else: Procedure 1
- Inspector pane removed: Procedure 2
- Quickstart or first-run docs: Procedure 3
- If a pane is also new: Procedure 1
Red Flags
| Signal | What it means | Do instead |
|---|---|---|
| Callout names Playground, Fork, emit events, or another unshipped idea | Docs would advertise work that is not in the overlay | Stop. Record the idea under Unshipped in references/pane-map.md |
| "Click the Inspector button" on React Native or Channels | Those surfaces have no web overlay | Skip the Open Inspector step |
| Callout names a pane the overlay does not show | The pointer is a lie | Rewrite the Callout to a shipped pane, or remove it |
Error Handling
- Pane is not shipped: halt. Do not add a Callout for Playground, Fork, emit events, or other unshipped work.
- No matching docs page: record
no page yetin the map. Do not create a new docs section unless the user asked for one. - Non-web surface (React Native, Channels): do not add "click the Inspector button".
- Callout names a pane the overlay does not show: rewrite the Callout or remove it.