Case Study · Open-Source-Produkt · Agent Analytics · Next.js + Supabase

Google Analytics zeigt Menschen. OpenHermit zeigt KI-Agenten.

OpenHermit macht Websites für KI-Agenten bedienbar — und zeigt im Dashboard, welche Agenten kommen, was sie lesen und was sie tun.

1 Script-Tag

Integration wie ein Analytics-Snippet

MIT

Client-Library open source auf npm

WebMCP

Agenten können Formulare, Buchung, Kauf

openhermit.com live ansehen ↗ Ähnliches Projekt anfragen

Kurzfassung

OpenHermit (openhermit.com) ist ein Produkt von loaded.ch: Ein Script-Tag macht Websites für KI-Agenten bedienbar — Formulare ausfüllen, buchen, kaufen — und trackt gleichzeitig, welche Agenten die Website besuchen und was sie dort tun, inklusive IP-verifizierter Unterscheidung von Crawlern, handelnden Agenten und Automatisierung. Die Client-Library (@openhermit/js) ist open source (MIT) auf npm; Instructions und Guardrails steuert der Betreiber zentral im Dashboard. Die WebMCP-Technik dahinter setzt loaded auch in Kundenprojekten ein.

Ausgangslage

Das Problem hinter dem Projekt

Immer mehr Website-Traffic kommt nicht von Menschen, sondern von KI-Agenten — aber klassische Analytics sehen sie nicht, und klassische Websites können von Agenten zwar gelesen, aber nicht bedient werden. Wer wissen will, was ChatGPT, Claude und Co. auf der eigenen Website tun, hatte schlicht kein Werkzeug.

Die Produktidee verbindet deshalb zwei Hälften, die zusammengehören: Agenten handlungsfähig machen (WebMCP: Formulare, Buchungen, Käufe) und gleichzeitig sichtbar machen, was sie tun — inklusive Leitplanken, was sie dürfen.

Die Lösung

Was wir gebaut haben

Integration per Script-Tag

Einbau wie bei Google Analytics: ein Tag, keine Backend-Änderungen. Danach ist die Website für MCP-fähige Agenten bedienbar und jeder Agenten-Besuch wird erfasst.

Agent-Analytics-Dashboard

Welche Agenten besuchen die Website? Welche Seiten lesen sie, welche Aktionen führen sie aus? Echtzeit-Daten statt Vermutungen — die Datenbasis für jede Agent-Readiness-Entscheidung.

Instructions & Guardrails

Zentral steuern, was Agenten dürfen: welche Aktionen erlaubt sind, welche Informationen priorisiert werden, wo Grenzen liegen. Sicherheit ist Teil der Architektur, nicht ein Disclaimer.

Open Source

Der Code ist öffentlich — nachprüfbar statt Blackbox. Für ein Werkzeug, das zwischen Website und fremden KI-Agenten sitzt, ist Transparenz eine Sicherheitseigenschaft.

Tech-Stack: Next.jsSupabaseWebMCP

Die Architektur

Wie es wirklich gebaut ist

Das Script ist dependency-freies Vanilla-JavaScript, das die Host-Seite nie kaputt machen darf — jeder Pfad ist in try/catch gekapselt, «fail silently» ist Designprinzip. Beim Laden scannt es alle Formulare, erkennt den Formulartyp über gewichtete Signale (Kontakt, Buchung, Signup, Kauf …) und schliesst sensible Felder kategorisch aus: Passwörter und Kreditkartenfelder werden nie als Agenten-Aktionen exponiert. Auch Drittanbieter-Widgets (Calendly, Typeform, HubSpot, Intercom) werden erkannt und als Tools synthetisiert.

WebMCP wird doppelt implementiert: deklarativ über die W3C-Attribute im HTML und imperativ über navigator.modelContext.registerTool() mit AbortSignal-basiertem Cleanup — inklusive generiertem JSON-Schema pro Formular und einem execute(), das Felder füllt und die richtigen Events dispatcht, damit auch React- und Vue-Formulare reagieren. SPA-Navigation wird per MutationObserver erkannt, alles ist idempotent.

