skills.rest
awslabs
awslabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

agui-author

Emit allow-listed dashboard UI components from agents via the emit_ui MCP tool.

1.2k|249|Updated Jul 29, 2025
Search Tags:#ag-ui#Dashboard#MCP tool#sse stream#Agent orchestration#Generative UI#emit_ui
One-click install
npx skills add https://github.com/awslabs/cli-agent-orchestrator --skill agui-author
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agui-author
Source: https://github.com/awslabs/cli-agent-orchestrator/tree/main/skills/agui-author
Command: npx skills add https://github.com/awslabs/cli-agent-orchestrator --skill agui-author

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Agents running in terminal sessions produce raw text that operators must scroll through to find decisions, diffs, or status updates. This Skill lets an agent push structured, rendered UI cards onto the CAO AG-UI stream so operators see approvals, choices, progress, and metrics directly in any AG-UI-compatible dashboard.

Core Features & Use Cases

  • Six allow-listed components: Emit approval_card, choice_prompt, diff_summary, progress, metric, or agent_card with JSON props through the emit_ui MCP tool; arbitrary HTML and off-list components are refused server-side.
  • Safe by design: Props are validated server-side, bounded to 8 KB, metadata-only, and the tool degrades gracefully when the AG-UI surface is disabled.
  • L2 construct integration: Emitted intents feed higher-level projections like SupervisorDashboardStream, MultiAgentSessionTimeline, and AgentHandoffWithApproval for fleet views and human-in-the-loop approvals.
  • Use Case: Before running a destructive migration, an agent emits an approval_card with risk level high so the operator can review and approve the action from the dashboard instead of reading terminal output.

Quick Start

Ask the agent to show a progress bar on the operator dashboard by emitting a progress component with a label and a value between 0 and 1 via emit_ui.

Frequently Asked Questions about agui-author

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I show a progress bar from my agent to the operator?▼

Call emit_ui with the progress component, passing a label string and a value between 0.0 and 1.0. Omit the value for an indeterminate bar. Emit at milestones rather than on every token to avoid flooding the stream.

What components can I emit with the emit_ui MCP tool?▼

Six allow-listed components are available: approval_card, choice_prompt, diff_summary, progress, metric, and agent_card. Any other component name is refused server-side with an HTTP 400 error and nothing renders.

Can I render custom HTML in the AG-UI dashboard?▼

No HTML sink exists. Only structured JSON props for the six allow-listed components are accepted, and strings render as plain text. Markup such as script or iframe tags will not render and off-list components are rejected.

Why is my emit_ui call raising a ValueError?▼

Common causes are an off-list component name, props exceeding the 8 KB limit, or non-JSON-serializable props. Reference file paths instead of embedding content, and check component spelling against the six allowed names.

What happens if emit_ui is called when the AG-UI surface is disabled?▼

The tool returns {"ok": false} and degrades gracefully as a no-op, never raising a fatal error. Enable the surface by setting CAO_AGUI_ENABLED=true on the cao-server.

Does approval_card block my agent until the operator responds?▼

No, approval_card is display-only; the operator's decision routes to the dashboard's command surface, not back to the agent. Pair it with your provider's own wait-for-input mechanism such as trust prompts or permission dialogs.

Related Skills

Explore More Software Engineering Skills→
awslabsawslabs
1.0k

cao-session-management

Manage CAO sessions for parallel code review and scheduled agent runs.

Official
Intermediate
hanu-tayalhanu-tayal

copilotkit-develop

Integrate CopilotKit v2 into React and Next.js applications with agent state and chat UI.

Community
Advanced
hasnaxyzhasnaxyz

mcp

Serve json-render specs and HTML resources from a Node.js MCP server.

Official
Intermediate
AradotsoAradotso
4

hermes-client-web-ui

Manage Hermes Agent profiles via a web chat interface with SSE streaming.

Official
Advanced