Agent skill · assistant-ui
generative-ui
Lets the model compose interfaces at runtime from a component vocabulary instead of one hand-written component per tool, and covers every generative UI pattern in the framework. Use for the model-driven present tool: JSONGenerativeUI, defaultGenerativeUILibrary, and present({ display }) from @assistant-ui/react-generative-ui, registered through AuiConfig({ tools: Tools({ toolkit }) }). Also covers the backend-driven MessagePrimitive.GenerativeUI primitive and its component allowlist for a server that already emits generative-ui message parts, the Slack Block Kit and Microsoft Teams Adaptive Card renderers and their action decoders, A2UI surfaces over AG-UI, and the third-party OpenUI integration. Route here when the model should design its own layout rather than fill one you wrote, when an unknown $type or component name throws or silently renders nothing, when a generative UI tree needs to post to Slack or Teams or paint an A2UI surface, or when generative UI, present tool, or component vocabulary comes up. For a widget tied to one tool call you already know about, use tool-ui in ../tools/SKILL.md instead.
What it needs
About 6k tokens when loaded.
What this skill does
assistant-ui Generative UI Always consult assistant-ui.com/llms.txt for the latest API. Generative UI inverts the usual tool-rendering relationship. Instead of one hand-written component per tool call, you ship a vocabulary of components and let something assemble a tree from it: either the model, through the present tool, or your backend, through a message part or a LangGraph event. @assistant-ui/react-generative-ui ships a default vocabulary of 27 components (cards, facts, tables, charts, forms, controls) plus converters that turn the same tree into Slack Block Kit, a Microsoft Teams Adaptive Card, or an A2UI surface, so a composition built once can render in the browser and outside it. References ./references/vocabulary.md -- the 27 default components and how to add your own with defineGenerativeComponents ./references/actions.md -- $action dispatch, createActionRegistry, and the $input shapes interactive components send back ./references/renderers.md -- MessagePrimitive.GenerativeUI and its allowlist, the Slack and Teams converters, and why the two spec shapes do not interchange ./references/a2ui-openui.md -- A2UI surfaces over AG-UI and the third-party OpenUI integration ./references/tokens.md -- the shared token arrays and how to restyle or override the vocabulary Which generative UI pattern? Two questions separate the patterns: does the model compose the layout or do you bind it ahead of time, and does the UI originate from a tool call or from a part your backend emits. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills assistant-ui/generative-ui