Die Agent-Erkennung ist zweistufig und misstrauisch: Der Client meldet, was er sieht, aber der Server entscheidet. Serverseitig werden User-Agents in crawler / actor / automation klassifiziert und gegen die publizierten IP-Ranges der Anbieter (OpenAI, Anthropic, Perplexity, Google, Bing) verifiziert — mit einem selbstgeschriebenen, dependency-freien IPv4/IPv6-CIDR-Matcher. «Verified» gibt es nur bei echtem IP-Match; der Server überschreibt Client-Angaben. Auch JS-lose Crawler, die nur Manifest oder well-known-Dateien abrufen, werden serverseitig erfasst.

Guardrails sind Teil des Datenmodells: Pro Website definiert der Betreiber Policy, Begrüssung und Regeln (etwa deny: purchase, require_confirmation: booking), pro Aktion eigene Prompts für vorher/Erfolg/Fehler. Ein einziges buildManifest() ist die Quelle der Wahrheit für alles, was Agenten lesen. Und bewusst anti-cloaking: Die Agenten-Orientierung wird als sichtbares, inspizierbares Element gerendert — kein versteckter Off-Screen-Prompt.

Stack im Detail

Client-Script: @openhermit/js — Vanilla JS, 0 Dependencies, MIT/npm
Plattform: Next.js 14, React 18, Tailwind 3.4
Datenbank: Supabase (RLS; events, agent_visits, actions)
Agent-Detection: UA-Taxonomie + IP-CIDR-Verifizierung (IPv4/IPv6)
Protokoll: WebMCP deklarativ + imperativ (registerTool)
Billing: Stripe (Hatchling gratis → Hermit → Colony → Hive)
E-Mail: Resend + react-email

Design-Rationale

Warum es so aussieht

OpenHermit sieht aus wie sein Publikum denkt: Neo-Brutalismus auf warmem Papier (#F9F7F2) mit sichtbarem 20-Pixel-Raster, dicken schwarzen Rahmen und Courier Prime als Headline-Schrift — Terminal-Ästhetik für ein Entwickler-Werkzeug. Türkis (#00CED1) als Primärfarbe, Orange und Violett codieren im Dashboard die Agenten-Typen (Actor, Automation, Crawler).

Die Einsiedlerkrebs-Metapher zieht sich durch bis in die Plan-Namen (Hatchling, Hermit, Colony, Hive) — ein technisches Produkt mit Persönlichkeit statt generischem SaaS-Look. Englischsprachig, weil das Publikum global ist.

Was wir daraus gelernt haben

Entwickler-Produkte leben von der ersten Viertelstunde: Wenn die Integration länger dauert als ein Analytics-Snippet, verliert man die Hälfte der Interessenten vor dem ersten Aha-Moment. Deshalb war "ein Script-Tag" das harte Design-Ziel — alles Komplexe lebt im Dashboard, nicht im Einbau.

FAQ

Fragen zu diesem Projekt

Was macht OpenHermit technisch?

Ein Script-Tag stellt MCP-fähigen KI-Agenten strukturierte Aktionen der Website bereit (Formulare, Buchung, Kauf) und protokolliert Agenten-Besuche und -Aktionen in ein Dashboard — mit serverseitiger Verifizierung der Agenten über die publizierten IP-Ranges der Anbieter. Instructions und Guardrails steuern zentral, was Agenten dürfen. Plattform auf Next.js und Supabase; die Client-Library ist open source (MIT).

Warum sollte meine Website für KI-Agenten bedienbar sein?

Weil Agenten zunehmend Aufgaben für Menschen erledigen: Termine buchen, Offerten anfragen, Produkte vergleichen. Eine Website, die Agenten nur lesen, aber nicht bedienen können, verliert diese Anfragen an bedienbare Konkurrenz. Die Grundlagen erklärt /leistungen/agent-readiness/.

Setzt loaded OpenHermit auch bei Kundenprojekten ein?

Ja — OpenHermit läuft auf loaded.ch selbst und wird bei Agent-Readiness-Projekten (ab CHF 2'900) mit eingerichtet: WebMCP-Aktionen, Analytics und Guardrails inklusive. Details unter /leistungen/agent-readiness/.

Passende Leistung zu diesem Projekt: Agent Readiness