Ciying AI Directory
AI DirectorySkills
中文
Ciying AI Directory

AG-UI A2UI Integration Skill for Codex Renderer Setup

Trace how an AG-UI backend emits A2UI surfaces and a client renderer displays them. Choose a fixed-schema or dynamic rendering path and verify events at both ends.

中文

Setup for Codex

Use Codex in an AG-UI app with its framework adapter and compatible A2UI renderer. The read-only example assumes a local demo application or adapter in the checkout.

  1. Copy the pinned skills/ag-ui-a2ui-integration directory and its references into .agents/skills/ag-ui-a2ui-integration.
  2. Open the app in Codex and select $ag-ui-a2ui-integration. Check the project's adapter and package versions before updating its middleware.

Example task

Use $ag-ui-a2ui-integration in a scratch AG-UI demo to plan a fixed-schema greeting card. Find where to emit createSurface, updateComponents, and updateDataModel, where the renderer consumes them, and where a button action returns. Start with a read-only plan.

Expected result

The plan names the operation producer, one middleware insertion point, the client renderer and catalog, and a test that traces the button action back to the server.

Upstream documentation

Original SKILL.md on GitHub · MIT license · Source reviewed

Frequently asked question

How can I verify A2UI rendering in an AG-UI app with Codex?

Follow one surface from its backend operations through the AG-UI stream to the renderer, then follow a click in the opposite direction through the action channel.