AI processing indicator shown to users

The EU AI Act requires that users be notified when they are interacting with an AI system in certain contexts, and the principle is extending across jurisdictions. When AI-generated responses are visually indistinguishable from human-authored content, users cannot make informed decisions about how much to trust or act on the output. OWASP LLM09 (Misinformation) classifies unmarked AI output as a reliability risk — users who mistake AI responses for authoritative human answers are more likely to act on hallucinated information. Disclosure is the minimum accountability signal an AI-powered product can provide.

Add a visual label to every component that renders AI-generated content. An accessible aria label ensures screen reader users also receive the disclosure.

// components/ai-message.tsx
export function AiMessage({ content }: { content: string }) {
  return (
    <div className="ai-response" role="article" aria-label="AI-generated response">
      <span className="text-xs text-muted-foreground flex items-center gap-1">
        <SparklesIcon className="h-3 w-3" aria-hidden="true" />
        AI response
      </span>
      <p>{content}</p>
    </div>
  )
}

Apply this to every rendering path — streaming responses, cached responses, and fallback states. The label should be visible without hover; users should not need to inspect the UI to know the content is AI-generated.