KI-Agenten sehen jetzt: Wie Peekaboo und Vision Toolkit UI- und Screenshot-Workflows automatisieren

von Denis Shokhirev, Enterprise AI Architect aus Freiburg im Breisgau. Ich entwickle und betreibe autonome KI-Agenten für DACH-B2B-Kunden, u. a. in Logistik und Fintech. Mein Stack: Claude, Supabase, n8n, Doppler, selbstgehostetes Postgres. Ein Produktiv-Agent fiel kürzlich aus, weil eine Schaltfläche im UI geändert wurde – ohne visuelles Feedback laufen KI-Workflows Gefahr, im falschen Status zu bleiben und DSGVO-relevante Fehler still zu produzieren.

Warum KI-Agenten visuelles Feedback brauchen

LLMs wie Claude oder GPT-4 verarbeiten Text, „sehen“ aber nicht den echten UI-Zustand. In Produktivsystemen (Logistikportale, Banken-Backoffice, Industrie-GUIs) reicht das nicht: Der Agent muss erkennen, ob eine Aktion erfolgreich war, ob ein UI-Element fehlt, oder ob eine Interaktion blockiert wurde (z. B. durch Captchas). In drei aktuellen DACH-Projekten stellte sich heraus, dass Agenten regelmäßig Aktionen als erfolgreich melden, obwohl das UI eine Fehlermeldung oder Modals anzeigt – und dies bleibt oft unentdeckt, bis Audits oder Nutzerbeschwerden folgen.

Peekaboo und Vision Toolkit: Was im Produktivbetrieb bewährt ist

Viele Tools versprechen „KI-Sicht“, doch nur wenige sind auditierbar und stabil. Ich setze auf zwei Open-Source-Komponenten:

• Peekaboo (https://github.com/claudeai/peekaboo): Headless-Chrome-Screenshot-Service mit API, Cropping und Diff-Unterstützung.
• Vision Toolkit: Open-Source-Toolkit für Bildanalyse, Template-Matching, OCR (tesseract) und visuelle Diffs.

Beide integriere ich in n8n-Workflows und Supabase: Der Agent löst eine Aktion aus, erstellt ein Screenshot via Peekaboo, analysiert das Bild mit Vision Toolkit, speichert Resultate in Postgres und steuert das weitere Vorgehen über n8n.

Beispiel: UI-Status automatisiert prüfen

import requests
from PIL import Image, ImageChops
import pytesseract

def take_screenshot(url, output_path):
    # Headless-Chrome-Screenshot via Peekaboo-API
    resp = requests.post("http://localhost:9222/screenshot", json={"url": url})
    with open(output_path, "wb") as f:
        f.write(resp.content)

def compare_images(img1_path, img2_path):
    img1 = Image.open(img1_path)
    img2 = Image.open(img2_path)
    diff = ImageChops.difference(img1, img2)
    return diff.getbbox() is not None

def extract_text(img_path):
    return pytesseract.image_to_string(Image.open(img_path))

# Beispielablauf:
take_screenshot("https://portal.example.com", "before.png")
# (Agent agiert)
take_screenshot("https://portal.example.com", "after.png")
if compare_images("before.png", "after.png"):
    print("UI hat sich geändert")
else:
    print("Keine Änderung erkannt")
print(extract_text("after.png"))

Architekturpattern für skalierbare Sichtbarkeit

Auditierbarkeit und Skalierbarkeit sind im regulierten Umfeld Pflicht:

• Alle Screenshots, Diffs und OCR-Ergebnisse werden in Supabase (S3-kompatibel + Postgres-Metadaten) abgelegt.
• n8n orchestriert: Agent-Aktion → Screenshot → Analyse → Logging → Benachrichtigung.
• Zur DSGVO-Absicherung: Automatisches Schwärzen sensibler UI-Bereiche (Vision Toolkit + Masken) vor Speicherung.
• Fehler wie „Element nicht gefunden“ landen direkt in einer eigenen Postgres-Tabelle – wichtig für Audit-Trails.

Sicherheits- und Audit-Anforderungen (DSGVO, ISO 27001)

Keine Ablage von Roh-Screenshots mit Personen- oder Finanzdaten! Ich setze automatisch Masken per Vision Toolkit: E-Mails, Kartennummern u. ä. werden vor Speicherung geschwärzt. Jeder Agentenschritt erhält einen Audit-Log: Screenshot vorher/nachher, extrahierter Text, UUID. Damit erfüllen Sie DSGVO und ISO 27001 (siehe BfDI, 2024).

import re

def mask_sensitive(text):
    # Maskiert E-Mail- und Kartennummern
    text = re.sub(r'[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+', '[MASKED_EMAIL]', text)
    text = re.sub(r'\b\d{4} \d{4} \d{4} \d{4}\b', '[MASKED_CARD]', text)
    return text

Umgebungsvariablen und API-Keys werden mit Doppler gesichert, sodass keine Credentials in Logs/Screenshots landen. Ohne diese Schritte bestehen Sie keine DACH-Banken- oder ISO-Prüfung.

Typische Fehler bei “sehenden” Agenten

• Screenshots werden unverschlüsselt in offenen S3-Buckets gespeichert – DSGVO-Risiko.
• OCR ohne Maskierung – Gefahr von Datenlecks.
• Zu seltene Screenshots – Agenten übersehen UI-Änderungen oder Fehler.
• Nur Pixel-Diff statt semantischer/struktureller Analyse – kritische UI-Änderungen werden nicht erkannt.

FAQ

Peekaboo oder Selenium für Screenshots?

Peekaboo ist für Headless-Screenshots schneller und einfacher. Selenium eignet sich für komplexe UI-Steuerung. Für automatisierte Pipelines setze ich bevorzugt Peekaboo ein.

Wie wird Vision Toolkit mit n8n integriert?

Per HTTP-Requests oder als Docker-Step im n8n-Workflow. Ergebnisse gehen direkt nach Supabase.

Wie werden sensible UI-Zonen automatisch geschwärzt?

Entweder durch vordefinierte Koordinaten oder per OCR-Mustererkennung – Maskierung erfolgt dann mit PIL oder Vision Toolkit, bevor gespeichert wird.

Kann das Pattern auch für mobile Apps genutzt werden?

Ja, sofern Headless-Emulation oder Screenshot-API verfügbar ist. Für mobile GUIs muss das OCR-Template meist angepasst werden.

Wie lange dauert ein vollständiger Agentenschritt?

Im Mittel 1–3 Sekunden pro Screenshot, 2–4 Sekunden für OCR/Analyse – je nach UI-Komplexität und Serverlast.

In welchem Stadium Ihrer AI-Pipeline scheitern Agenten am häufigsten an UI-„Blindheit“ – durch Interface-Änderungen, Captchas oder stille Fehler? Teilen Sie Ihre Erfahrungen mit Auditierbarkeit im Produktivbetrieb.

Ich biete einen kostenfreien 30-min Stack-Check für DACH-Unternehmer im regulierten Umfeld an. Kontaktieren Sie mich auf LinkedIn oder unter @ger_dennis_ai.