AI disclosure

Free · MIT

A plain notice that the person is interacting with an AI system: a first line in the thread (variant="line") or a compact "AI" badge for a thread header (variant="badge") that opens to the app's own explanation. It helps an app tell people they're talking to an AI, as transparency rules such as Article 50(1) of the EU AI Act ask; whether a given placement meets those rules, and what else applies, stays the deployer's call. The agent's name and any details come from the app, never from model text. It's static: read in place, never announced as a live update.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/ai-disclosure

Brings in: button, chat, locale, popover, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { AiDisclosure } from "@/components/ai-disclosure"
import type { AgentIdentity } from "@/lib/chat"

const agent: AgentIdentity = { id: "support", name: "Support assistant", role: "specialist" }

export default function Example() {
  return (
    <div className="flex max-w-xl flex-col gap-4">
      <div className="flex items-center gap-2 border-b pb-2 text-sm font-medium">
        Support assistant
        <AiDisclosure
          agent={agent}
          variant="badge"
          details="Run by the support team. It reads your past tickets to answer; a person reviews refunds."
          onLearnMore={() => {}}
        />
      </div>
      <AiDisclosure agent={agent} details="Ask for a person at any time." onLearnMore={() => {}} />
      <AiDisclosure />
    </div>
  )
}

<AiDisclosure>

Prop	Type	Default	Description
agent	`AgentIdentity \| string \| undefined`	—	The agent, named by the app: an AgentIdentity or a plain name. Left out, the notice says "an AI system". Never model text.
variant	`"line" \| "badge" \| undefined`	"line"	"line" (the default) for a first line in the thread; "badge" for a compact mark in a header, e.g. ThreadHeader's. Place each where it fits.
details	`string \| undefined`	—	The app's own plain text about the system: who operates it, what data it uses, how to reach a person. Shown under the line, or in the badge's explanation.
onLearnMore	`(() => void) \| undefined`	—	Opens the app's own page or dialog about its AI use. A callback, never a URL from the model. Shows a "Learn more" button.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under aiDisclosure in <LocaleProvider strings={{ … }}>; the table is exported as aiDisclosureStrings.

Key	English
line	{name} is an AI system, not a person.
lineUnnamed	You're interacting with an AI system, not a person.
badge	AI
badgeLabel	{name} is an AI system
badgeLabelUnnamed	AI system
about	About {name}
aboutUnnamed	About this AI system
learnMore	Learn more