Inspector 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.md before 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 yet in the map. Do not invent a page.
- Update
references/pane-map.md in the same change.
Procedure 2: Remove a pane
- If removing a pane, read
references/pane-map.md before 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 yet in 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.
1---2name: inspector-docs3description: Keeps CopilotKit docs pointing at shipped Inspector panes so readers open the overlay. Use when adding, changing, renaming, or removing an Inspector pane, tab, or overlay action in @copilotkit/web-inspector, or when editing docs that mention Inspector. Don't use for Inspector UI polish that does not add a pane, for CLI or agent-prompt copy, or for unshipped Inspector ideas.4---56# Inspector Docs Callouts78Inspector is the localhost overlay that shows Threads, Agents, and Learning.9Every shipped pane that a reader can use must have a docs pointer. The10pointer tells the reader to open Inspector and look at that pane.1112## When To Use1314Load this skill when:1516- A pane, tab, or overlay action is added, renamed, or removed in Inspector17- A docs page teaches a feature that Inspector already shows18- A PR touches both Inspector source and product docs1920Do not load it for icon, ping, layout, or copy-only Inspector changes that21do not add a pane. Those UI changes use `inspector-workbench`.2223If the same change also edits Inspector UI, load `inspector-workbench` as24well and start the standalone lab.2526## Procedures2728### Procedure 1: Map a shipped pane to docs29301. Name the shipped pane using the label the reader sees in Inspector.312. If mapping a pane, read `references/pane-map.md` before proceeding.323. If the pane is not shipped, stop. Do not add a Callout.334. If the map already has a page, open that page and confirm the Callout names this pane and what success looks like.345. If the map has no page, add a Callout on the matching shared root docs page, or write `no page yet` in the map. Do not invent a page.356. Update `references/pane-map.md` in the same change.3637### Procedure 2: Remove a pane38391. If removing a pane, read `references/pane-map.md` before proceeding.402. Remove the Callout from the mapped page.413. Delete the map row.4243### Procedure 3: Quickstart sanity-check step4445The default web quickstart includes a numbered step after the first chat:46471. **Agents** then **Agent**: the agent is listed.482. Send a chat message. **Agents** then **AG-UI Events**: events are moving.493. **Threads**: unlocked, or locked with Enable Intelligence.5051Angular 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.5253## Decision Tree5455- Inspector pane added, renamed, or changed:56 - If the pane is not shipped: stop57 - Else: Procedure 158- Inspector pane removed: Procedure 259- Quickstart or first-run docs: Procedure 360 - If a pane is also new: Procedure 16162## Red Flags6364| Signal | What it means | Do instead |65| ---------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------- |66| 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` |67| "Click the Inspector button" on React Native or Channels | Those surfaces have no web overlay | Skip the Open Inspector step |68| Callout names a pane the overlay does not show | The pointer is a lie | Rewrite the Callout to a shipped pane, or remove it |6970## Error Handling7172- **Pane is not shipped**: halt. Do not add a Callout for Playground, Fork, emit events, or other unshipped work.73- **No matching docs page**: record `no page yet` in the map. Do not create a new docs section unless the user asked for one.74- **Non-web surface** (React Native, Channels): do not add "click the Inspector button".75- **Callout names a pane the overlay does not show**: rewrite the Callout or remove it.