[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-aws-labs-agui-author":3,"mdc-ywu7y1-key":36,"related-repo-aws-labs-agui-author":1527,"related-org-aws-labs-agui-author":1620},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":34,"mdContent":35},"agui-author","emit interactive dashboard UI components","Author live dashboard UI from an agent via the `emit_ui` MCP tool. Emit one of six allow-listed components (approval_card, choice_prompt, diff_summary, progress, metric, agent_card) with JSON props and it renders in any AG-UI client watching the fleet. Use when you want the operator to see a decision, a diff, or a status readout instead of scrolling terminal text. Arbitrary HTML\u002Fmarkup is refused.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"aws-labs","AWS Labs","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Faws-labs.png","awslabs",[13,17,20,23],{"name":14,"slug":15,"type":16},"Dashboards","dashboards","tag",{"name":18,"slug":19,"type":16},"MCP","mcp",{"name":21,"slug":22,"type":16},"Agents","agents",{"name":24,"slug":25,"type":16},"UI Components","ui-components",871,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fcli-agent-orchestrator","2026-07-22T05:35:50.851108",null,164,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":29},[],"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fcli-agent-orchestrator\u002Ftree\u002FHEAD\u002Fskills\u002Fagui-author","---\nname: agui-author\ndescription: Author live dashboard UI from an agent via the `emit_ui` MCP tool. Emit\n  one of six allow-listed components (approval_card, choice_prompt, diff_summary,\n  progress, metric, agent_card) with JSON props and it renders in any AG-UI client\n  watching the fleet. Use when you want the operator to see a decision, a diff, or a\n  status readout instead of scrolling terminal text. Arbitrary HTML\u002Fmarkup is refused.\n---\n\n# Authoring generative UI over AG-UI\n\nCAO exposes an **AG-UI** stream (`GET \u002Fagui\u002Fv1\u002Fstream`) that any dashboard —\nCopilotKit, the AG-UI Dojo, or a plain `EventSource` — renders\nwithout CAO-specific code. As an agent you can push a **declarative UI intent**\nonto that stream with the `emit_ui` MCP tool. The operator sees a rendered card,\nnot raw text — and because every provider's intents render uniformly, they can't\ntell (and don't need to) which CLI agent produced which card.\n\nThe surface must be enabled on the server (`CAO_AGUI_ENABLED=true` or\n`CAO_MCP_APPS_ENABLED=true` — the two surfaces share one event source). When it\nis disabled, `emit_ui` returns `{\"ok\": false, \"reason\": \"AG-UI surface disabled…\"}`\n— treat that as a no-op, not an error.\n\n## Safety model (why this is always safe to call)\n\nYou may emit **only** a closed allow-list of named components with JSON props.\nThere is **no HTML, no script, no `eval`, no iframe**. The intent is validated\n**server-side** against the allow-list before it reaches the stream:\n\n- An **off-list** component (e.g. `iframe`, `script`) is **refused** — the tool\n  raises a `ValueError`; nothing is rendered.\n- `props` must be **JSON-serializable** and are **bounded to 8 KB** — an oversized\n  or non-serializable payload is **rejected** at the `emit_ui` boundary (HTTP 400,\n  the tool raises a `ValueError`), so a bad payload never reaches the bus.\n- If the AG-UI surface is disabled on the server, the tool **degrades gracefully**\n  (no error) — so calling it is never fatal.\n- The AG-UI stream is **metadata-only by contract**: never put message bodies,\n  credentials, or file contents in props. Reference paths, not contents.\n\n## The tool\n\n```\nemit_ui(component: str, props: dict) -> {\"ok\", \"event_id\", \"component\"}\n```\n\n`component` must be one of: `approval_card`, `choice_prompt`, `diff_summary`,\n`progress`, `metric`, `agent_card`.\n\n## When to use which component\n\nProps below are what a conformant client renderer will display; unknown extra keys\nare ignored, not refused.\n\n| Component | Use it when… | Props |\n|---|---|---|\n| `approval_card` | you need a human to approve\u002Freject a risky action before you proceed | `title` (str), `detail` (str, optional), `risk` (`\"low\"`\u002F`\"medium\"`\u002F`\"high\"`, optional) |\n| `choice_prompt` | you want the operator to pick among options | `question` (str), `choices` (list of `{\"label\", \"value\"}` or plain strings) |\n| `diff_summary` | you changed files and want a compact review | `title` (str), `files` (list of `{\"path\", \"additions\", \"deletions\"}`) |\n| `progress` | a long step is running | `label` (str), `value` (0.0–1.0; omit for an indeterminate bar) |\n| `metric` | you want to surface a single number | `label` (str), `value` (str\u002Fnumber), `unit` (str, optional) |\n| `agent_card` | you want to advertise your identity\u002Fstatus in the fleet view | `name` (str), `provider` (str), `status` (str, optional) |\n\n## Examples\n\n```python\n# Gate a risky action on human approval.\nemit_ui(\"approval_card\", {\n    \"title\": \"Deploy to production?\",\n    \"detail\": \"3 files changed, 1 DB migration\",\n    \"risk\": \"high\",\n})\n\n# Ask the operator to choose.\nemit_ui(\"choice_prompt\", {\n    \"question\": \"Which base branch?\",\n    \"choices\": [{\"label\": \"main\", \"value\": \"main\"},\n                {\"label\": \"release\", \"value\": \"release\"}],\n})\n\n# Summarize a change set.\nemit_ui(\"diff_summary\", {\n    \"title\": \"Refactor auth\",\n    \"files\": [{\"path\": \"security\u002Fauth.py\", \"additions\": 74, \"deletions\": 3}],\n})\n\n# Show progress \u002F a metric \u002F your identity.\nemit_ui(\"progress\", {\"label\": \"Indexing repository\", \"value\": 0.42})\nemit_ui(\"metric\", {\"label\": \"tokens used\", \"value\": 12840, \"unit\": \"tok\"})\nemit_ui(\"agent_card\", {\"name\": \"reviewer\", \"provider\": \"claude_code\", \"status\": \"working\"})\n```\n\n## L2 constructs (Phase 2)\n\nThe AG-UI surface also exposes **L2 constructs** — higher-level projections that\nfold the raw event stream into structured views. As an agent you don't author L2\nconstructs, but you should know they exist because your `emit_ui` intents feed\nthem:\n\n- **`SupervisorDashboardStream`** — folds `STATE_SNAPSHOT`\u002F`STATE_DELTA` + your\n  `agent_card` emits into a live fleet hierarchy view.\n- **`MultiAgentSessionTimeline`** — reconstructs delegation\u002Fmessage timeline\n  from `TOOL_CALL` lifecycle events.\n- **`AgentHandoffWithApproval`** — the full interrupt lifecycle: provider prompt\n  → reason classification → interrupt → approve\u002Fdeny\u002Fedit → delivery.\n- **`CrossProviderStateSync`** — convergence proof across providers.\n\nThe **run plane** (`POST \u002Fagui\u002Fv1\u002Frun`) streams these as stock AG-UI wire frames.\nInterrupts (approval prompts) route through `POST \u002Fagui\u002Fv1\u002Finterrupts\u002F{id}\u002Fresume`.\n\nFor details: [references\u002Fl2-constructs.md](references\u002Fl2-constructs.md) and\n[references\u002Frun-plane.md](references\u002Frun-plane.md).\n\n## Gotchas\n\n1. **Emitting to a disabled surface** — if `CAO_AGUI_ENABLED` is unset, `emit_ui`\n   returns `{\"ok\": false}` gracefully. Don't treat this as an error or retry — it's\n   a no-op by design. The fix: always check `ok` in the return but never fail on it.\n\n2. **Props over 8 KB are rejected** — the tool raises a `ValueError` and nothing\n   renders. The fix: reference file paths instead of embedding content. Keep props\n   to metadata (paths, counts, labels).\n\n3. **No HTML sink exists** — strings in props render as plain text. Attempting to\n   smuggle markup through props (e.g. `\u003Cscript>`, `\u003Ciframe>`) won't render and\n   looks broken. The fix: use structured props, not markup.\n\n4. **One intent per meaningful moment** — emitting a `progress` card on every\n   token or tool call floods the stream and degrades client rendering. The fix:\n   emit at milestones (start, 25%, 50%, 75%, done) or once per logical phase.\n\n5. **`approval_card` is display-only today** — it gives the operator an\n   approve\u002Freject affordance in the dashboard, but the action routes to the\n   dashboard's command surface, not back to you. The fix: pair it with your\n   provider's own wait-for-input mechanism (e.g. Kiro's trust prompts, Claude\n   Code's permission dialog).\n\n6. **Off-list components are refused server-side** — the allow-list is fixed\n   (`approval_card`, `choice_prompt`, `diff_summary`, `progress`, `metric`,\n   `agent_card`). A typo or new component name returns HTTP 400. The fix: use\n   only the six listed names; check spelling.\n\n## Verifying locally\n\n```bash\n# 1. Server with the surface on\nCAO_AGUI_ENABLED=true uv run cao-server\n\n# 2. Watch the stream (SSE frames print as they arrive)\ncurl -N 'http:\u002F\u002Flocalhost:9889\u002Fagui\u002Fv1\u002Fstream'\n\n# 3. Emit from anywhere (the MCP tool does exactly this)\ncurl -sX POST http:\u002F\u002Flocalhost:9889\u002Fagui\u002Fv1\u002Femit_ui \\\n  -H 'Content-Type: application\u002Fjson' \\\n  -d '{\"component\":\"progress\",\"props\":{\"label\":\"demo\",\"value\":0.5}}'\n```\n\nA `GENERATIVE_UI` frame with your component appears on the stream; an off-list\ncomponent is refused with HTTP 400.\n\n## See also\n\n- `examples\u002Fag-ui\u002Fag-ui-dashboard\u002F` — a runnable demo (`run.sh` + `showcase.sh`) that\n  drives all six components live and shows the off-list refusal.\n- `docs\u002Fagui.md` — the AG-UI stream and generative-UI reference.\n- **`cao-mcp-apps` skill** — operate and extend the MCP Apps surface that renders\n  your `emit_ui` intents inside host dashboards (Claude Desktop, VS Code, etc.).\n- **`mcp-apps-builder` skill** — build new MCP App views that consume the AG-UI\n  stream your emits feed into.\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,50,96,132,139,173,291,297,309,364,370,375,670,676,900,906,925,1014,1040,1059,1065,1231,1237,1423,1436,1442,1521],{"type":42,"tag":43,"props":44,"children":46},"element","h1",{"id":45},"authoring-generative-ui-over-ag-ui",[47],{"type":48,"value":49},"text","Authoring generative UI over AG-UI",{"type":42,"tag":51,"props":52,"children":53},"p",{},[54,56,62,64,71,73,79,81,86,88,94],{"type":48,"value":55},"CAO exposes an ",{"type":42,"tag":57,"props":58,"children":59},"strong",{},[60],{"type":48,"value":61},"AG-UI",{"type":48,"value":63}," stream (",{"type":42,"tag":65,"props":66,"children":68},"code",{"className":67},[],[69],{"type":48,"value":70},"GET \u002Fagui\u002Fv1\u002Fstream",{"type":48,"value":72},") that any dashboard —\nCopilotKit, the AG-UI Dojo, or a plain ",{"type":42,"tag":65,"props":74,"children":76},{"className":75},[],[77],{"type":48,"value":78},"EventSource",{"type":48,"value":80}," — renders\nwithout CAO-specific code. As an agent you can push a ",{"type":42,"tag":57,"props":82,"children":83},{},[84],{"type":48,"value":85},"declarative UI intent",{"type":48,"value":87},"\nonto that stream with the ",{"type":42,"tag":65,"props":89,"children":91},{"className":90},[],[92],{"type":48,"value":93},"emit_ui",{"type":48,"value":95}," MCP tool. The operator sees a rendered card,\nnot raw text — and because every provider's intents render uniformly, they can't\ntell (and don't need to) which CLI agent produced which card.",{"type":42,"tag":51,"props":97,"children":98},{},[99,101,107,109,115,117,122,124,130],{"type":48,"value":100},"The surface must be enabled on the server (",{"type":42,"tag":65,"props":102,"children":104},{"className":103},[],[105],{"type":48,"value":106},"CAO_AGUI_ENABLED=true",{"type":48,"value":108}," or\n",{"type":42,"tag":65,"props":110,"children":112},{"className":111},[],[113],{"type":48,"value":114},"CAO_MCP_APPS_ENABLED=true",{"type":48,"value":116}," — the two surfaces share one event source). When it\nis disabled, ",{"type":42,"tag":65,"props":118,"children":120},{"className":119},[],[121],{"type":48,"value":93},{"type":48,"value":123}," returns ",{"type":42,"tag":65,"props":125,"children":127},{"className":126},[],[128],{"type":48,"value":129},"{\"ok\": false, \"reason\": \"AG-UI surface disabled…\"}",{"type":48,"value":131},"\n— treat that as a no-op, not an error.",{"type":42,"tag":133,"props":134,"children":136},"h2",{"id":135},"safety-model-why-this-is-always-safe-to-call",[137],{"type":48,"value":138},"Safety model (why this is always safe to call)",{"type":42,"tag":51,"props":140,"children":141},{},[142,144,149,151,164,166,171],{"type":48,"value":143},"You may emit ",{"type":42,"tag":57,"props":145,"children":146},{},[147],{"type":48,"value":148},"only",{"type":48,"value":150}," a closed allow-list of named components with JSON props.\nThere is ",{"type":42,"tag":57,"props":152,"children":153},{},[154,156,162],{"type":48,"value":155},"no HTML, no script, no ",{"type":42,"tag":65,"props":157,"children":159},{"className":158},[],[160],{"type":48,"value":161},"eval",{"type":48,"value":163},", no iframe",{"type":48,"value":165},". The intent is validated\n",{"type":42,"tag":57,"props":167,"children":168},{},[169],{"type":48,"value":170},"server-side",{"type":48,"value":172}," against the allow-list before it reaches the stream:",{"type":42,"tag":174,"props":175,"children":176},"ul",{},[177,221,267,279],{"type":42,"tag":178,"props":179,"children":180},"li",{},[181,183,188,190,196,198,204,206,211,213,219],{"type":48,"value":182},"An ",{"type":42,"tag":57,"props":184,"children":185},{},[186],{"type":48,"value":187},"off-list",{"type":48,"value":189}," component (e.g. ",{"type":42,"tag":65,"props":191,"children":193},{"className":192},[],[194],{"type":48,"value":195},"iframe",{"type":48,"value":197},", ",{"type":42,"tag":65,"props":199,"children":201},{"className":200},[],[202],{"type":48,"value":203},"script",{"type":48,"value":205},") is ",{"type":42,"tag":57,"props":207,"children":208},{},[209],{"type":48,"value":210},"refused",{"type":48,"value":212}," — the tool\nraises a ",{"type":42,"tag":65,"props":214,"children":216},{"className":215},[],[217],{"type":48,"value":218},"ValueError",{"type":48,"value":220},"; nothing is rendered.",{"type":42,"tag":178,"props":222,"children":223},{},[224,230,232,237,239,244,246,251,253,258,260,265],{"type":42,"tag":65,"props":225,"children":227},{"className":226},[],[228],{"type":48,"value":229},"props",{"type":48,"value":231}," must be ",{"type":42,"tag":57,"props":233,"children":234},{},[235],{"type":48,"value":236},"JSON-serializable",{"type":48,"value":238}," and are ",{"type":42,"tag":57,"props":240,"children":241},{},[242],{"type":48,"value":243},"bounded to 8 KB",{"type":48,"value":245}," — an oversized\nor non-serializable payload is ",{"type":42,"tag":57,"props":247,"children":248},{},[249],{"type":48,"value":250},"rejected",{"type":48,"value":252}," at the ",{"type":42,"tag":65,"props":254,"children":256},{"className":255},[],[257],{"type":48,"value":93},{"type":48,"value":259}," boundary (HTTP 400,\nthe tool raises a ",{"type":42,"tag":65,"props":261,"children":263},{"className":262},[],[264],{"type":48,"value":218},{"type":48,"value":266},"), so a bad payload never reaches the bus.",{"type":42,"tag":178,"props":268,"children":269},{},[270,272,277],{"type":48,"value":271},"If the AG-UI surface is disabled on the server, the tool ",{"type":42,"tag":57,"props":273,"children":274},{},[275],{"type":48,"value":276},"degrades gracefully",{"type":48,"value":278},"\n(no error) — so calling it is never fatal.",{"type":42,"tag":178,"props":280,"children":281},{},[282,284,289],{"type":48,"value":283},"The AG-UI stream is ",{"type":42,"tag":57,"props":285,"children":286},{},[287],{"type":48,"value":288},"metadata-only by contract",{"type":48,"value":290},": never put message bodies,\ncredentials, or file contents in props. Reference paths, not contents.",{"type":42,"tag":133,"props":292,"children":294},{"id":293},"the-tool",[295],{"type":48,"value":296},"The tool",{"type":42,"tag":298,"props":299,"children":303},"pre",{"className":300,"code":302,"language":48},[301],"language-text","emit_ui(component: str, props: dict) -> {\"ok\", \"event_id\", \"component\"}\n",[304],{"type":42,"tag":65,"props":305,"children":307},{"__ignoreMap":306},"",[308],{"type":48,"value":302},{"type":42,"tag":51,"props":310,"children":311},{},[312,318,320,326,327,333,334,340,342,348,349,355,356,362],{"type":42,"tag":65,"props":313,"children":315},{"className":314},[],[316],{"type":48,"value":317},"component",{"type":48,"value":319}," must be one of: ",{"type":42,"tag":65,"props":321,"children":323},{"className":322},[],[324],{"type":48,"value":325},"approval_card",{"type":48,"value":197},{"type":42,"tag":65,"props":328,"children":330},{"className":329},[],[331],{"type":48,"value":332},"choice_prompt",{"type":48,"value":197},{"type":42,"tag":65,"props":335,"children":337},{"className":336},[],[338],{"type":48,"value":339},"diff_summary",{"type":48,"value":341},",\n",{"type":42,"tag":65,"props":343,"children":345},{"className":344},[],[346],{"type":48,"value":347},"progress",{"type":48,"value":197},{"type":42,"tag":65,"props":350,"children":352},{"className":351},[],[353],{"type":48,"value":354},"metric",{"type":48,"value":197},{"type":42,"tag":65,"props":357,"children":359},{"className":358},[],[360],{"type":48,"value":361},"agent_card",{"type":48,"value":363},".",{"type":42,"tag":133,"props":365,"children":367},{"id":366},"when-to-use-which-component",[368],{"type":48,"value":369},"When to use which component",{"type":42,"tag":51,"props":371,"children":372},{},[373],{"type":48,"value":374},"Props below are what a conformant client renderer will display; unknown extra keys\nare ignored, not refused.",{"type":42,"tag":376,"props":377,"children":378},"table",{},[379,403],{"type":42,"tag":380,"props":381,"children":382},"thead",{},[383],{"type":42,"tag":384,"props":385,"children":386},"tr",{},[387,393,398],{"type":42,"tag":388,"props":389,"children":390},"th",{},[391],{"type":48,"value":392},"Component",{"type":42,"tag":388,"props":394,"children":395},{},[396],{"type":48,"value":397},"Use it when…",{"type":42,"tag":388,"props":399,"children":400},{},[401],{"type":48,"value":402},"Props",{"type":42,"tag":404,"props":405,"children":406},"tbody",{},[407,474,516,556,590,630],{"type":42,"tag":384,"props":408,"children":409},{},[410,419,424],{"type":42,"tag":411,"props":412,"children":413},"td",{},[414],{"type":42,"tag":65,"props":415,"children":417},{"className":416},[],[418],{"type":48,"value":325},{"type":42,"tag":411,"props":420,"children":421},{},[422],{"type":48,"value":423},"you need a human to approve\u002Freject a risky action before you proceed",{"type":42,"tag":411,"props":425,"children":426},{},[427,433,435,441,443,449,451,457,459,465,466,472],{"type":42,"tag":65,"props":428,"children":430},{"className":429},[],[431],{"type":48,"value":432},"title",{"type":48,"value":434}," (str), ",{"type":42,"tag":65,"props":436,"children":438},{"className":437},[],[439],{"type":48,"value":440},"detail",{"type":48,"value":442}," (str, optional), ",{"type":42,"tag":65,"props":444,"children":446},{"className":445},[],[447],{"type":48,"value":448},"risk",{"type":48,"value":450}," (",{"type":42,"tag":65,"props":452,"children":454},{"className":453},[],[455],{"type":48,"value":456},"\"low\"",{"type":48,"value":458},"\u002F",{"type":42,"tag":65,"props":460,"children":462},{"className":461},[],[463],{"type":48,"value":464},"\"medium\"",{"type":48,"value":458},{"type":42,"tag":65,"props":467,"children":469},{"className":468},[],[470],{"type":48,"value":471},"\"high\"",{"type":48,"value":473},", optional)",{"type":42,"tag":384,"props":475,"children":476},{},[477,485,490],{"type":42,"tag":411,"props":478,"children":479},{},[480],{"type":42,"tag":65,"props":481,"children":483},{"className":482},[],[484],{"type":48,"value":332},{"type":42,"tag":411,"props":486,"children":487},{},[488],{"type":48,"value":489},"you want the operator to pick among options",{"type":42,"tag":411,"props":491,"children":492},{},[493,499,500,506,508,514],{"type":42,"tag":65,"props":494,"children":496},{"className":495},[],[497],{"type":48,"value":498},"question",{"type":48,"value":434},{"type":42,"tag":65,"props":501,"children":503},{"className":502},[],[504],{"type":48,"value":505},"choices",{"type":48,"value":507}," (list of ",{"type":42,"tag":65,"props":509,"children":511},{"className":510},[],[512],{"type":48,"value":513},"{\"label\", \"value\"}",{"type":48,"value":515}," or plain strings)",{"type":42,"tag":384,"props":517,"children":518},{},[519,527,532],{"type":42,"tag":411,"props":520,"children":521},{},[522],{"type":42,"tag":65,"props":523,"children":525},{"className":524},[],[526],{"type":48,"value":339},{"type":42,"tag":411,"props":528,"children":529},{},[530],{"type":48,"value":531},"you changed files and want a compact review",{"type":42,"tag":411,"props":533,"children":534},{},[535,540,541,547,548,554],{"type":42,"tag":65,"props":536,"children":538},{"className":537},[],[539],{"type":48,"value":432},{"type":48,"value":434},{"type":42,"tag":65,"props":542,"children":544},{"className":543},[],[545],{"type":48,"value":546},"files",{"type":48,"value":507},{"type":42,"tag":65,"props":549,"children":551},{"className":550},[],[552],{"type":48,"value":553},"{\"path\", \"additions\", \"deletions\"}",{"type":48,"value":555},")",{"type":42,"tag":384,"props":557,"children":558},{},[559,567,572],{"type":42,"tag":411,"props":560,"children":561},{},[562],{"type":42,"tag":65,"props":563,"children":565},{"className":564},[],[566],{"type":48,"value":347},{"type":42,"tag":411,"props":568,"children":569},{},[570],{"type":48,"value":571},"a long step is running",{"type":42,"tag":411,"props":573,"children":574},{},[575,581,582,588],{"type":42,"tag":65,"props":576,"children":578},{"className":577},[],[579],{"type":48,"value":580},"label",{"type":48,"value":434},{"type":42,"tag":65,"props":583,"children":585},{"className":584},[],[586],{"type":48,"value":587},"value",{"type":48,"value":589}," (0.0–1.0; omit for an indeterminate bar)",{"type":42,"tag":384,"props":591,"children":592},{},[593,601,606],{"type":42,"tag":411,"props":594,"children":595},{},[596],{"type":42,"tag":65,"props":597,"children":599},{"className":598},[],[600],{"type":48,"value":354},{"type":42,"tag":411,"props":602,"children":603},{},[604],{"type":48,"value":605},"you want to surface a single number",{"type":42,"tag":411,"props":607,"children":608},{},[609,614,615,620,622,628],{"type":42,"tag":65,"props":610,"children":612},{"className":611},[],[613],{"type":48,"value":580},{"type":48,"value":434},{"type":42,"tag":65,"props":616,"children":618},{"className":617},[],[619],{"type":48,"value":587},{"type":48,"value":621}," (str\u002Fnumber), ",{"type":42,"tag":65,"props":623,"children":625},{"className":624},[],[626],{"type":48,"value":627},"unit",{"type":48,"value":629}," (str, optional)",{"type":42,"tag":384,"props":631,"children":632},{},[633,641,646],{"type":42,"tag":411,"props":634,"children":635},{},[636],{"type":42,"tag":65,"props":637,"children":639},{"className":638},[],[640],{"type":48,"value":361},{"type":42,"tag":411,"props":642,"children":643},{},[644],{"type":48,"value":645},"you want to advertise your identity\u002Fstatus in the fleet view",{"type":42,"tag":411,"props":647,"children":648},{},[649,655,656,662,663,669],{"type":42,"tag":65,"props":650,"children":652},{"className":651},[],[653],{"type":48,"value":654},"name",{"type":48,"value":434},{"type":42,"tag":65,"props":657,"children":659},{"className":658},[],[660],{"type":48,"value":661},"provider",{"type":48,"value":434},{"type":42,"tag":65,"props":664,"children":666},{"className":665},[],[667],{"type":48,"value":668},"status",{"type":48,"value":629},{"type":42,"tag":133,"props":671,"children":673},{"id":672},"examples",[674],{"type":48,"value":675},"Examples",{"type":42,"tag":298,"props":677,"children":681},{"className":678,"code":679,"language":680,"meta":306,"style":306},"language-python shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Gate a risky action on human approval.\nemit_ui(\"approval_card\", {\n    \"title\": \"Deploy to production?\",\n    \"detail\": \"3 files changed, 1 DB migration\",\n    \"risk\": \"high\",\n})\n\n# Ask the operator to choose.\nemit_ui(\"choice_prompt\", {\n    \"question\": \"Which base branch?\",\n    \"choices\": [{\"label\": \"main\", \"value\": \"main\"},\n                {\"label\": \"release\", \"value\": \"release\"}],\n})\n\n# Summarize a change set.\nemit_ui(\"diff_summary\", {\n    \"title\": \"Refactor auth\",\n    \"files\": [{\"path\": \"security\u002Fauth.py\", \"additions\": 74, \"deletions\": 3}],\n})\n\n# Show progress \u002F a metric \u002F your identity.\nemit_ui(\"progress\", {\"label\": \"Indexing repository\", \"value\": 0.42})\nemit_ui(\"metric\", {\"label\": \"tokens used\", \"value\": 12840, \"unit\": \"tok\"})\nemit_ui(\"agent_card\", {\"name\": \"reviewer\", \"provider\": \"claude_code\", \"status\": \"working\"})\n","python",[682],{"type":42,"tag":65,"props":683,"children":684},{"__ignoreMap":306},[685,696,705,714,723,732,741,751,760,769,778,787,796,804,812,821,830,839,848,856,864,873,882,891],{"type":42,"tag":686,"props":687,"children":690},"span",{"class":688,"line":689},"line",1,[691],{"type":42,"tag":686,"props":692,"children":693},{},[694],{"type":48,"value":695},"# Gate a risky action on human approval.\n",{"type":42,"tag":686,"props":697,"children":699},{"class":688,"line":698},2,[700],{"type":42,"tag":686,"props":701,"children":702},{},[703],{"type":48,"value":704},"emit_ui(\"approval_card\", {\n",{"type":42,"tag":686,"props":706,"children":708},{"class":688,"line":707},3,[709],{"type":42,"tag":686,"props":710,"children":711},{},[712],{"type":48,"value":713},"    \"title\": \"Deploy to production?\",\n",{"type":42,"tag":686,"props":715,"children":717},{"class":688,"line":716},4,[718],{"type":42,"tag":686,"props":719,"children":720},{},[721],{"type":48,"value":722},"    \"detail\": \"3 files changed, 1 DB migration\",\n",{"type":42,"tag":686,"props":724,"children":726},{"class":688,"line":725},5,[727],{"type":42,"tag":686,"props":728,"children":729},{},[730],{"type":48,"value":731},"    \"risk\": \"high\",\n",{"type":42,"tag":686,"props":733,"children":735},{"class":688,"line":734},6,[736],{"type":42,"tag":686,"props":737,"children":738},{},[739],{"type":48,"value":740},"})\n",{"type":42,"tag":686,"props":742,"children":744},{"class":688,"line":743},7,[745],{"type":42,"tag":686,"props":746,"children":748},{"emptyLinePlaceholder":747},true,[749],{"type":48,"value":750},"\n",{"type":42,"tag":686,"props":752,"children":754},{"class":688,"line":753},8,[755],{"type":42,"tag":686,"props":756,"children":757},{},[758],{"type":48,"value":759},"# Ask the operator to choose.\n",{"type":42,"tag":686,"props":761,"children":763},{"class":688,"line":762},9,[764],{"type":42,"tag":686,"props":765,"children":766},{},[767],{"type":48,"value":768},"emit_ui(\"choice_prompt\", {\n",{"type":42,"tag":686,"props":770,"children":772},{"class":688,"line":771},10,[773],{"type":42,"tag":686,"props":774,"children":775},{},[776],{"type":48,"value":777},"    \"question\": \"Which base branch?\",\n",{"type":42,"tag":686,"props":779,"children":781},{"class":688,"line":780},11,[782],{"type":42,"tag":686,"props":783,"children":784},{},[785],{"type":48,"value":786},"    \"choices\": [{\"label\": \"main\", \"value\": \"main\"},\n",{"type":42,"tag":686,"props":788,"children":790},{"class":688,"line":789},12,[791],{"type":42,"tag":686,"props":792,"children":793},{},[794],{"type":48,"value":795},"                {\"label\": \"release\", \"value\": \"release\"}],\n",{"type":42,"tag":686,"props":797,"children":799},{"class":688,"line":798},13,[800],{"type":42,"tag":686,"props":801,"children":802},{},[803],{"type":48,"value":740},{"type":42,"tag":686,"props":805,"children":807},{"class":688,"line":806},14,[808],{"type":42,"tag":686,"props":809,"children":810},{"emptyLinePlaceholder":747},[811],{"type":48,"value":750},{"type":42,"tag":686,"props":813,"children":815},{"class":688,"line":814},15,[816],{"type":42,"tag":686,"props":817,"children":818},{},[819],{"type":48,"value":820},"# Summarize a change set.\n",{"type":42,"tag":686,"props":822,"children":824},{"class":688,"line":823},16,[825],{"type":42,"tag":686,"props":826,"children":827},{},[828],{"type":48,"value":829},"emit_ui(\"diff_summary\", {\n",{"type":42,"tag":686,"props":831,"children":833},{"class":688,"line":832},17,[834],{"type":42,"tag":686,"props":835,"children":836},{},[837],{"type":48,"value":838},"    \"title\": \"Refactor auth\",\n",{"type":42,"tag":686,"props":840,"children":842},{"class":688,"line":841},18,[843],{"type":42,"tag":686,"props":844,"children":845},{},[846],{"type":48,"value":847},"    \"files\": [{\"path\": \"security\u002Fauth.py\", \"additions\": 74, \"deletions\": 3}],\n",{"type":42,"tag":686,"props":849,"children":851},{"class":688,"line":850},19,[852],{"type":42,"tag":686,"props":853,"children":854},{},[855],{"type":48,"value":740},{"type":42,"tag":686,"props":857,"children":859},{"class":688,"line":858},20,[860],{"type":42,"tag":686,"props":861,"children":862},{"emptyLinePlaceholder":747},[863],{"type":48,"value":750},{"type":42,"tag":686,"props":865,"children":867},{"class":688,"line":866},21,[868],{"type":42,"tag":686,"props":869,"children":870},{},[871],{"type":48,"value":872},"# Show progress \u002F a metric \u002F your identity.\n",{"type":42,"tag":686,"props":874,"children":876},{"class":688,"line":875},22,[877],{"type":42,"tag":686,"props":878,"children":879},{},[880],{"type":48,"value":881},"emit_ui(\"progress\", {\"label\": \"Indexing repository\", \"value\": 0.42})\n",{"type":42,"tag":686,"props":883,"children":885},{"class":688,"line":884},23,[886],{"type":42,"tag":686,"props":887,"children":888},{},[889],{"type":48,"value":890},"emit_ui(\"metric\", {\"label\": \"tokens used\", \"value\": 12840, \"unit\": \"tok\"})\n",{"type":42,"tag":686,"props":892,"children":894},{"class":688,"line":893},24,[895],{"type":42,"tag":686,"props":896,"children":897},{},[898],{"type":48,"value":899},"emit_ui(\"agent_card\", {\"name\": \"reviewer\", \"provider\": \"claude_code\", \"status\": \"working\"})\n",{"type":42,"tag":133,"props":901,"children":903},{"id":902},"l2-constructs-phase-2",[904],{"type":48,"value":905},"L2 constructs (Phase 2)",{"type":42,"tag":51,"props":907,"children":908},{},[909,911,916,918,923],{"type":48,"value":910},"The AG-UI surface also exposes ",{"type":42,"tag":57,"props":912,"children":913},{},[914],{"type":48,"value":915},"L2 constructs",{"type":48,"value":917}," — higher-level projections that\nfold the raw event stream into structured views. As an agent you don't author L2\nconstructs, but you should know they exist because your ",{"type":42,"tag":65,"props":919,"children":921},{"className":920},[],[922],{"type":48,"value":93},{"type":48,"value":924}," intents feed\nthem:",{"type":42,"tag":174,"props":926,"children":927},{},[928,964,986,1000],{"type":42,"tag":178,"props":929,"children":930},{},[931,940,942,948,949,955,957,962],{"type":42,"tag":57,"props":932,"children":933},{},[934],{"type":42,"tag":65,"props":935,"children":937},{"className":936},[],[938],{"type":48,"value":939},"SupervisorDashboardStream",{"type":48,"value":941}," — folds ",{"type":42,"tag":65,"props":943,"children":945},{"className":944},[],[946],{"type":48,"value":947},"STATE_SNAPSHOT",{"type":48,"value":458},{"type":42,"tag":65,"props":950,"children":952},{"className":951},[],[953],{"type":48,"value":954},"STATE_DELTA",{"type":48,"value":956}," + your\n",{"type":42,"tag":65,"props":958,"children":960},{"className":959},[],[961],{"type":48,"value":361},{"type":48,"value":963}," emits into a live fleet hierarchy view.",{"type":42,"tag":178,"props":965,"children":966},{},[967,976,978,984],{"type":42,"tag":57,"props":968,"children":969},{},[970],{"type":42,"tag":65,"props":971,"children":973},{"className":972},[],[974],{"type":48,"value":975},"MultiAgentSessionTimeline",{"type":48,"value":977}," — reconstructs delegation\u002Fmessage timeline\nfrom ",{"type":42,"tag":65,"props":979,"children":981},{"className":980},[],[982],{"type":48,"value":983},"TOOL_CALL",{"type":48,"value":985}," lifecycle events.",{"type":42,"tag":178,"props":987,"children":988},{},[989,998],{"type":42,"tag":57,"props":990,"children":991},{},[992],{"type":42,"tag":65,"props":993,"children":995},{"className":994},[],[996],{"type":48,"value":997},"AgentHandoffWithApproval",{"type":48,"value":999}," — the full interrupt lifecycle: provider prompt\n→ reason classification → interrupt → approve\u002Fdeny\u002Fedit → delivery.",{"type":42,"tag":178,"props":1001,"children":1002},{},[1003,1012],{"type":42,"tag":57,"props":1004,"children":1005},{},[1006],{"type":42,"tag":65,"props":1007,"children":1009},{"className":1008},[],[1010],{"type":48,"value":1011},"CrossProviderStateSync",{"type":48,"value":1013}," — convergence proof across providers.",{"type":42,"tag":51,"props":1015,"children":1016},{},[1017,1019,1024,1025,1031,1033,1039],{"type":48,"value":1018},"The ",{"type":42,"tag":57,"props":1020,"children":1021},{},[1022],{"type":48,"value":1023},"run plane",{"type":48,"value":450},{"type":42,"tag":65,"props":1026,"children":1028},{"className":1027},[],[1029],{"type":48,"value":1030},"POST \u002Fagui\u002Fv1\u002Frun",{"type":48,"value":1032},") streams these as stock AG-UI wire frames.\nInterrupts (approval prompts) route through ",{"type":42,"tag":65,"props":1034,"children":1036},{"className":1035},[],[1037],{"type":48,"value":1038},"POST \u002Fagui\u002Fv1\u002Finterrupts\u002F{id}\u002Fresume",{"type":48,"value":363},{"type":42,"tag":51,"props":1041,"children":1042},{},[1043,1045,1051,1053,1058],{"type":48,"value":1044},"For details: ",{"type":42,"tag":1046,"props":1047,"children":1049},"a",{"href":1048},"references\u002Fl2-constructs.md",[1050],{"type":48,"value":1048},{"type":48,"value":1052}," and\n",{"type":42,"tag":1046,"props":1054,"children":1056},{"href":1055},"references\u002Frun-plane.md",[1057],{"type":48,"value":1055},{"type":48,"value":363},{"type":42,"tag":133,"props":1060,"children":1062},{"id":1061},"gotchas",[1063],{"type":48,"value":1064},"Gotchas",{"type":42,"tag":1066,"props":1067,"children":1068},"ol",{},[1069,1110,1127,1152,1169,1184],{"type":42,"tag":178,"props":1070,"children":1071},{},[1072,1077,1079,1085,1087,1092,1094,1100,1102,1108],{"type":42,"tag":57,"props":1073,"children":1074},{},[1075],{"type":48,"value":1076},"Emitting to a disabled surface",{"type":48,"value":1078}," — if ",{"type":42,"tag":65,"props":1080,"children":1082},{"className":1081},[],[1083],{"type":48,"value":1084},"CAO_AGUI_ENABLED",{"type":48,"value":1086}," is unset, ",{"type":42,"tag":65,"props":1088,"children":1090},{"className":1089},[],[1091],{"type":48,"value":93},{"type":48,"value":1093},"\nreturns ",{"type":42,"tag":65,"props":1095,"children":1097},{"className":1096},[],[1098],{"type":48,"value":1099},"{\"ok\": false}",{"type":48,"value":1101}," gracefully. Don't treat this as an error or retry — it's\na no-op by design. The fix: always check ",{"type":42,"tag":65,"props":1103,"children":1105},{"className":1104},[],[1106],{"type":48,"value":1107},"ok",{"type":48,"value":1109}," in the return but never fail on it.",{"type":42,"tag":178,"props":1111,"children":1112},{},[1113,1118,1120,1125],{"type":42,"tag":57,"props":1114,"children":1115},{},[1116],{"type":48,"value":1117},"Props over 8 KB are rejected",{"type":48,"value":1119}," — the tool raises a ",{"type":42,"tag":65,"props":1121,"children":1123},{"className":1122},[],[1124],{"type":48,"value":218},{"type":48,"value":1126}," and nothing\nrenders. The fix: reference file paths instead of embedding content. Keep props\nto metadata (paths, counts, labels).",{"type":42,"tag":178,"props":1128,"children":1129},{},[1130,1135,1137,1143,1144,1150],{"type":42,"tag":57,"props":1131,"children":1132},{},[1133],{"type":48,"value":1134},"No HTML sink exists",{"type":48,"value":1136}," — strings in props render as plain text. Attempting to\nsmuggle markup through props (e.g. ",{"type":42,"tag":65,"props":1138,"children":1140},{"className":1139},[],[1141],{"type":48,"value":1142},"\u003Cscript>",{"type":48,"value":197},{"type":42,"tag":65,"props":1145,"children":1147},{"className":1146},[],[1148],{"type":48,"value":1149},"\u003Ciframe>",{"type":48,"value":1151},") won't render and\nlooks broken. The fix: use structured props, not markup.",{"type":42,"tag":178,"props":1153,"children":1154},{},[1155,1160,1162,1167],{"type":42,"tag":57,"props":1156,"children":1157},{},[1158],{"type":48,"value":1159},"One intent per meaningful moment",{"type":48,"value":1161}," — emitting a ",{"type":42,"tag":65,"props":1163,"children":1165},{"className":1164},[],[1166],{"type":48,"value":347},{"type":48,"value":1168}," card on every\ntoken or tool call floods the stream and degrades client rendering. The fix:\nemit at milestones (start, 25%, 50%, 75%, done) or once per logical phase.",{"type":42,"tag":178,"props":1170,"children":1171},{},[1172,1182],{"type":42,"tag":57,"props":1173,"children":1174},{},[1175,1180],{"type":42,"tag":65,"props":1176,"children":1178},{"className":1177},[],[1179],{"type":48,"value":325},{"type":48,"value":1181}," is display-only today",{"type":48,"value":1183}," — it gives the operator an\napprove\u002Freject affordance in the dashboard, but the action routes to the\ndashboard's command surface, not back to you. The fix: pair it with your\nprovider's own wait-for-input mechanism (e.g. Kiro's trust prompts, Claude\nCode's permission dialog).",{"type":42,"tag":178,"props":1185,"children":1186},{},[1187,1192,1194,1199,1200,1205,1206,1211,1212,1217,1218,1223,1224,1229],{"type":42,"tag":57,"props":1188,"children":1189},{},[1190],{"type":48,"value":1191},"Off-list components are refused server-side",{"type":48,"value":1193}," — the allow-list is fixed\n(",{"type":42,"tag":65,"props":1195,"children":1197},{"className":1196},[],[1198],{"type":48,"value":325},{"type":48,"value":197},{"type":42,"tag":65,"props":1201,"children":1203},{"className":1202},[],[1204],{"type":48,"value":332},{"type":48,"value":197},{"type":42,"tag":65,"props":1207,"children":1209},{"className":1208},[],[1210],{"type":48,"value":339},{"type":48,"value":197},{"type":42,"tag":65,"props":1213,"children":1215},{"className":1214},[],[1216],{"type":48,"value":347},{"type":48,"value":197},{"type":42,"tag":65,"props":1219,"children":1221},{"className":1220},[],[1222],{"type":48,"value":354},{"type":48,"value":341},{"type":42,"tag":65,"props":1225,"children":1227},{"className":1226},[],[1228],{"type":48,"value":361},{"type":48,"value":1230},"). A typo or new component name returns HTTP 400. The fix: use\nonly the six listed names; check spelling.",{"type":42,"tag":133,"props":1232,"children":1234},{"id":1233},"verifying-locally",[1235],{"type":48,"value":1236},"Verifying locally",{"type":42,"tag":298,"props":1238,"children":1242},{"className":1239,"code":1240,"language":1241,"meta":306,"style":306},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# 1. Server with the surface on\nCAO_AGUI_ENABLED=true uv run cao-server\n\n# 2. Watch the stream (SSE frames print as they arrive)\ncurl -N 'http:\u002F\u002Flocalhost:9889\u002Fagui\u002Fv1\u002Fstream'\n\n# 3. Emit from anywhere (the MCP tool does exactly this)\ncurl -sX POST http:\u002F\u002Flocalhost:9889\u002Fagui\u002Fv1\u002Femit_ui \\\n  -H 'Content-Type: application\u002Fjson' \\\n  -d '{\"component\":\"progress\",\"props\":{\"label\":\"demo\",\"value\":0.5}}'\n","bash",[1243],{"type":42,"tag":65,"props":1244,"children":1245},{"__ignoreMap":306},[1246,1255,1291,1298,1306,1334,1341,1349,1376,1402],{"type":42,"tag":686,"props":1247,"children":1248},{"class":688,"line":689},[1249],{"type":42,"tag":686,"props":1250,"children":1252},{"style":1251},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1253],{"type":48,"value":1254},"# 1. Server with the surface on\n",{"type":42,"tag":686,"props":1256,"children":1257},{"class":688,"line":698},[1258,1263,1269,1275,1281,1286],{"type":42,"tag":686,"props":1259,"children":1261},{"style":1260},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1262],{"type":48,"value":1084},{"type":42,"tag":686,"props":1264,"children":1266},{"style":1265},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1267],{"type":48,"value":1268},"=",{"type":42,"tag":686,"props":1270,"children":1272},{"style":1271},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1273],{"type":48,"value":1274},"true",{"type":42,"tag":686,"props":1276,"children":1278},{"style":1277},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1279],{"type":48,"value":1280}," uv",{"type":42,"tag":686,"props":1282,"children":1283},{"style":1271},[1284],{"type":48,"value":1285}," run",{"type":42,"tag":686,"props":1287,"children":1288},{"style":1271},[1289],{"type":48,"value":1290}," cao-server\n",{"type":42,"tag":686,"props":1292,"children":1293},{"class":688,"line":707},[1294],{"type":42,"tag":686,"props":1295,"children":1296},{"emptyLinePlaceholder":747},[1297],{"type":48,"value":750},{"type":42,"tag":686,"props":1299,"children":1300},{"class":688,"line":716},[1301],{"type":42,"tag":686,"props":1302,"children":1303},{"style":1251},[1304],{"type":48,"value":1305},"# 2. Watch the stream (SSE frames print as they arrive)\n",{"type":42,"tag":686,"props":1307,"children":1308},{"class":688,"line":725},[1309,1314,1319,1324,1329],{"type":42,"tag":686,"props":1310,"children":1311},{"style":1277},[1312],{"type":48,"value":1313},"curl",{"type":42,"tag":686,"props":1315,"children":1316},{"style":1271},[1317],{"type":48,"value":1318}," -N",{"type":42,"tag":686,"props":1320,"children":1321},{"style":1265},[1322],{"type":48,"value":1323}," '",{"type":42,"tag":686,"props":1325,"children":1326},{"style":1271},[1327],{"type":48,"value":1328},"http:\u002F\u002Flocalhost:9889\u002Fagui\u002Fv1\u002Fstream",{"type":42,"tag":686,"props":1330,"children":1331},{"style":1265},[1332],{"type":48,"value":1333},"'\n",{"type":42,"tag":686,"props":1335,"children":1336},{"class":688,"line":734},[1337],{"type":42,"tag":686,"props":1338,"children":1339},{"emptyLinePlaceholder":747},[1340],{"type":48,"value":750},{"type":42,"tag":686,"props":1342,"children":1343},{"class":688,"line":743},[1344],{"type":42,"tag":686,"props":1345,"children":1346},{"style":1251},[1347],{"type":48,"value":1348},"# 3. Emit from anywhere (the MCP tool does exactly this)\n",{"type":42,"tag":686,"props":1350,"children":1351},{"class":688,"line":753},[1352,1356,1361,1366,1371],{"type":42,"tag":686,"props":1353,"children":1354},{"style":1277},[1355],{"type":48,"value":1313},{"type":42,"tag":686,"props":1357,"children":1358},{"style":1271},[1359],{"type":48,"value":1360}," -sX",{"type":42,"tag":686,"props":1362,"children":1363},{"style":1271},[1364],{"type":48,"value":1365}," POST",{"type":42,"tag":686,"props":1367,"children":1368},{"style":1271},[1369],{"type":48,"value":1370}," http:\u002F\u002Flocalhost:9889\u002Fagui\u002Fv1\u002Femit_ui",{"type":42,"tag":686,"props":1372,"children":1373},{"style":1260},[1374],{"type":48,"value":1375}," \\\n",{"type":42,"tag":686,"props":1377,"children":1378},{"class":688,"line":762},[1379,1384,1388,1393,1398],{"type":42,"tag":686,"props":1380,"children":1381},{"style":1271},[1382],{"type":48,"value":1383},"  -H",{"type":42,"tag":686,"props":1385,"children":1386},{"style":1265},[1387],{"type":48,"value":1323},{"type":42,"tag":686,"props":1389,"children":1390},{"style":1271},[1391],{"type":48,"value":1392},"Content-Type: application\u002Fjson",{"type":42,"tag":686,"props":1394,"children":1395},{"style":1265},[1396],{"type":48,"value":1397},"'",{"type":42,"tag":686,"props":1399,"children":1400},{"style":1260},[1401],{"type":48,"value":1375},{"type":42,"tag":686,"props":1403,"children":1404},{"class":688,"line":771},[1405,1410,1414,1419],{"type":42,"tag":686,"props":1406,"children":1407},{"style":1271},[1408],{"type":48,"value":1409},"  -d",{"type":42,"tag":686,"props":1411,"children":1412},{"style":1265},[1413],{"type":48,"value":1323},{"type":42,"tag":686,"props":1415,"children":1416},{"style":1271},[1417],{"type":48,"value":1418},"{\"component\":\"progress\",\"props\":{\"label\":\"demo\",\"value\":0.5}}",{"type":42,"tag":686,"props":1420,"children":1421},{"style":1265},[1422],{"type":48,"value":1333},{"type":42,"tag":51,"props":1424,"children":1425},{},[1426,1428,1434],{"type":48,"value":1427},"A ",{"type":42,"tag":65,"props":1429,"children":1431},{"className":1430},[],[1432],{"type":48,"value":1433},"GENERATIVE_UI",{"type":48,"value":1435}," frame with your component appears on the stream; an off-list\ncomponent is refused with HTTP 400.",{"type":42,"tag":133,"props":1437,"children":1439},{"id":1438},"see-also",[1440],{"type":48,"value":1441},"See also",{"type":42,"tag":174,"props":1443,"children":1444},{},[1445,1472,1483,1506],{"type":42,"tag":178,"props":1446,"children":1447},{},[1448,1454,1456,1462,1464,1470],{"type":42,"tag":65,"props":1449,"children":1451},{"className":1450},[],[1452],{"type":48,"value":1453},"examples\u002Fag-ui\u002Fag-ui-dashboard\u002F",{"type":48,"value":1455}," — a runnable demo (",{"type":42,"tag":65,"props":1457,"children":1459},{"className":1458},[],[1460],{"type":48,"value":1461},"run.sh",{"type":48,"value":1463}," + ",{"type":42,"tag":65,"props":1465,"children":1467},{"className":1466},[],[1468],{"type":48,"value":1469},"showcase.sh",{"type":48,"value":1471},") that\ndrives all six components live and shows the off-list refusal.",{"type":42,"tag":178,"props":1473,"children":1474},{},[1475,1481],{"type":42,"tag":65,"props":1476,"children":1478},{"className":1477},[],[1479],{"type":48,"value":1480},"docs\u002Fagui.md",{"type":48,"value":1482}," — the AG-UI stream and generative-UI reference.",{"type":42,"tag":178,"props":1484,"children":1485},{},[1486,1497,1499,1504],{"type":42,"tag":57,"props":1487,"children":1488},{},[1489,1495],{"type":42,"tag":65,"props":1490,"children":1492},{"className":1491},[],[1493],{"type":48,"value":1494},"cao-mcp-apps",{"type":48,"value":1496}," skill",{"type":48,"value":1498}," — operate and extend the MCP Apps surface that renders\nyour ",{"type":42,"tag":65,"props":1500,"children":1502},{"className":1501},[],[1503],{"type":48,"value":93},{"type":48,"value":1505}," intents inside host dashboards (Claude Desktop, VS Code, etc.).",{"type":42,"tag":178,"props":1507,"children":1508},{},[1509,1519],{"type":42,"tag":57,"props":1510,"children":1511},{},[1512,1518],{"type":42,"tag":65,"props":1513,"children":1515},{"className":1514},[],[1516],{"type":48,"value":1517},"mcp-apps-builder",{"type":48,"value":1496},{"type":48,"value":1520}," — build new MCP App views that consume the AG-UI\nstream your emits feed into.",{"type":42,"tag":1522,"props":1523,"children":1524},"style",{},[1525],{"type":48,"value":1526},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1528,"total":823},[1529,1544,1551,1565,1581,1593,1607],{"slug":1530,"name":1530,"fn":1531,"description":1532,"org":1533,"tags":1534,"stars":26,"repoUrl":27,"updatedAt":1543},"add-app-to-server","add interactive UI to MCP servers","This skill should be used when the user asks to \"add an app to my MCP server\", \"add UI to my MCP server\", \"add a view to my MCP tool\", \"enrich MCP tools with UI\", \"add interactive UI to existing server\", \"add MCP Apps to my server\", or needs to add interactive UI capabilities to an existing MCP server that already has tools. Provides guidance for analyzing existing tools and adding MCP Apps UI resources.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1535,1538,1539,1542],{"name":1536,"slug":1537,"type":16},"Frontend","frontend",{"name":18,"slug":19,"type":16},{"name":1540,"slug":1541,"type":16},"Plugin Development","plugin-development",{"name":24,"slug":25,"type":16},"2026-07-12T08:41:40.4008",{"slug":4,"name":4,"fn":5,"description":6,"org":1545,"tags":1546,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1547,1548,1549,1550],{"name":21,"slug":22,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":24,"slug":25,"type":16},{"slug":1552,"name":1552,"fn":1553,"description":1554,"org":1555,"tags":1556,"stars":26,"repoUrl":27,"updatedAt":1564},"cao-agent-routing","route tasks to appropriate CAO agents","Find and select the best installed CAO agent profile for a task before delegating with assign or handoff. Use when a supervisor needs to route coding, documentation, infrastructure, review, research, or other specialist work and the user has not already chosen an agent profile.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1557,1558,1561],{"name":21,"slug":22,"type":16},{"name":1559,"slug":1560,"type":16},"AWS","aws",{"name":1562,"slug":1563,"type":16},"Orchestration","orchestration","2026-07-25T05:56:34.255071",{"slug":1566,"name":1566,"fn":1567,"description":1568,"org":1569,"tags":1570,"stars":26,"repoUrl":27,"updatedAt":1580},"cao-learning","report task outcomes and distill lessons","Report task outcomes and distill lessons so the team improves across runs — report_outcome after each unit of work, retrospector handoffs at natural boundaries, and applying injected lessons. Use in workflows that run repeatedly over similar work items. Requires memory.learning_enabled; degrade silently when the tools report disabled.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1571,1574,1577],{"name":1572,"slug":1573,"type":16},"Best Practices","best-practices",{"name":1575,"slug":1576,"type":16},"Engineering","engineering",{"name":1578,"slug":1579,"type":16},"Operations","operations","2026-07-29T06:00:28.147989",{"slug":1494,"name":1494,"fn":1582,"description":1583,"org":1584,"tags":1585,"stars":26,"repoUrl":27,"updatedAt":1592},"operate CAO MCP application surfaces","Enable, operate, and extend CAO's MCP Apps surface — the host-rendered fleet dashboard visible inside MCP App hosts (Claude Desktop, ChatGPT, VS Code Copilot, Goose, Postman). Use when the user says \"enable MCP Apps in CAO\", \"the ui:\u002F\u002Fcao views aren't rendering\", \"rebuild MCP Apps bundles\", \"add a new ui:\u002F\u002Fcao\u002F* view\", or \"configure the MCP Apps OAuth scope layer\". Operates on the CAO_MCP_APPS_ENABLED surface and cao_mcp_apps\u002F build system. Not for the localhost:9889 browser dashboard, not for plugins, providers, or session management.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1586,1587,1590,1591],{"name":21,"slug":22,"type":16},{"name":1588,"slug":1589,"type":16},"CLI","cli",{"name":18,"slug":19,"type":16},{"name":24,"slug":25,"type":16},"2026-07-22T05:35:52.952289",{"slug":1594,"name":1594,"fn":1595,"description":1596,"org":1597,"tags":1598,"stars":26,"repoUrl":27,"updatedAt":1606},"cao-memory","manage durable agent memory and preferences","Store, recall, and forget durable facts with CAO memory — user preferences, project conventions, decisions, and corrections that should persist across sessions and agents. Use proactively to check memory before asking the user, and to save anything worth remembering. Distinct from any provider-native memory.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1599,1600,1603],{"name":21,"slug":22,"type":16},{"name":1601,"slug":1602,"type":16},"Memory","memory",{"name":1604,"slug":1605,"type":16},"Productivity","productivity","2026-07-12T08:37:03.180421",{"slug":1608,"name":1608,"fn":1609,"description":1610,"org":1611,"tags":1612,"stars":26,"repoUrl":27,"updatedAt":1619},"cao-plugin","scaffold CAO agent plugins","Create a new CAO (CLI Agent Orchestrator) plugin. Use this skill whenever the user wants to add a plugin that reacts to CAO lifecycle or messaging events, scaffold a plugin package, understand plugin requirements, or integrate an external system (Discord, Slack, dashboards, logging, metrics) with CAO. Also use when the user asks what plugin events are available, how plugin discovery works, or how to install a plugin into a CAO environment.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1613,1614,1617,1618],{"name":21,"slug":22,"type":16},{"name":1615,"slug":1616,"type":16},"Automation","automation",{"name":1588,"slug":1589,"type":16},{"name":1540,"slug":1541,"type":16},"2026-07-12T08:36:49.784639",{"items":1621,"total":1797},[1622,1641,1662,1672,1685,1698,1708,1718,1739,1754,1769,1782],{"slug":1623,"name":1623,"fn":1624,"description":1625,"org":1626,"tags":1627,"stars":1638,"repoUrl":1639,"updatedAt":1640},"agentcore-investigation","investigate Bedrock AgentCore runtime sessions","Investigate Bedrock AgentCore runtime sessions via CloudWatch Logs Insights — resolve session\u002Ftrace IDs, query OTEL spans, filter noise, build timelines. Use when debugging AgentCore agent sessions, tracing tool calls, or analyzing latency.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1628,1629,1632,1635],{"name":1559,"slug":1560,"type":16},{"name":1630,"slug":1631,"type":16},"Debugging","debugging",{"name":1633,"slug":1634,"type":16},"Logs","logs",{"name":1636,"slug":1637,"type":16},"Observability","observability",9427,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fmcp","2026-07-12T08:37:22.601527",{"slug":1642,"name":1643,"fn":1644,"description":1645,"org":1646,"tags":1647,"stars":1638,"repoUrl":1639,"updatedAt":1661},"amazon-aurora-dsql","amazon aurora dsql","build applications with Aurora DSQL","Build with Aurora DSQL — manage schemas, execute queries, handle migrations, diagnose query plans, load data, and develop applications with a serverless, distributed SQL database. Covers IAM auth, multi-tenant patterns, MySQL-to-DSQL and PostgreSQL-to-DSQL schema conversion, FK replacement code generation, OCC retry patterns, ORM migration (Django\u002FHibernate\u002FRails), DDL operations, query plan explainability, SQL compatibility validation, and bulk data loading. Triggers on phrases like: DSQL, Aurora DSQL, create DSQL table, DSQL schema, migrate to DSQL, distributed SQL database, serverless PostgreSQL-compatible database, DSQL query plan, DSQL EXPLAIN ANALYZE, why is my DSQL query slow, DSQL foreign key, DSQL OCC retry, DSQL multi-region, load into DSQL, load CSV into DSQL, bulk load DSQL, aurora-dsql-loader.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1648,1651,1652,1655,1658],{"name":1649,"slug":1650,"type":16},"Aurora","aurora",{"name":1559,"slug":1560,"type":16},{"name":1653,"slug":1654,"type":16},"Database","database",{"name":1656,"slug":1657,"type":16},"Serverless","serverless",{"name":1659,"slug":1660,"type":16},"SQL","sql","2026-07-12T08:36:45.053393",{"slug":1663,"name":1664,"fn":1644,"description":1645,"org":1665,"tags":1666,"stars":1638,"repoUrl":1639,"updatedAt":1671},"aurora-dsql","aurora dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1667,1668,1669,1670],{"name":1559,"slug":1560,"type":16},{"name":1653,"slug":1654,"type":16},{"name":1656,"slug":1657,"type":16},{"name":1659,"slug":1660,"type":16},"2026-07-12T08:36:42.694299",{"slug":1673,"name":1674,"fn":1644,"description":1645,"org":1675,"tags":1676,"stars":1638,"repoUrl":1639,"updatedAt":1684},"aws-dsql","aws dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1677,1678,1679,1682,1683],{"name":1559,"slug":1560,"type":16},{"name":1653,"slug":1654,"type":16},{"name":1680,"slug":1681,"type":16},"Migration","migration",{"name":1656,"slug":1657,"type":16},{"name":1659,"slug":1660,"type":16},"2026-07-12T08:36:38.584057",{"slug":1686,"name":1687,"fn":1644,"description":1645,"org":1688,"tags":1689,"stars":1638,"repoUrl":1639,"updatedAt":1697},"distributed-postgres","distributed postgres",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1690,1691,1692,1695,1696],{"name":1559,"slug":1560,"type":16},{"name":1653,"slug":1654,"type":16},{"name":1693,"slug":1694,"type":16},"PostgreSQL","postgresql",{"name":1656,"slug":1657,"type":16},{"name":1659,"slug":1660,"type":16},"2026-07-12T08:36:46.530743",{"slug":1699,"name":1700,"fn":1644,"description":1645,"org":1701,"tags":1702,"stars":1638,"repoUrl":1639,"updatedAt":1707},"distributed-sql","distributed sql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1703,1704,1705,1706],{"name":1559,"slug":1560,"type":16},{"name":1653,"slug":1654,"type":16},{"name":1656,"slug":1657,"type":16},{"name":1659,"slug":1660,"type":16},"2026-07-12T08:36:48.104182",{"slug":1709,"name":1709,"fn":1644,"description":1645,"org":1710,"tags":1711,"stars":1638,"repoUrl":1639,"updatedAt":1717},"dsql",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1712,1713,1714,1715,1716],{"name":1559,"slug":1560,"type":16},{"name":1653,"slug":1654,"type":16},{"name":1680,"slug":1681,"type":16},{"name":1656,"slug":1657,"type":16},{"name":1659,"slug":1660,"type":16},"2026-07-12T08:36:36.374512",{"slug":1719,"name":1719,"fn":1720,"description":1721,"org":1722,"tags":1723,"stars":1736,"repoUrl":1737,"updatedAt":1738},"cost-efficiency-analyzer","analyze cost efficiency and expenses","Analyzes cost structure, cost efficiency, and expense management from P&L data. Use when the user asks about costs, expenses, COGS, operating expenses, cost ratios, cost control, spending efficiency, margin compression from cost side, or wants to understand where money is going. Also use for \"are we spending too much\", \"cost breakdown\", \"expense analysis\", or \"how efficient are our operations\". NOT for revenue or top-line analysis.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1724,1727,1730,1733],{"name":1725,"slug":1726,"type":16},"Accounting","accounting",{"name":1728,"slug":1729,"type":16},"Analytics","analytics",{"name":1731,"slug":1732,"type":16},"Cost Optimization","cost-optimization",{"name":1734,"slug":1735,"type":16},"Finance","finance",3176,"https:\u002F\u002Fgithub.com\u002Fawslabs\u002Fagentcore-samples","2026-07-12T08:40:03.29555",{"slug":1740,"name":1740,"fn":1741,"description":1742,"org":1743,"tags":1744,"stars":1736,"repoUrl":1737,"updatedAt":1753},"executive-financial-briefing","generate executive financial briefings","Generates a concise executive-level financial briefing or summary suitable for a CEO, CFO, or board presentation. Use when the user asks for a summary, briefing, executive summary, board update, financial overview, financial health check, or \"how is the business doing\". Covers the full P&L picture in one page. Also use for \"give me the highlights\", \"what do I need to know\", or \"quick financial update\".",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1745,1746,1747,1750],{"name":1559,"slug":1560,"type":16},{"name":1734,"slug":1735,"type":16},{"name":1748,"slug":1749,"type":16},"Management","management",{"name":1751,"slug":1752,"type":16},"Reporting","reporting","2026-07-12T08:40:02.066471",{"slug":1755,"name":1755,"fn":1756,"description":1757,"org":1758,"tags":1759,"stars":1736,"repoUrl":1737,"updatedAt":1768},"multi-quarter-trend-analysis","analyze multi-quarter financial trends","Analyzes financial trends across multiple quarters by comparing P&L metrics over time. Use when the user wants to see trends, patterns, trajectories, or directional movement across 3 or more quarters. Also use for \"how are we trending\", \"show me the trend\", \"track performance over time\", \"quarter over quarter comparison across all quarters\", or any multi-period longitudinal analysis.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1760,1761,1762,1765],{"name":1728,"slug":1729,"type":16},{"name":1734,"slug":1735,"type":16},{"name":1763,"slug":1764,"type":16},"Financial Statements","financial-statements",{"name":1766,"slug":1767,"type":16},"Variance Analysis","variance-analysis","2026-07-12T08:40:00.79141",{"slug":1770,"name":1770,"fn":1771,"description":1772,"org":1773,"tags":1774,"stars":1736,"repoUrl":1737,"updatedAt":1781},"pdf","process and manipulate PDF documents","Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text\u002Ftables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting\u002Fdecrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1775,1776,1779],{"name":1615,"slug":1616,"type":16},{"name":1777,"slug":1778,"type":16},"Documents","documents",{"name":1780,"slug":1770,"type":16},"PDF","2026-07-12T08:41:44.135656",{"slug":1783,"name":1783,"fn":1784,"description":1785,"org":1786,"tags":1787,"stars":1736,"repoUrl":1737,"updatedAt":1796},"quarterly-kpi-calculator","calculate quarterly financial KPIs","Calculates quarterly financial KPIs from P&L data. P&L figures can be provided directly by the user or fetched from the financial data MCP server. Use when the user wants KPI calculations such as Gross Margin %, EBITDA Margin %, Operating Expense Ratio, or Revenue Growth % QoQ. Also use for quarterly performance review, P&L analysis, or interpreting financial ratios against benchmarks.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1788,1789,1792,1793],{"name":1725,"slug":1726,"type":16},{"name":1790,"slug":1791,"type":16},"Data Analysis","data-analysis",{"name":1734,"slug":1735,"type":16},{"name":1794,"slug":1795,"type":16},"KPI","kpi","2026-07-12T08:39:59.54971",150]