Skip to content
cccskills
FreePublished on GitHub

inspector-docs

Keeps CopilotKit documentation aligned with released Inspector panels, the views shown in its local web overlay. It updates reader guidance and panel mappings when panels change, and checks quickstart instructions against supported platforms.

OriginalShow the original description

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.

See how to install

Good for

  • Add documentation guidance for a released Inspector panel
  • Update documentation after renaming or removing a panel
  • Check Inspector instructions in web quickstarts
  • Review whether documented panels are actually available

Files included (2)

  • SKILL.md4.1 KB
  • references/pane-map.md4.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

  1. Name the shipped pane using the label the reader sees in Inspector.
  2. If mapping a pane, read references/pane-map.md before proceeding.
  3. If the pane is not shipped, stop. Do not add a Callout.
  4. If the map already has a page, open that page and confirm the Callout names this pane and what success looks like.
  5. 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.
  6. Update references/pane-map.md in the same change.

Procedure 2: Remove a pane

  1. If removing a pane, read references/pane-map.md before proceeding.
  2. Remove the Callout from the mapped page.
  3. Delete the map row.

Procedure 3: Quickstart sanity-check step

The default web quickstart includes a numbered step after the first chat:

  1. Agents then Agent: the agent is listed.
  2. Send a chat message. Agents then AG-UI Events: events are moving.
  3. 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

SignalWhat it meansDo instead
Callout names Playground, Fork, emit events, or another unshipped ideaDocs would advertise work that is not in the overlayStop. Record the idea under Unshipped in references/pane-map.md
"Click the Inspector button" on React Native or ChannelsThose surfaces have no web overlaySkip the Open Inspector step
Callout names a pane the overlay does not showThe pointer is a lieRewrite 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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

channels-setup

FreeSummary

Set up an agent that replies in Slack or Microsoft Teams using CopilotKit's guided CLI workflow. It covers project preparation, agent creation, channel configuration, a persistent host process, and verification with a real message.

  • Building a first agent that replies in Slack
  • Connecting an agent to Microsoft Teams
  • Checking channel setup through a real reply
CopilotKit/CopilotKit38.1KUpdated Oct 17, 2026

Guides development of ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK, covering server tools, React interfaces, and shared state. This skill is deprecated and directs users to mcp-app-builder.

  • Plan a ChatGPT app with interactive widgets
  • Implement MCP server tools and React widgets
  • Manage widget state and context shared with ChatGPT
CopilotKit/CopilotKit38.1KUpdated Oct 17, 2026

copilotkit

FreeSummary

Helps integrate CopilotKit into an app by consulting current documentation and source code. Covers chat interfaces, agent connections, shared state, and troubleshooting, with guidance on checking configuration and avoiding incompatible API versions.

  • Adding a CopilotKit chat interface to an app
  • Connecting an agent framework
  • Diagnosing runtime connection problems
CopilotKit/CopilotKit38.1KUpdated Oct 17, 2026

Implement and customize managed CopilotKit Channels so agents can reply in Slack or Microsoft Teams. It covers channel handlers, persistent runtime connections, Teams setup, and checks for silent failures such as missing permissions or incompatible package versions.

  • Customizing mention and reaction handlers
  • Adding a managed Channel to an existing project
  • Setting up a Microsoft Teams connection
CopilotKit/CopilotKit38.1KUpdated Oct 17, 2026

copilotkit-cli

FreeSummary

Use the CopilotKit CLI to check app connections, credentials, and agent responses before investigating code. It also guides project creation, integration into existing apps, hosted project selection, typed agent identifier generation, and thread history imports.

  • Diagnosing CopilotKit connection and authentication failures
  • Creating a new CopilotKit project
  • Adding CopilotKit to an existing app
CopilotKit/CopilotKit38.1KUpdated Oct 17, 2026

Develop and debug CopilotKit Inspector interfaces in a dedicated local workbench. It guides baseline screenshots, visual checks after each change, and additional narrow-screen or theme checks when layout or contrast is involved.

  • Fixing Inspector panes and overlay controls
  • Checking narrow-screen layouts and the collapsed rail
  • Comparing light and dark theme appearance
CopilotKit/CopilotKit38.1KUpdated Oct 17, 2026

See all skills by CopilotKit

Report a problem with this skill