[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-copilotkit-inspector-workbench":3,"mdc-9uh1f4-key":54,"related-repo-copilotkit-inspector-workbench":772,"related-org-copilotkit-inspector-workbench":872},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":49,"sourceUrl":52,"mdContent":53},"inspector-workbench","debug and polish CopilotKit Inspector UI","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\u002Fweb-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.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"copilotkit","CopilotKit","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fcopilotkit.png",[12,14,17,20],{"name":9,"slug":8,"type":13},"tag",{"name":15,"slug":16,"type":13},"UI Components","ui-components",{"name":18,"slug":19,"type":13},"Frontend","frontend",{"name":21,"slug":22,"type":13},"Debugging","debugging",36791,"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit","2026-08-29T09:48:15.383333",null,4548,[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"agent","agent-native","agentic-ai","agents","ai","ai-agent","ai-assistant","assistant","assistant-chat-bots","copilot","copilot-chat","generative-ui","js","llm","nextjs","open-source","react","reactjs","ts","typescript",{"repoUrl":24,"stars":23,"forks":27,"topics":50,"description":51},[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"The Frontend Stack for Agents & Generative UI. React, Angular, Mobile, Slack, and more.  Makers of the AG-UI Protocol","https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\u002Ftree\u002FHEAD\u002Fskills\u002Finspector-workbench","---\nname: inspector-workbench\ndescription: >\n  Runs Inspector UI work on the standalone Threads state lab so the agent\n  can see the overlay. Use when a CopilotKit employee asks an agent to\n  fix, polish, add, or debug Inspector UI, chrome, panes, overlay actions,\n  launcher, Home, Threads, Playground, Memory, or any visual behavior in\n  @copilotkit\u002Fweb-inspector. Don't use for docs-only Callout updates (load\n  inspector-docs), runtime or core changes with no Inspector UI, showcase\n  cell work, or reading Inspector as a consumer inside an app.\nversion: 1.0.0\n---\n\n# Inspector Workbench\n\nThe Inspector overlay is a visual product. Code that compiles is not proof.\nThe agent must run the standalone workbench and look at screenshots after\neach visual change.\n\nThis skill does not replace `inspector-docs`. If a pane is added, renamed,\nor removed, load `inspector-docs` as well.\n\n## When To Use\n\nLoad this skill at the start of any task that changes\n`packages\u002Fweb-inspector` UI, chrome, or overlay behavior.\n\nDo not load it for docs-only Callout work. Do not load it for showcase\ncells. If the host app is the bug (z-index against host CSS, CopilotChat\nlayout), use that host, then still take screenshots.\n\n## Default host\n\nThe default host is the standalone Threads state lab:\n\n- Command, from the repo root: `nx run @copilotkit\u002Fweb-inspector:dev:standalone`\n- URL: `http:\u002F\u002F127.0.0.1:5177\u002F?scenario=pro-enabled-existing&reset=1`\n- The lab mounts the real `cpk-web-inspector` and opens the overlay.\n\nDo not start a showcase app, an example app, or Storybook as the default\nhost. Those are slower and hide Inspector-only faults.\n\nThe Nx target runs Vite and the CSS watch together. Do not run Vite alone.\nDo not run `pnpm --filter @copilotkit\u002Fweb-inspector run dev`. That watch\nserves consumers, not this lab.\n\n## Procedures\n\n### Procedure 1: Start the workbench\n\n1. If the change adds, renames, or removes a pane, load `inspector-docs` too.\n2. From the repo root, start `nx run @copilotkit\u002Fweb-inspector:dev:standalone`.\n3. Wait until `http:\u002F\u002F127.0.0.1:5177` serves.\n4. Open the browser tool this session has (Playwright MCP, Claude browser, or Codex computer use).\n5. Go to `http:\u002F\u002F127.0.0.1:5177\u002F?scenario=pro-enabled-existing&reset=1`.\n6. If the bug is an empty, locked, error, or unread state, pick that scenario in the lab dropdown, then reload.\n7. Wait until the overlay is open on Home or Threads. The lab clicks the launcher.\n8. Take a baseline screenshot. Look at it before any edit.\n\n### Procedure 2: Edit, screenshot, look\n\n1. Edit Inspector source under `packages\u002Fweb-inspector\u002Fsrc`.\n2. Wait for Vite to reload the lab.\n3. If the page did not pick up the change, reload the lab URL, then wait for the overlay.\n4. Take a screenshot of the pane that must change.\n5. If the browser tool writes a file, write it under `.inspector-workbench\u002F\u003Ctask>\u002F`. Never write a PNG at the repo root.\n6. Look at the screenshot. If the change is not visible, the work is not done.\n7. Repeat steps 1–6 after every visual change.\n8. If layout or the collapsed rail is in scope, take a second screenshot at a narrow viewport.\n9. If theme or contrast is in scope, take light and dark screenshots.\n\nUnit tests still belong in the same change. Screenshots do not replace tests.\n\n### Procedure 3: Stop the workbench\n\n1. After the Inspector task is done, stop the `dev:standalone` process tree.\n2. Do not leave Vite or the CSS watch running.\n3. Do not commit files under `.inspector-workbench\u002F`.\n4. Do not commit PNG files at the repo root.\n\n## Decision Tree\n\n- Inspector UI, chrome, overlay, launcher, or pane visuals:\n  - Start: Procedure 1\n  - While editing: Procedure 2\n  - After the task: Procedure 3\n  - If a pane is added, renamed, or removed: also load `inspector-docs`\n- Docs Callout only: stop. Load `inspector-docs` instead.\n- Bug exists only inside a host app: use that host, then still follow Procedure 2 screenshots.\n- Runtime or core change with no Inspector UI: this skill does not apply.\n\n## Red Flags\n\n| Signal                                              | What it means                        | Do instead                                            |\n| --------------------------------------------------- | ------------------------------------ | ----------------------------------------------------- |\n| Showcase, example, or Storybook is the first server | The agent skipped the workbench      | Stop that server. Run Procedure 1                     |\n| No screenshot after a visual edit                   | The agent is guessing from CSS       | Take a screenshot. Look at it                         |\n| PNG files at the repo root (`inspector-open.png`)   | The screenshot path is wrong         | Write under `.inspector-workbench\u002F\u003Ctask>\u002F`            |\n| \"The CSS looks correct, so the UI is done\"          | Overlay bugs do not show in source   | Screenshot the lab. Fix what the image shows          |\n| Vite started without the Nx target                  | CSS watch is missing                 | Use `nx run @copilotkit\u002Fweb-inspector:dev:standalone` |\n| Port 5178 or a random port                          | The lab pins 5177                    | Free 5177. Do not pick another port                   |\n| Workbench still running after the task              | Watchers leak memory on this machine | Run Procedure 3                                       |\n| Pane added with no `inspector-docs` pass            | Docs Callout will drift              | Load `inspector-docs` in the same change              |\n\n## Error Handling\n\n- **Port 5177 is in use**: stop the leftover Inspector workbench on that port, then retry Procedure 1. Do not pick another port. The lab uses `strictPort`.\n- **No browser tool in this session**: tell the user the session cannot see Inspector. Do not guess visual results from CSS or unit tests alone.\n- **Lab is blank or the overlay is closed**: wait for boot. Then screenshot the lab console Runtime line. If Runtime is not connected, fix the lab before UI edits.\n- **Screenshot does not show the intended change**: do not claim done. Reload, screenshot again, then fix the source.\n- **HMR did not apply a source edit**: reload `http:\u002F\u002F127.0.0.1:5177` with the same scenario query. Then screenshot.\n- **Need a closed launcher or unread halo**: open `http:\u002F\u002F127.0.0.1:5177\u002F?scenario=pro-enabled-existing&replay-notification=1`.\n- **Any unexpected error**: halt and surface the raw error. Do not switch to a showcase app to work around the lab.\n",{"data":55,"body":57},{"name":4,"description":6,"version":56},"1.0.0",{"type":58,"children":59},"root",[60,68,74,95,102,115,120,126,131,171,176,189,195,202,274,280,343,348,354,392,398,456,462,671,677],{"type":61,"tag":62,"props":63,"children":64},"element","h1",{"id":4},[65],{"type":66,"value":67},"text","Inspector Workbench",{"type":61,"tag":69,"props":70,"children":71},"p",{},[72],{"type":66,"value":73},"The Inspector overlay is a visual product. Code that compiles is not proof.\nThe agent must run the standalone workbench and look at screenshots after\neach visual change.",{"type":61,"tag":69,"props":75,"children":76},{},[77,79,86,88,93],{"type":66,"value":78},"This skill does not replace ",{"type":61,"tag":80,"props":81,"children":83},"code",{"className":82},[],[84],{"type":66,"value":85},"inspector-docs",{"type":66,"value":87},". If a pane is added, renamed,\nor removed, load ",{"type":61,"tag":80,"props":89,"children":91},{"className":90},[],[92],{"type":66,"value":85},{"type":66,"value":94}," as well.",{"type":61,"tag":96,"props":97,"children":99},"h2",{"id":98},"when-to-use",[100],{"type":66,"value":101},"When To Use",{"type":61,"tag":69,"props":103,"children":104},{},[105,107,113],{"type":66,"value":106},"Load this skill at the start of any task that changes\n",{"type":61,"tag":80,"props":108,"children":110},{"className":109},[],[111],{"type":66,"value":112},"packages\u002Fweb-inspector",{"type":66,"value":114}," UI, chrome, or overlay behavior.",{"type":61,"tag":69,"props":116,"children":117},{},[118],{"type":66,"value":119},"Do not load it for docs-only Callout work. Do not load it for showcase\ncells. If the host app is the bug (z-index against host CSS, CopilotChat\nlayout), use that host, then still take screenshots.",{"type":61,"tag":96,"props":121,"children":123},{"id":122},"default-host",[124],{"type":66,"value":125},"Default host",{"type":61,"tag":69,"props":127,"children":128},{},[129],{"type":66,"value":130},"The default host is the standalone Threads state lab:",{"type":61,"tag":132,"props":133,"children":134},"ul",{},[135,147,158],{"type":61,"tag":136,"props":137,"children":138},"li",{},[139,141],{"type":66,"value":140},"Command, from the repo root: ",{"type":61,"tag":80,"props":142,"children":144},{"className":143},[],[145],{"type":66,"value":146},"nx run @copilotkit\u002Fweb-inspector:dev:standalone",{"type":61,"tag":136,"props":148,"children":149},{},[150,152],{"type":66,"value":151},"URL: ",{"type":61,"tag":80,"props":153,"children":155},{"className":154},[],[156],{"type":66,"value":157},"http:\u002F\u002F127.0.0.1:5177\u002F?scenario=pro-enabled-existing&reset=1",{"type":61,"tag":136,"props":159,"children":160},{},[161,163,169],{"type":66,"value":162},"The lab mounts the real ",{"type":61,"tag":80,"props":164,"children":166},{"className":165},[],[167],{"type":66,"value":168},"cpk-web-inspector",{"type":66,"value":170}," and opens the overlay.",{"type":61,"tag":69,"props":172,"children":173},{},[174],{"type":66,"value":175},"Do not start a showcase app, an example app, or Storybook as the default\nhost. Those are slower and hide Inspector-only faults.",{"type":61,"tag":69,"props":177,"children":178},{},[179,181,187],{"type":66,"value":180},"The Nx target runs Vite and the CSS watch together. Do not run Vite alone.\nDo not run ",{"type":61,"tag":80,"props":182,"children":184},{"className":183},[],[185],{"type":66,"value":186},"pnpm --filter @copilotkit\u002Fweb-inspector run dev",{"type":66,"value":188},". That watch\nserves consumers, not this lab.",{"type":61,"tag":96,"props":190,"children":192},{"id":191},"procedures",[193],{"type":66,"value":194},"Procedures",{"type":61,"tag":196,"props":197,"children":199},"h3",{"id":198},"procedure-1-start-the-workbench",[200],{"type":66,"value":201},"Procedure 1: Start the workbench",{"type":61,"tag":203,"props":204,"children":205},"ol",{},[206,218,230,243,248,259,264,269],{"type":61,"tag":136,"props":207,"children":208},{},[209,211,216],{"type":66,"value":210},"If the change adds, renames, or removes a pane, load ",{"type":61,"tag":80,"props":212,"children":214},{"className":213},[],[215],{"type":66,"value":85},{"type":66,"value":217}," too.",{"type":61,"tag":136,"props":219,"children":220},{},[221,223,228],{"type":66,"value":222},"From the repo root, start ",{"type":61,"tag":80,"props":224,"children":226},{"className":225},[],[227],{"type":66,"value":146},{"type":66,"value":229},".",{"type":61,"tag":136,"props":231,"children":232},{},[233,235,241],{"type":66,"value":234},"Wait until ",{"type":61,"tag":80,"props":236,"children":238},{"className":237},[],[239],{"type":66,"value":240},"http:\u002F\u002F127.0.0.1:5177",{"type":66,"value":242}," serves.",{"type":61,"tag":136,"props":244,"children":245},{},[246],{"type":66,"value":247},"Open the browser tool this session has (Playwright MCP, Claude browser, or Codex computer use).",{"type":61,"tag":136,"props":249,"children":250},{},[251,253,258],{"type":66,"value":252},"Go to ",{"type":61,"tag":80,"props":254,"children":256},{"className":255},[],[257],{"type":66,"value":157},{"type":66,"value":229},{"type":61,"tag":136,"props":260,"children":261},{},[262],{"type":66,"value":263},"If the bug is an empty, locked, error, or unread state, pick that scenario in the lab dropdown, then reload.",{"type":61,"tag":136,"props":265,"children":266},{},[267],{"type":66,"value":268},"Wait until the overlay is open on Home or Threads. The lab clicks the launcher.",{"type":61,"tag":136,"props":270,"children":271},{},[272],{"type":66,"value":273},"Take a baseline screenshot. Look at it before any edit.",{"type":61,"tag":196,"props":275,"children":277},{"id":276},"procedure-2-edit-screenshot-look",[278],{"type":66,"value":279},"Procedure 2: Edit, screenshot, look",{"type":61,"tag":203,"props":281,"children":282},{},[283,295,300,305,310,323,328,333,338],{"type":61,"tag":136,"props":284,"children":285},{},[286,288,294],{"type":66,"value":287},"Edit Inspector source under ",{"type":61,"tag":80,"props":289,"children":291},{"className":290},[],[292],{"type":66,"value":293},"packages\u002Fweb-inspector\u002Fsrc",{"type":66,"value":229},{"type":61,"tag":136,"props":296,"children":297},{},[298],{"type":66,"value":299},"Wait for Vite to reload the lab.",{"type":61,"tag":136,"props":301,"children":302},{},[303],{"type":66,"value":304},"If the page did not pick up the change, reload the lab URL, then wait for the overlay.",{"type":61,"tag":136,"props":306,"children":307},{},[308],{"type":66,"value":309},"Take a screenshot of the pane that must change.",{"type":61,"tag":136,"props":311,"children":312},{},[313,315,321],{"type":66,"value":314},"If the browser tool writes a file, write it under ",{"type":61,"tag":80,"props":316,"children":318},{"className":317},[],[319],{"type":66,"value":320},".inspector-workbench\u002F\u003Ctask>\u002F",{"type":66,"value":322},". Never write a PNG at the repo root.",{"type":61,"tag":136,"props":324,"children":325},{},[326],{"type":66,"value":327},"Look at the screenshot. If the change is not visible, the work is not done.",{"type":61,"tag":136,"props":329,"children":330},{},[331],{"type":66,"value":332},"Repeat steps 1–6 after every visual change.",{"type":61,"tag":136,"props":334,"children":335},{},[336],{"type":66,"value":337},"If layout or the collapsed rail is in scope, take a second screenshot at a narrow viewport.",{"type":61,"tag":136,"props":339,"children":340},{},[341],{"type":66,"value":342},"If theme or contrast is in scope, take light and dark screenshots.",{"type":61,"tag":69,"props":344,"children":345},{},[346],{"type":66,"value":347},"Unit tests still belong in the same change. Screenshots do not replace tests.",{"type":61,"tag":196,"props":349,"children":351},{"id":350},"procedure-3-stop-the-workbench",[352],{"type":66,"value":353},"Procedure 3: Stop the workbench",{"type":61,"tag":203,"props":355,"children":356},{},[357,370,375,387],{"type":61,"tag":136,"props":358,"children":359},{},[360,362,368],{"type":66,"value":361},"After the Inspector task is done, stop the ",{"type":61,"tag":80,"props":363,"children":365},{"className":364},[],[366],{"type":66,"value":367},"dev:standalone",{"type":66,"value":369}," process tree.",{"type":61,"tag":136,"props":371,"children":372},{},[373],{"type":66,"value":374},"Do not leave Vite or the CSS watch running.",{"type":61,"tag":136,"props":376,"children":377},{},[378,380,386],{"type":66,"value":379},"Do not commit files under ",{"type":61,"tag":80,"props":381,"children":383},{"className":382},[],[384],{"type":66,"value":385},".inspector-workbench\u002F",{"type":66,"value":229},{"type":61,"tag":136,"props":388,"children":389},{},[390],{"type":66,"value":391},"Do not commit PNG files at the repo root.",{"type":61,"tag":96,"props":393,"children":395},{"id":394},"decision-tree",[396],{"type":66,"value":397},"Decision Tree",{"type":61,"tag":132,"props":399,"children":400},{},[401,434,446,451],{"type":61,"tag":136,"props":402,"children":403},{},[404,406],{"type":66,"value":405},"Inspector UI, chrome, overlay, launcher, or pane visuals:\n",{"type":61,"tag":132,"props":407,"children":408},{},[409,414,419,424],{"type":61,"tag":136,"props":410,"children":411},{},[412],{"type":66,"value":413},"Start: Procedure 1",{"type":61,"tag":136,"props":415,"children":416},{},[417],{"type":66,"value":418},"While editing: Procedure 2",{"type":61,"tag":136,"props":420,"children":421},{},[422],{"type":66,"value":423},"After the task: Procedure 3",{"type":61,"tag":136,"props":425,"children":426},{},[427,429],{"type":66,"value":428},"If a pane is added, renamed, or removed: also load ",{"type":61,"tag":80,"props":430,"children":432},{"className":431},[],[433],{"type":66,"value":85},{"type":61,"tag":136,"props":435,"children":436},{},[437,439,444],{"type":66,"value":438},"Docs Callout only: stop. Load ",{"type":61,"tag":80,"props":440,"children":442},{"className":441},[],[443],{"type":66,"value":85},{"type":66,"value":445}," instead.",{"type":61,"tag":136,"props":447,"children":448},{},[449],{"type":66,"value":450},"Bug exists only inside a host app: use that host, then still follow Procedure 2 screenshots.",{"type":61,"tag":136,"props":452,"children":453},{},[454],{"type":66,"value":455},"Runtime or core change with no Inspector UI: this skill does not apply.",{"type":61,"tag":96,"props":457,"children":459},{"id":458},"red-flags",[460],{"type":66,"value":461},"Red Flags",{"type":61,"tag":463,"props":464,"children":465},"table",{},[466,490],{"type":61,"tag":467,"props":468,"children":469},"thead",{},[470],{"type":61,"tag":471,"props":472,"children":473},"tr",{},[474,480,485],{"type":61,"tag":475,"props":476,"children":477},"th",{},[478],{"type":66,"value":479},"Signal",{"type":61,"tag":475,"props":481,"children":482},{},[483],{"type":66,"value":484},"What it means",{"type":61,"tag":475,"props":486,"children":487},{},[488],{"type":66,"value":489},"Do instead",{"type":61,"tag":491,"props":492,"children":493},"tbody",{},[494,513,531,562,580,603,621,639],{"type":61,"tag":471,"props":495,"children":496},{},[497,503,508],{"type":61,"tag":498,"props":499,"children":500},"td",{},[501],{"type":66,"value":502},"Showcase, example, or Storybook is the first server",{"type":61,"tag":498,"props":504,"children":505},{},[506],{"type":66,"value":507},"The agent skipped the workbench",{"type":61,"tag":498,"props":509,"children":510},{},[511],{"type":66,"value":512},"Stop that server. Run Procedure 1",{"type":61,"tag":471,"props":514,"children":515},{},[516,521,526],{"type":61,"tag":498,"props":517,"children":518},{},[519],{"type":66,"value":520},"No screenshot after a visual edit",{"type":61,"tag":498,"props":522,"children":523},{},[524],{"type":66,"value":525},"The agent is guessing from CSS",{"type":61,"tag":498,"props":527,"children":528},{},[529],{"type":66,"value":530},"Take a screenshot. Look at it",{"type":61,"tag":471,"props":532,"children":533},{},[534,547,552],{"type":61,"tag":498,"props":535,"children":536},{},[537,539,545],{"type":66,"value":538},"PNG files at the repo root (",{"type":61,"tag":80,"props":540,"children":542},{"className":541},[],[543],{"type":66,"value":544},"inspector-open.png",{"type":66,"value":546},")",{"type":61,"tag":498,"props":548,"children":549},{},[550],{"type":66,"value":551},"The screenshot path is wrong",{"type":61,"tag":498,"props":553,"children":554},{},[555,557],{"type":66,"value":556},"Write under ",{"type":61,"tag":80,"props":558,"children":560},{"className":559},[],[561],{"type":66,"value":320},{"type":61,"tag":471,"props":563,"children":564},{},[565,570,575],{"type":61,"tag":498,"props":566,"children":567},{},[568],{"type":66,"value":569},"\"The CSS looks correct, so the UI is done\"",{"type":61,"tag":498,"props":571,"children":572},{},[573],{"type":66,"value":574},"Overlay bugs do not show in source",{"type":61,"tag":498,"props":576,"children":577},{},[578],{"type":66,"value":579},"Screenshot the lab. Fix what the image shows",{"type":61,"tag":471,"props":581,"children":582},{},[583,588,593],{"type":61,"tag":498,"props":584,"children":585},{},[586],{"type":66,"value":587},"Vite started without the Nx target",{"type":61,"tag":498,"props":589,"children":590},{},[591],{"type":66,"value":592},"CSS watch is missing",{"type":61,"tag":498,"props":594,"children":595},{},[596,598],{"type":66,"value":597},"Use ",{"type":61,"tag":80,"props":599,"children":601},{"className":600},[],[602],{"type":66,"value":146},{"type":61,"tag":471,"props":604,"children":605},{},[606,611,616],{"type":61,"tag":498,"props":607,"children":608},{},[609],{"type":66,"value":610},"Port 5178 or a random port",{"type":61,"tag":498,"props":612,"children":613},{},[614],{"type":66,"value":615},"The lab pins 5177",{"type":61,"tag":498,"props":617,"children":618},{},[619],{"type":66,"value":620},"Free 5177. Do not pick another port",{"type":61,"tag":471,"props":622,"children":623},{},[624,629,634],{"type":61,"tag":498,"props":625,"children":626},{},[627],{"type":66,"value":628},"Workbench still running after the task",{"type":61,"tag":498,"props":630,"children":631},{},[632],{"type":66,"value":633},"Watchers leak memory on this machine",{"type":61,"tag":498,"props":635,"children":636},{},[637],{"type":66,"value":638},"Run Procedure 3",{"type":61,"tag":471,"props":640,"children":641},{},[642,654,659],{"type":61,"tag":498,"props":643,"children":644},{},[645,647,652],{"type":66,"value":646},"Pane added with no ",{"type":61,"tag":80,"props":648,"children":650},{"className":649},[],[651],{"type":66,"value":85},{"type":66,"value":653}," pass",{"type":61,"tag":498,"props":655,"children":656},{},[657],{"type":66,"value":658},"Docs Callout will drift",{"type":61,"tag":498,"props":660,"children":661},{},[662,664,669],{"type":66,"value":663},"Load ",{"type":61,"tag":80,"props":665,"children":667},{"className":666},[],[668],{"type":66,"value":85},{"type":66,"value":670}," in the same change",{"type":61,"tag":96,"props":672,"children":674},{"id":673},"error-handling",[675],{"type":66,"value":676},"Error Handling",{"type":61,"tag":132,"props":678,"children":679},{},[680,698,708,718,728,745,762],{"type":61,"tag":136,"props":681,"children":682},{},[683,689,691,697],{"type":61,"tag":684,"props":685,"children":686},"strong",{},[687],{"type":66,"value":688},"Port 5177 is in use",{"type":66,"value":690},": stop the leftover Inspector workbench on that port, then retry Procedure 1. Do not pick another port. The lab uses ",{"type":61,"tag":80,"props":692,"children":694},{"className":693},[],[695],{"type":66,"value":696},"strictPort",{"type":66,"value":229},{"type":61,"tag":136,"props":699,"children":700},{},[701,706],{"type":61,"tag":684,"props":702,"children":703},{},[704],{"type":66,"value":705},"No browser tool in this session",{"type":66,"value":707},": tell the user the session cannot see Inspector. Do not guess visual results from CSS or unit tests alone.",{"type":61,"tag":136,"props":709,"children":710},{},[711,716],{"type":61,"tag":684,"props":712,"children":713},{},[714],{"type":66,"value":715},"Lab is blank or the overlay is closed",{"type":66,"value":717},": wait for boot. Then screenshot the lab console Runtime line. If Runtime is not connected, fix the lab before UI edits.",{"type":61,"tag":136,"props":719,"children":720},{},[721,726],{"type":61,"tag":684,"props":722,"children":723},{},[724],{"type":66,"value":725},"Screenshot does not show the intended change",{"type":66,"value":727},": do not claim done. Reload, screenshot again, then fix the source.",{"type":61,"tag":136,"props":729,"children":730},{},[731,736,738,743],{"type":61,"tag":684,"props":732,"children":733},{},[734],{"type":66,"value":735},"HMR did not apply a source edit",{"type":66,"value":737},": reload ",{"type":61,"tag":80,"props":739,"children":741},{"className":740},[],[742],{"type":66,"value":240},{"type":66,"value":744}," with the same scenario query. Then screenshot.",{"type":61,"tag":136,"props":746,"children":747},{},[748,753,755,761],{"type":61,"tag":684,"props":749,"children":750},{},[751],{"type":66,"value":752},"Need a closed launcher or unread halo",{"type":66,"value":754},": open ",{"type":61,"tag":80,"props":756,"children":758},{"className":757},[],[759],{"type":66,"value":760},"http:\u002F\u002F127.0.0.1:5177\u002F?scenario=pro-enabled-existing&replay-notification=1",{"type":66,"value":229},{"type":61,"tag":136,"props":763,"children":764},{},[765,770],{"type":61,"tag":684,"props":766,"children":767},{},[768],{"type":66,"value":769},"Any unexpected error",{"type":66,"value":771},": halt and surface the raw error. Do not switch to a showcase app to work around the lab.",{"items":773,"total":871},[774,787,802,818,829,846,858],{"slug":775,"name":775,"fn":776,"description":777,"org":778,"tags":779,"stars":23,"repoUrl":24,"updatedAt":786},"a2ui-renderer","render declarative agent UI surfaces","Render A2UI (Agent-to-UI declarative surfaces) in CopilotKit v2. Enable the runtime via CopilotRuntime({ a2ui: {...} }), then enable the provider via \u003CCopilotKit a2ui={{ theme }}>. Auto-activates via \u002Finfo — do NOT manually pass renderActivityMessages. createA2UIMessageRenderer ships from @copilotkit\u002Freact-core\u002Fv2; low-level primitives (A2UIProvider, A2UIRenderer, createCatalog) ship from @copilotkit\u002Fa2ui-renderer. Covers theme customization, createSurface dedup, action-bridge try\u002Ffinally cleanup. Load when an agent emits A2UI operations (createSurface \u002F updateComponents \u002F updateDataModel), when wiring a2ui on CopilotRuntime, or when styling A2UI surfaces.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[780,781,784,785],{"name":9,"slug":8,"type":13},{"name":782,"slug":783,"type":13},"Design","design",{"name":18,"slug":19,"type":13},{"name":15,"slug":16,"type":13},"2026-08-29T09:22:43.685488",{"slug":788,"name":788,"fn":789,"description":790,"org":791,"tags":792,"stars":23,"repoUrl":24,"updatedAt":801},"channels-setup","connect CopilotKit agents to communication channels","Use when a developer wants to build their first CopilotKit Channels agent and get it answering in Slack or Microsoft Teams — \"set up a channel\", \"connect my agent to Slack\", \"get my agent into Teams\", or starting from nothing and wanting a working channel end to end. Covers the whole path: inspecting or scaffolding the project, building the AG-UI agent, creating and reconciling the managed Channel with the public CopilotKit CLI, running the long-running host, and proving a real provider mention gets a reply. The workflow is not in this file — it is fetched from https:\u002F\u002Fcopilotkit.ai\u002Fchannels-guide.md at run time, so it cannot go stale against the CLI.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[793,795,798],{"name":794,"slug":32,"type":13},"Agents",{"name":796,"slug":797,"type":13},"Microsoft Teams","microsoft-teams",{"name":799,"slug":800,"type":13},"Slack","slack","2026-08-07T05:03:36.221418",{"slug":803,"name":803,"fn":804,"description":805,"org":806,"tags":807,"stars":23,"repoUrl":24,"updatedAt":817},"copilotkit-agui","build and debug CopilotKit agent backends","Use when building custom agent backends, implementing the AG-UI protocol, debugging streaming issues, or understanding how agents communicate with frontends. Covers event types, SSE transport, AbstractAgent\u002FHttpAgent patterns, state synchronization, tool calls, and human-in-the-loop flows.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[808,809,812,815,816],{"name":794,"slug":32,"type":13},{"name":810,"slug":811,"type":13},"API Development","api-development",{"name":813,"slug":814,"type":13},"Backend","backend",{"name":9,"slug":8,"type":13},{"name":21,"slug":22,"type":13},"2026-07-12T08:06:22.179755",{"slug":819,"name":819,"fn":820,"description":821,"org":822,"tags":823,"stars":23,"repoUrl":24,"updatedAt":828},"copilotkit-channels","configure CopilotKit intelligence channels","Use for the CODE half of a managed Intelligence Channel with Slack or Microsoft Teams: customising the Channel a CLI-scaffolded project already ships, or — for a project the CLI did not generate — writing the Channel declaration, the long-running host, and the awaited activation call. Teams provider setup is in scope, because the CLI or dashboard wizard performs it. Creating a Slack app for the first time is not: if no Slack app exists yet, use setup-slack-channel for the provider half and return here for the code.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[824,825,826,827],{"name":794,"slug":32,"type":13},{"name":9,"slug":8,"type":13},{"name":796,"slug":797,"type":13},{"name":799,"slug":800,"type":13},"2026-08-23T03:33:32.957057",{"slug":830,"name":830,"fn":831,"description":832,"org":833,"tags":834,"stars":23,"repoUrl":24,"updatedAt":845},"copilotkit-contribute","contribute to CopilotKit open-source project","Use when contributing to the CopilotKit open-source project — forking, cloning, setting up the monorepo, creating branches, running tests, and submitting pull requests against CopilotKit\u002FCopilotKit.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[835,836,839,842],{"name":9,"slug":8,"type":13},{"name":837,"slug":838,"type":13},"Engineering","engineering",{"name":840,"slug":841,"type":13},"GitHub","github",{"name":843,"slug":844,"type":13},"Pull Requests","pull-requests","2026-07-12T08:06:30.102192",{"slug":847,"name":847,"fn":848,"description":849,"org":850,"tags":851,"stars":23,"repoUrl":24,"updatedAt":857},"copilotkit-debug","diagnose and debug CopilotKit issues","Use when diagnosing CopilotKit issues -- runtime connectivity failures, agent not responding, streaming errors, tool execution problems, transcription failures, version mismatches, and AG-UI event tracing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[852,853,854],{"name":9,"slug":8,"type":13},{"name":21,"slug":22,"type":13},{"name":855,"slug":856,"type":13},"Observability","observability","2026-08-26T03:35:39.984056",{"slug":859,"name":859,"fn":860,"description":861,"org":862,"tags":863,"stars":23,"repoUrl":24,"updatedAt":870},"copilotkit-develop","build AI features with CopilotKit","Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[864,865,868,869],{"name":794,"slug":32,"type":13},{"name":866,"slug":867,"type":13},"AI Context","ai-context",{"name":9,"slug":8,"type":13},{"name":18,"slug":19,"type":13},"2026-08-26T03:35:42.08814",16,{"items":873,"total":984},[874,881,887,895,902,909,915,922,935,949,961,973],{"slug":775,"name":775,"fn":776,"description":777,"org":875,"tags":876,"stars":23,"repoUrl":24,"updatedAt":786},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[877,878,879,880],{"name":9,"slug":8,"type":13},{"name":782,"slug":783,"type":13},{"name":18,"slug":19,"type":13},{"name":15,"slug":16,"type":13},{"slug":788,"name":788,"fn":789,"description":790,"org":882,"tags":883,"stars":23,"repoUrl":24,"updatedAt":801},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[884,885,886],{"name":794,"slug":32,"type":13},{"name":796,"slug":797,"type":13},{"name":799,"slug":800,"type":13},{"slug":803,"name":803,"fn":804,"description":805,"org":888,"tags":889,"stars":23,"repoUrl":24,"updatedAt":817},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[890,891,892,893,894],{"name":794,"slug":32,"type":13},{"name":810,"slug":811,"type":13},{"name":813,"slug":814,"type":13},{"name":9,"slug":8,"type":13},{"name":21,"slug":22,"type":13},{"slug":819,"name":819,"fn":820,"description":821,"org":896,"tags":897,"stars":23,"repoUrl":24,"updatedAt":828},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[898,899,900,901],{"name":794,"slug":32,"type":13},{"name":9,"slug":8,"type":13},{"name":796,"slug":797,"type":13},{"name":799,"slug":800,"type":13},{"slug":830,"name":830,"fn":831,"description":832,"org":903,"tags":904,"stars":23,"repoUrl":24,"updatedAt":845},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[905,906,907,908],{"name":9,"slug":8,"type":13},{"name":837,"slug":838,"type":13},{"name":840,"slug":841,"type":13},{"name":843,"slug":844,"type":13},{"slug":847,"name":847,"fn":848,"description":849,"org":910,"tags":911,"stars":23,"repoUrl":24,"updatedAt":857},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[912,913,914],{"name":9,"slug":8,"type":13},{"name":21,"slug":22,"type":13},{"name":855,"slug":856,"type":13},{"slug":859,"name":859,"fn":860,"description":861,"org":916,"tags":917,"stars":23,"repoUrl":24,"updatedAt":870},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[918,919,920,921],{"name":794,"slug":32,"type":13},{"name":866,"slug":867,"type":13},{"name":9,"slug":8,"type":13},{"name":18,"slug":19,"type":13},{"slug":923,"name":923,"fn":924,"description":925,"org":926,"tags":927,"stars":23,"repoUrl":24,"updatedAt":934},"copilotkit-integrations","integrate agent frameworks into CopilotKit applications","Use when wiring an external agent framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, or others) into a CopilotKit application via the AG-UI protocol.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[928,929,930,931],{"name":794,"slug":32,"type":13},{"name":810,"slug":811,"type":13},{"name":9,"slug":8,"type":13},{"name":932,"slug":933,"type":13},"Integrations","integrations","2026-08-23T03:33:30.146807",{"slug":936,"name":936,"fn":937,"description":938,"org":939,"tags":940,"stars":23,"repoUrl":24,"updatedAt":948},"copilotkit-self-update","update CopilotKit agent skills","Use when the user wants to update, refresh, or reinstall the CopilotKit agent SKILLS (the SKILL.md files that teach this agent about CopilotKit). NOT for updating the CopilotKit codebase or project — this is specifically about refreshing the skills\u002Fknowledge this agent has loaded. Triggers on \"update copilotkit skills\", \"update skills\", \"refresh skills\", \"skills are stale\", \"skills are outdated\", \"get latest skills\", \"my copilotkit knowledge is wrong\", \"copilotkit APIs changed\", \"skills seem old\", \"wrong API names\", \"reinstall skills\", \"skills not working right\", \"update your copilotkit knowledge\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[941,942,945],{"name":9,"slug":8,"type":13},{"name":943,"slug":944,"type":13},"Documentation","documentation",{"name":946,"slug":947,"type":13},"Productivity","productivity","2026-07-12T08:06:31.345052",{"slug":950,"name":950,"fn":951,"description":952,"org":953,"tags":954,"stars":23,"repoUrl":24,"updatedAt":960},"copilotkit-setup","set up CopilotKit in projects","Use when adding CopilotKit to an existing project or bootstrapping a new CopilotKit project from scratch. Covers framework detection, package installation, runtime wiring (managed Intelligence or self-hosted SSE), provider setup, and first working chat integration.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[955,956,957],{"name":9,"slug":8,"type":13},{"name":18,"slug":19,"type":13},{"name":958,"slug":959,"type":13},"Onboarding","onboarding","2026-08-26T03:35:41.030153",{"slug":962,"name":962,"fn":963,"description":964,"org":965,"tags":966,"stars":23,"repoUrl":24,"updatedAt":972},"copilotkit-upgrade","migrate CopilotKit applications to v2","Use when migrating a CopilotKit v1 application to v2 -- updating package imports, replacing deprecated hooks and components, switching from GraphQL runtime to AG-UI protocol runtime, and resolving breaking API changes.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[967,968,969],{"name":9,"slug":8,"type":13},{"name":837,"slug":838,"type":13},{"name":970,"slug":971,"type":13},"Migration","migration","2026-07-12T08:06:26.949801",{"slug":85,"name":85,"fn":974,"description":975,"org":976,"tags":977,"stars":23,"repoUrl":24,"updatedAt":983},"manage CopilotKit documentation and Inspector panes","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\u002Fweb-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.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[978,979,980],{"name":9,"slug":8,"type":13},{"name":943,"slug":944,"type":13},{"name":981,"slug":982,"type":13},"Technical Writing","technical-writing","2026-08-29T09:22:41.695489",19]