Skip to main content
reopt Handbook
reopt Handbook
Design Systems for the AI Era

Foundation

Token ArchitectureComponent SpecBuilt-in Accessibility

AI Workflow

Prompt InterfaceDESIGN.md InterfaceAgentic Design Quality ControlWorkflow StrategiesAI-Based Design System EvolutionContext Injection

User Experience

Consistency PatternsInteraction DesignForms and Data Input

Next Interfaces

Agent UI ProtocolsGenerative UISpatial and Multimodal Interfaces

Practice

Execution PlaybookMigration StrategyGovernance and CollaborationCase Studies

Operations

Verification ChecklistUpdate Log
Handbook›Design Systems for the AI Era›Agent UI Protocols
한국어English

Agent UI Protocols

Declarative protocols for AI agents that construct user interfaces.

Key takeaways

  • Agent UI protocols let agents declare interfaces with the design system as their vocabulary, instead of clicking prebuilt screens.
  • The protocol must own component vocabulary, a serializable state model, tool integration, accessibility, and auditability.
  • Components need stable IDs and schemas, and actions must declare side effects plus confirmation needs.
  • Renderers should reject unsupported or malformed component names rather than rendering them.
  • Version the protocol, validate every declaration against schemas, and keep destructive actions behind explicit confirmation.

Agent UI protocols let agents describe interfaces declaratively instead of asking humans to click through prebuilt screens. The design system becomes the vocabulary for those declarations.

Protocol Responsibilities

ResponsibilityWhy it matters
Component vocabularyKeeps generated UI inside approved primitives.
State modelLets agents update UI without imperative hacks.
Tool integrationConnects user actions to agent or backend capabilities.
AccessibilityKeeps generated interfaces usable.
AuditabilityRecords what UI the agent created and why.

Design-System Requirements

  1. Components need stable IDs and schemas.
  2. Props must have explicit constraints.
  3. Actions must declare side effects and confirmation needs.
  4. UI state must be serializable.
  5. Renderers must reject unsupported component names.

Example Declaration

{
  "type": "TaskCard",
  "props": {
    "title": "Review failed payments",
    "status": "warning",
    "actions": [{ "id": "open-report", "label": "Open report" }]
  }
}

Governance

  • Version the protocol.
  • Validate every declaration against schemas.
  • Log agent-generated UI decisions.
  • Keep destructive actions behind explicit confirmation.
  • Test renderer behavior for unsupported or malformed declarations.

Related docs

Generative UI

Runtime UI generation with design-system constraints.

Context Injection

Deliver the right design-system context to AI agents at the right time.

AI SDK Runtime

Vercel Enterprise AI Platform · Use AI SDK as the application runtime layer for streaming, tools, agents, and telemetry.

Forms and Data Input

Standardize validation, errors, and complex form composition.

Generative UI

Runtime UI generation with design-system constraints.

On this page

Protocol ResponsibilitiesDesign-System RequirementsExample DeclarationGovernance