Updated October 6, 2026
AI Disclosure UI Patterns
Identify what people need to know, put the notice at first interaction or exposure, and test visibility and accessibility in the real interface. A visible notice does not implement machine-readable content marking.
Quick reference
| Pattern | Purpose | Placement or review |
|---|---|---|
| Chat header | Direct AI conversation | Before the first message and visible during the conversation. |
| Inline notice | Generated content or affected feature | Next to the content, where it is clear on first exposure. |
| Banner | A feature entry point | Immediately before the feature; accessible without another action. |
| Machine-readable marking | Technical content provenance | Separate implementation and testing; ordinary notice text does not provide it. |
| Recommendation notice | Explanation of an AI feature | Describe the feature accurately; assess legal applicability separately. |
Scope and limitsThese patterns are UI examples. Applicability, exceptions and additional marking or disclosure requirements depend on the system, operator role and context.
References
Questions
Can I paste the React component into an existing app?
Yes. The export contains the implementation and scoped CSS. Save it as a component and render it where people first encounter the relevant AI feature; verify how its styles interact with your app.
Are project inputs uploaded or saved?
No. These Utilumo tools keep inputs and generated records in browser memory. Download your work before closing or reloading the tab. Hosting the website itself still involves normal network requests.