AG-UI is an event-based protocol that lets AI agent backends communicate with user-facing applications. It standardizes agent events and inputs while supporting transports such as server-sent events, WebSockets, and webhooks. The catalogue add-ons help developers build integrations and applications around the protocol.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add ag-ui-protocol/ag-ui --skill ag-ui-a2ui-integrationgit clone --depth 1 https://github.com/ag-ui-protocol/ag-uiWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/ag-ui-protocol/ag-ui/ag-ui-a2ui-integration)<a href="https://agentmods.dev/skills/ag-ui-protocol/ag-ui/ag-ui-a2ui-integration"><img src="https://agentmods.dev/badge/skills/ag-ui-protocol/ag-ui/ag-ui-a2ui-integration.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
SkillSpector: 1 finding, up to low
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- low Excessive Agency · line 66 Skill's behavior or capabilities extend beyond its stated purpose. Scope creep allows an agent to perform actions unrelated to its documented functionality, increasing the attack surface.Fix: Limit the skill's scope to its documented purpose. Remove instructions that enable the agent to perform actions outside its stated functionality.
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00073 | $0.01514 |
| Opus 5 | $0.00036 | $0.00757 |
| Sonnet 5 | $0.00015 | $0.00303 |
| Haiku 4.5 | $0.00007 | $0.00151 |
Grade A, and why
ag-ui-a2ui-integration scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 128 lines — stays where its author put it; the contents beside it link to each section on GitHub.
AG-UI + A2UI Integration Skill
Overview
Use this skill to add A2UI rendering to an AG-UI application. Treat AG-UI as
the transport and agent integration layer, @ag-ui/a2ui-middleware as the
server-side bridge that detects and paints A2UI operations, and A2UI as the UI
payload format that the client renderer displays.
This is a developer-facing skill artifact. It is meant to be loaded by coding agents and used against a real app or repo, not published as a docs page.
When to Use
- Adding A2UI rendering to an existing AG-UI app.
- Creating an AG-UI quickstart that should display A2UI surfaces.
- Connecting any AG-UI-supported framework or custom AG-UI agent to an A2UI-capable frontend.
- Adding or extending an A2UI component catalog.
- Debugging why an A2UI surface does not render or why a user action does not flow back to the agent.
When NOT to Use
- For AG-UI protocol event semantics only, use the AG-UI protocol skill or protocol docs.
- For A2UI renderer internals outside an AG-UI app, use the A2UI renderer docs or renderer-specific skills.
- For generic CopilotKit frontend work without A2UI, use CopilotKit-specific setup and React skills.
Workflow
- Inspect the app shape: framework adapter, AG-UI agent endpoint, runtime host, frontend shell, and any existing A2UI renderer/catalog.
- Decide the A2UI mode before editing code:
- Fixed schema: backend tools return an
a2ui_operationsenvelope withcreateSurface,updateComponents, andupdateDataModel. - Dynamic schema: a framework A2UI tool (
generate_a2ui) delegates to a sub-agent that streamsrender_a2uiargs throughA2UIMiddleware.
- Fixed schema: backend tools return an
- Select framework-specific wiring from
references/framework-adapters.md, or use that reference to find the closest AG-UI integration pattern. Preserve the app's existing agent architecture. - Wire server middleware/runtime and client renderer using
references/a2ui-runtime-and-renderer.md. Avoid double-applyingA2UIMiddleware; use either runtime-level A2UI config or per-agentagent.use(new A2UIMiddleware(...))for a given agent. - Register a catalog on the client. With CopilotKit >= 1.61.2, forwarding it to
the provider (
a2ui={{ catalog }}) auto-enables A2UI and auto-derivesdefaultCatalogIdfrom the catalog's id. Only when you are not forwarding a catalog, ensure the middleware or adapter sets adefaultCatalogIdmatching the renderer-registered catalog. - Verify the streaming path with
references/verification.md: AG-UI stream,a2ui-surfaceactivity snapshots ora2ui_operations, rendered A2UI surface, and a user interaction flowing back through AG-UI.
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 128 lines · 73 tokens per session scan A 6a39ebd30e50
ag-ui-a2ui-integration is a skill published in the GitHub repository ag-ui-protocol/ag-ui (15,782 stars, last pushed yesterday), licensed MIT. It adds 73 tokens to every session and 1,514 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
mcp-app-scaffolding
Scaffolds MCP App project structure with correct directory layout, dependencies, entry points, and framework-specific templates. Handles React (useApp hook), Vanilla JS, Vue, Svelte, Preact, and Solid.
mcp-host-styling-integration
Integrates MCP App UI with host theming system. Applies host CSS variables, handles onhostcontextchanged, safe area insets, display mode detection, and fullscreen configuration.
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
moai-platform-chrome-extension
Chrome Extension Manifest V3 development specialist covering service workers, content scripts, message passing, chrome. APIs, side panel, declarativeNetRequest, and Chrome Web Store publishing. Use when building browser extensions.
moai-framework-electron
Electron 33+ desktop app development specialist covering Main/Renderer process architecture, IPC communication, auto-update, and packaging with Electron Forge. Use when building cross-platform desktop applications.
moai-domain-uiux
UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when working on design systems, WCAG compliance, ARIA patterns, or dark mode theming.