LogoLogo
  • What is UDML?
  • Document structure
    • <components>
    • <imports>
    • <instructions>
    • <meta>
    • <styles>
    • <tokens>
    • <mappings>
    • <screens>
  • Directives
    • ai-hint
    • <data> Directive Specification
    • <interaction> Directive
    • <layer> Directive
    • <repeat> Directive
    • <responsive>
    • selection
    • <tracking> Directive
  • Components
    • Layout
      • <accordion> Component
      • <box> Component
      • <column> Component
      • <divider>
      • <grid> Component
      • <row> Component
    • Navigation
      • <breadcrumbs> Component
      • <pagination> Component
      • <tab> Component
      • <tabs> Component
    • Text & Display
      • <avatar>
      • <heading>
      • <icon>
      • <image>
      • <label>
      • <text>
      • <video>
    • Controls & Input
      • <button>
      • <checkbox>
      • <input> Component
      • <radio>
      • <select>
      • <slider>
      • <stepper>
      • <switch>
      • <textarea>
    • Forms
      • <form> Component
      • <formField> Component
      • <formGroup> Component
    • Data Collections
      • <dataColumn> Component
      • <dataTable> Component
      • <list> Component
      • <timeline> Component
      • <treeView> Component
    • Data Visualization
      • <chart> Component
      • <summary> Component
    • Modals
      • <dialog> Component
      • <modal> Component
      • <popover> Component
      • <toast> Component
      • <tooltip> Component
  • Prompting Guides
    • Prompting AI Developer Tools with UDML
    • Working with UDML in an Existing Codebase
  • Contributing to UDML
Powered by GitBook
On this page
  • 🧠 Purpose
  • 🛠 Usage
  • On components
  • On generic or ambiguous elements
  • On slots
  • 🔁 Applicability
  • 🧠 AI Interpretation Guidelines
  • ✅ Summary
Edit on GitHub
  1. Directives

ai-hint

The ai-hint attribute is a lightweight, optional tool for providing natural-language context to AI developer tools. It can clarify the purpose of any component, layout, slot, or binding.

🧠 Purpose

To help AI developer agents infer semantic roles, expected behavior, or business logic when structure alone isn't clear.

🛠 Usage

On components

<button ai-hint="This button submits the login form.">
  Sign In
</button>

On generic or ambiguous elements

<group ai-hint="Likely a card summarizing a user's profile with avatar and text."/>

On slots

<slot name="meta" ai-hint="Subheading or timestamp shown below the title"/>

🔁 Applicability

ai-hint can be used on:

  • Layout primitives (<layout>, <group>, <box>)

  • Interactive elements (<button>, <input>, <link>)

  • Data-driven content (<binding>, <slot>)

  • Custom components and containers

🧠 AI Interpretation Guidelines

  • Read ai-hint as freeform intent description

  • Use it to resolve ambiguities, especially in generic tags

  • Optionally surface ai-hint as part of docs, tooltips, or dev comments

✅ Summary

  • Always optional, never rendered

  • Enhances AI inference and code scaffolding

  • Valuable for ambiguous or flexible elements

PreviousDirectivesNext<data> Directive Specification

Last updated 1 month ago