Generative UI Contracts
Goal
Keep AI-generated UI safe, typed, renderable, and maintainable by constraining output through schemas and approved components.
When to use
Use when an AI agent creates UI, selects components, generates layout JSON, manipulates product pages, or returns actions/components that the frontend renders.
Workflow
- Do not let the model output arbitrary HTML, code, or unsafe component trees for direct execution.
- Define allowed components, props, variants, actions, and data schemas before rendering model output.
- Validate model output server-side or at the boundary before passing it to UI renderers.
- Separate assistant reasoning, user-facing messages, typed actions, and UI payloads.
- Add fallback states for invalid, incomplete, or unsupported model output.
- Keep generated UI deterministic enough to debug, test, and audit.
- Log safe metadata and avoid storing secrets, payment data, or sensitive content in UI payloads.
Quality bar
- Add or update schema/unit tests when practical.
- Run typecheck and relevant frontend/backend validation.
- Test invalid payload behavior or document why it was not tested.
Validation
- Generated UI is constrained by explicit contracts.
- Frontend only renders known components with validated props.
- Failures are recoverable and visible to developers without exposing internals to users.
Final response
- Summarize contracts added, validation boundary, and unsupported cases.
1---2name: generative-ui-contracts3description: Use this when building AI-generated UI, chat-driven interfaces, schema-driven components, safe UI renderers, typed component contracts, or model-produced layouts.4---56# Generative UI Contracts78## Goal910Keep AI-generated UI safe, typed, renderable, and maintainable by constraining output through schemas and approved components.1112## When to use1314Use when an AI agent creates UI, selects components, generates layout JSON, manipulates product pages, or returns actions/components that the frontend renders.1516## Workflow17181. Do not let the model output arbitrary HTML, code, or unsafe component trees for direct execution.192. Define allowed components, props, variants, actions, and data schemas before rendering model output.203. Validate model output server-side or at the boundary before passing it to UI renderers.214. Separate assistant reasoning, user-facing messages, typed actions, and UI payloads.225. Add fallback states for invalid, incomplete, or unsupported model output.236. Keep generated UI deterministic enough to debug, test, and audit.247. Log safe metadata and avoid storing secrets, payment data, or sensitive content in UI payloads.2526## Quality bar2728- Add or update schema/unit tests when practical.29- Run typecheck and relevant frontend/backend validation.30- Test invalid payload behavior or document why it was not tested.3132## Validation3334- Generated UI is constrained by explicit contracts.35- Frontend only renders known components with validated props.36- Failures are recoverable and visible to developers without exposing internals to users.3738## Final response3940- Summarize contracts added, validation boundary, and unsupported cases.
YankielDBC2