Five lagoons worth the detour
Loading Witness…Our editors picked five lagoons for a quiet week in autumn: shallow water, short transfers and small guesthouses instead of resorts.
Witness overview
WitnessLive demo, free and Pro.
Everything in the first four sections runs the real @sweberdev/witness build in your browser: the two custom elements, the text watermark and the image marking. The Pro section shows output of the real Pro tools for a made-up travel agency.
Nothing you type or upload leaves your browser. Images are marked in memory and offered back as a download.
Witness helps you implement the transparency duties of Article 50 of the EU AI Act. It is a tool, not legal advice, and using it does not confirm compliance.
Chatbot notice
Tell people they are talking to an AIArticle 50(1).
This is <witness-notice> in a made-up support chat. It is expanded until the visitor acknowledges it, then it shrinks to a compact label in the chat that can be reopened. Each step fires an event you can keep as evidence.
Muster Travel support
Loading Witness…
- Hello! I can help with bookings, travel documents and changes to your trip.
Events (witness-shown, witness-acknowledged)
No events yet.
AI labels
Label generated and edited contentArticles 50(2) and 50(4).
<witness-label> is a small badge with a details popover. Put it next to a text or as an overlay on an image. Open it with a click or the keyboard; Escape closes it.
Markup
<witness-label kind="generated" locale="en" reviewed></witness-label>
<figure style="position: relative">
<img src="/lagoon.jpg" alt="…">
<witness-label variant="overlay" kind="generated" locale="en"
generator="Image model (example)" created="2026-10-05">
</witness-label>
</figure>Text watermark
Mark generated text invisiblyMachine-readable, copy-paste safe.
Witness hides a short record in Unicode variation selectors at the end of a text. It looks the same, survives copy and paste in most apps, and can be read back. It is easy to remove on purpose, so treat it as one layer next to the visible label, not as proof.
Image marking
Write the marking into the filePNG, JPEG and WebP.
Witness writes XMP metadata with the IPTC digital source type into the image file itself, the format news agencies and platforms read. Pick an image to mark it here, or check whether an image already carries a marking. Files with a C2PA manifest are left unchanged.
Loading Witness…
The same from the command line
npx witness mark image.png --out marked \
--kind generated --generator "Image model (example)"
npx witness inspect marked/image.pngPro
Check every build and document it for your clientWitness Pro.
Muster Travel AG is a made-up agency client with a support chat, AI images and AI newsletter drafts. Below is what the Pro tools produce from its build folder and its AI register: the scanner output in CI, the transparency report for the client and the public "How we use AI" page.
witness.config.json (scan)
{
"scan": {
"root": "dist",
"chat": [
{
"pages": [
"support/**/*.html"
],
"selector": "#chat"
}
],
"aiImages": [
"images/**"
]
}
}Show the AI register (witness.config.json, register)
{
"register": {
"organisation": {
"name": "Muster Travel AG",
"url": "https://muster-travel.example",
"contact": "ai@muster-travel.example"
},
"systems": [
{
"id": "support-chat",
"name": "Support assistant",
"purpose": "Answers questions about bookings and travel documents.",
"vendor": "Example AI",
"model": "example-chat-2",
"role": "provider",
"uses": [
"chatbot",
"generated-text"
],
"pages": [
"/support"
],
"since": "2026-06-01",
"measures": [
"Notice above the chat with <witness-notice>",
"Answers carry the invisible text watermark"
],
"owner": "Customer service"
},
{
"id": "images",
"name": "Image generator",
"purpose": "Creates illustrations for the website and the blog.",
"vendor": "Example AI",
"model": "example-image-1",
"role": "deployer",
"uses": [
"generated-image"
],
"pages": [
"/",
"/blog"
],
"since": "2026-03-15",
"measures": [
"IPTC marking in every file",
"Visible label next to each image"
],
"owner": "Marketing"
},
{
"id": "newsletter",
"name": "Newsletter drafts",
"purpose": "Drafts newsletter texts that an editor reviews and signs off.",
"vendor": "Example AI",
"role": "deployer",
"uses": [
"public-interest-text"
],
"humanReview": true,
"since": "2026-05-01",
"owner": "Marketing"
}
]
}
}witness-scan dist
Witness scan: 3 pages, 1 notices, 1 labels, 1 marked elements, 2 AI-marked images, 0 with C2PA, 0 watermarked texts
ERROR blog/lagoon.html img[src="/images/lagoon.png"]: Shows the AI-generated image images/lagoon.png without a visible label next to it. [ai-image-unlabelled]
1 errors, 0 warningsThe scanner found the blog image that is marked as AI-generated but has no visible label. In CI this fails the build and shows up as an annotation on the pull request.
Commands
# CI: fail the build when AI content has no label or marking
npx witness-scan dist --json witness-scan.json
# Transparency report for the client, with scan results and notice evidence
npx witness-report build --scan witness-scan.json --events notice-events.jsonl \
--out ai-transparency-report.html
# Public "How we use AI" page
npx witness-report page --show-vendors --out public/ai.htmlTransparency report (witness-report build)
Public AI page (witness-report page)
Witness Pro also adds the notice and label wording in the 20 further official EU languages, so all 24 are covered.
See Witness ProNext
Add it to your projectMIT, free.
Install @sweberdev/witness, put the notice into your chat and the labels next to generated content, and add the AI SDK middleware so text and images are marked as they are generated.