# How to add EU AI Act disclosure to your SaaS UI (with code)

> Source: <https://dev.to/disclos/how-to-add-eu-ai-act-disclosure-to-your-saas-ui-with-code-1cko>
> Published: 2026-06-03 09:00:00+00:00

If your SaaS uses AI and serves EU customers, Article 50 of the EU AI Act requires you to tell users when they interact with AI. The deadline is August 2, 2026. Not 2027. Not "sometime next year." Sixty days from now.

Most founders I talk to assume this only applies to large companies. It does not. Article 50 applies to any provider or deployer of an AI system, regardless of company size.

Here is what you actually need to implement, with code you can drop into your product today.

What Article 50 requires

Four categories of AI use trigger transparency obligations:

Chatbots and AI agents (Article 50(1)): Users must know they are interacting with AI, not a human

Synthetic content (Article 50(2)): AI generated text, audio, images, or video must be marked as such

Deepfakes (Article 50(4)): AI generated or manipulated content depicting real people must be disclosed

Emotion recognition and biometric categorization (Article 50(3)): Users must be informed before these systems process them

If your product does any of these, you need visible disclosure in your UI.

**AI Disclosure**

You are interacting with an artificial intelligence system,

not a human. This is required under Article 50(1) of

Regulation (EU) 2024/1689 (EU AI Act).

Place this above or inside your chat window. It must be visible before the user starts typing, not buried in a settings page.

React component version:

function AIDisclosure() {

return (

You are interacting with an artificial intelligence system,

not a human. This is required under Article 50(1) of

Regulation (EU) 2024/1689 (EU AI Act).

The Regulation specifically mentions machine readable format. The data-ai-generated attribute satisfies this. C2PA metadata is the emerging standard for images and video.

This image was generated or substantially modified using

artificial intelligence. Disclosure required under

Article 50(4) of Regulation (EU) 2024/1689.

**Biometric Processing Notice**

This feature uses artificial intelligence to analyze

[facial expressions / voice patterns / biometric data].

Processing is governed by Article 50(3) of

Regulation (EU) 2024/1689 (EU AI Act).

```
  I understand and consent

  Decline
```

This one requires explicit user action before you start processing. A banner is not enough.

Where to place disclosures

The Regulation says disclosures must be provided "in a clear and distinguishable manner" at the point of interaction. That means:

Chatbots: Inside or directly above the chat interface

Generated content: Adjacent to the output, visible without scrolling

Deepfakes: Caption or overlay on the media itself

Biometric processing: A blocking modal before processing begins

Burying it in your Terms of Service does not count. Footer links do not count. The disclosure must be where the user encounters the AI.

Testing your implementation

After adding the code, check three things:

Visibility: Can a user see the disclosure without scrolling or clicking?

Timing: Does it appear before the AI interaction starts?

Machine readability: Do your data- attributes render correctly in the DOM?

Open your browser DevTools and inspect the elements. The data-ai-generated attributes should be present and readable by automated tools.

Open source templates

All the code above comes from our open source EU AI Act compliance checklist. The full repository includes:

HTML templates for all four Article 50 categories

French translations (German and Spanish coming via community contributions)

An Annex III classifier script to check if your AI system qualifies as high risk

Markdown versions for documentation

GitHub: github.com/GatisOzols/eu-ai-act-checklist

MIT licensed. Fork it, adapt it, ship it.

What happens if you skip this

Article 99 of the EU AI Act sets fines up to 15 million EUR or 3% of global annual turnover for transparency violations. For a SaaS, the more immediate risk is enterprise customers asking for proof of compliance during procurement. If you cannot show Article 50 disclosures in your UI, you lose the deal.

Sixty days is enough time to implement all of this. The code is above. The templates are open source. The deadline is not moving.
