AiDisclosure
The note that says a text was generated by a model: the words "AI generated", the model, the provider and a link to what is sent. Show it next to every answer or text a model wrote, in the assistant and in any other AI feature. It says where the text came from and nothing about how right it is.
- AiDisclosure
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AiDisclosure
AI generatedModel: Example model 1Provider: Example providerWhat is sent
Dark theme, AiDisclosure
AI generatedModel: Example model 1Provider: Example providerWhat is sent
High contrast theme, AiDisclosure
AI generatedModel: Example model 1Provider: Example providerWhat is sent
UsageLink to the section Usage
import { AiDisclosure } from '@skribly/ui/feedback'<AiDisclosure
label={t('ai.generated')}
modelLabel={t('ai.model')}
model="Example model 1"
providerLabel={t('ai.provider')}
provider="Example provider"
sentLabel={t('ai.sent')}
sentHref="/privacy#ai"
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A plain paragraph, so a screen reader reads the label, the model and the provider in order and the link is reachable with Tab.
- The label is a word, never only a colour or an icon.
- Every word is a prop, so the note is read in the language of the page.
- It wraps on narrow screens and keeps its contrast in all three themes.
This demo runs through axe in all three themes on every test run. See what the tests check.