Das Dashboard ohne Backend

Was es ist und warum es zählt

Ein Investor fragt nach deinen Zahlen. Meist schickst du einen Screenshot oder eine Tabelle, die nach einer Woche veraltet ist. Oder du baust ein echtes Dashboard: Server, Datenbank, Login, Deploy. Das alles für eine Seite.

Claude Code kann eine echte Seite veröffentlichen, ein sogenanntes Artifact: eine Webseite auf claude.ai mit eigenem Link, die Claude aus deiner Sitzung heraus gestaltet und veröffentlicht. Kein eigener Server, der laufen muss, kein Deploy, kein Code zum Pflegen. Und wenn du deine Dienste als Connectors anschließt, zum Beispiel Stripe für Zahlungen und PostHog für Analytics, liest die Seite bei jedem Öffnen frische Daten.

Es gibt einen Haken, und um den geht es in dieser Anleitung: Live-Daten laufen über das Konto der Person, die die Seite ansieht, nicht über deins. Für dich und dein Team funktioniert das bestens. Für einen Investor außerhalb deiner Organisation machst du es anders: Claude veröffentlicht die Seite mit den neuen Zahlen erneut, unter demselben Link. Hier findest du beides.

1. Was du brauchst

• Einen Claude-Plan Pro, Max, Team oder Enterprise.
• Claude Code im Terminal oder in der Desktop-App, angemeldet mit deinem claude.ai-Konto (/login). Mit einem API-Schlüssel oder einem Cloud-Anbieter wie Amazon Bedrock kannst du nicht veröffentlichen.
• Die neueste Version von Claude Code: Live-Daten und Antworten auf Kommentare brauchen aktuelle Versionen.
• Bei Team und Enterprise sind Artifacts standardmäßig an, aber ein Owner kann sie abschalten, und Connector-Aufrufe aus Seiten haben einen eigenen Schalter (Enable artifact connectors).

Wenn du eine Seite verlangst und Claude eine lokale HTML-Datei ohne Link schreibt, sind Artifacts für deine Sitzung nicht aktiv: Geh diese Punkte noch einmal durch.

2. Schließ die Daten als claude.ai-Connectors an

Hier steckt das Detail, das am meisten Zeit kostet. Die veröffentlichte Seite kann nur die Connectors deines claude.ai-Kontos aufrufen. Lokal mit claude mcp add hinzugefügte MCP-Server helfen Claude beim Bauen der Seite, aber die veröffentlichte Seite kann sie nicht aufrufen.

1. Öffne claude.ai/customize/connectors.
2. Stripe hat einen offiziellen Connector im Verzeichnis: Such ihn, verbinde ihn, melde dich bei Stripe an und wähle, welche Konten Zugriff bekommen. Bei Team und Enterprise muss ihn zuerst ein Owner hinzufügen.
3. Für PostHog: Wenn du es nicht im Verzeichnis findest, nimm Add custom connector mit der Adresse https://mcp.posthog.com/mcp und melde dich an. Die Region, USA oder EU, wählt PostHog anhand deines Kontos.
4. Tipp in Claude Code /mcp: Die claude.ai-Connectors erscheinen in der Liste. Fehlen sie, prüf, ob du mit deinem claude.ai-Konto angemeldet bist und nicht mit einem API-Schlüssel.

Der Stripe-Connector kann auch schreiben, nicht nur lesen: Lass die Freigabe von Werkzeugen eingeschaltet, wie Stripe selbst empfiehlt.

3. Bestell das Dashboard

Je genauer du sagst, was du sehen willst, desto weniger Runden brauchst du. Schreib die PostHog-Events mit ihren echten Namen: Wenn du sie nicht kennst, lass Claude sie zuerst über den Connector auflisten.

Mach mir ein Artifact: ein Dashboard für einen Investor mit den Zahlen meiner App.
Oben vier Kacheln: Anmeldungen gesamt, Anmeldungen der letzten 7 Tage, aktive zahlende Abonnenten, monatlich wiederkehrender Umsatz.
Darunter: Anmeldungen pro Tag in den letzten 30 Tagen und der Onboarding-Funnel, mit wie vielen Leuten jeden Schritt erreichen und wo sie abspringen, in Prozent.
Anmeldungen und Onboarding aus PostHog (das Anmelde-Event ist [Event], die Onboarding-Schritte sind [Events in Reihenfolge]); Abonnenten und Umsatz aus Stripe.
Lies die Daten bei jedem Öffnen der Seite über die claude.ai-Connectors. Setz in jeden Live-Bereich eine Ersatznachricht, die sagt, welcher Connector nötig ist, falls er nicht antwortet. Schreib unter jede Zahl, woher sie kommt und wann sie gelesen wurde.

Bevor Claude Code eine Seite veröffentlicht, die Connectors aufruft, fragt es dich um Bestätigung. Dann gibt es dir den Link und öffnet den Browser; /artifacts zeigt dir alle deine Seiten.

4. Wie es aktuell bleibt

Eine Seite mit Connectors liest die Daten beim Öffnen und kann sich in Abständen oder per Knopf aktualisieren. Die Antworten werden im Browser der Betrachter zwischengespeichert: Beim erneuten Öffnen sehen sie sofort die letzten Zahlen und einen Moment später die frischen.

Füg dem Dashboard einen Knopf „Aktualisieren“ hinzu und eine automatische Aktualisierung alle 15 Minuten, solange die Seite offen ist. Zeig oben die Uhrzeit der letzten Aktualisierung. Wenn ein Connector nicht antwortet, lass die letzten Zahlen stehen und schreib dazu, dass sie nicht aktuell sind. Dann veröffentliche unter demselben Link neu.

Denk daran, worüber diese Aufrufe laufen: über das Konto der Betrachter, die beim ersten Mal zustimmen müssen. Zwei Leute, die dieselbe Seite öffnen, können unterschiedliche Daten sehen. Wer den Connector nicht verbunden hat oder ablehnt, sieht die Seite ohne Live-Bereiche.

Für einen Investor: dieselbe Seite, neu veröffentlicht

Für alle, die den öffentlichen Link ohne claude.ai-Konto oder von außerhalb deiner Organisation öffnen, laufen die Connectors nicht. Also machst du eine Version mit den Zahlen darin und hältst sie frisch, indem du sie unter demselben Link neu veröffentlichst: Wer die Seite offen hat, sieht die Änderung sofort.

Mach eine Kopie des Dashboards für den Investor, ohne Connector-Aufrufe: Lies jetzt die Zahlen aus Stripe und PostHog und setz sie in die Seite, mit Datum und Uhrzeit der Abfrage. Veröffentliche sie als neues Artifact und gib mir den Link.

Zum Aktualisieren, auch aus einer neuen Sitzung, gibst du Claude den Link:

Aktualisiere [Link des Artifacts] mit den heutigen Zahlen aus Stripe und PostHog. Gleiche Struktur, ändere nur die Zahlen und die Uhrzeit der Abfrage.

Um das jeden Morgen zu machen, kannst du /loop nutzen, solange die Sitzung offen bleibt: Ein wiederkehrender /loop läuft nach sieben Tagen ab. Bei einer öffentlichen Seite fragt Claude Code in jeder Unterhaltung beim ersten Ändern um Bestätigung. Geplante Cloud-Aufgaben dagegen veröffentlichen eine öffentlich geteilte Seite nicht neu, ohne dich zu fragen.

5. Wer sie sieht

• Am Anfang siehst nur du sie. Zum Teilen öffnest du die Seite im Browser und nutzt Share oben.
• Bei Pro und Max teilst du sie über einen öffentlichen Link: Jeder, der ihn hat, kann sie ohne Anmeldung öffnen.
• Bei Team und Enterprise gibst du sie bestimmten Personen deiner Organisation oder der ganzen Organisation. Der öffentliche Link ist aus, bis ein Owner External sharing einschaltet.
• Jede Veröffentlichung ist eine Version: Unter Share wählst du, welche die anderen sehen, oder du zeigst immer die neueste.
• Zum Entfernen: /artifacts, Seite wählen und d drücken. Das ist endgültig: Der Link funktioniert für niemanden mehr, auch nicht für dich.

Die Regel, die ich mir setzen würde: In die öffentliche Version kommen nur Zahlen, die du auch per E-Mail schicken würdest. Wer den Link hat, kann ihn an jeden weitergeben.

6. Kommentare, auf die Claude antwortet

Wenn du die Seite innerhalb deiner Organisation teilst, also bei Team oder Enterprise, können die Betrachter Kommentare hinterlassen. Wer sie nur über den öffentlichen Link öffnet, sieht keine und kann keine schreiben.

1. Jemand, der die Seite bearbeiten darf, schreibt einen Kommentar und schickt ihn mit Send to Claude an Claude, oder schreibt @claude in den Kommentar.
2. Claude Code beobachtet die in deiner Sitzung veröffentlichten Seiten: Der Kommentar kommt dort an, Claude liest den Thread und antwortet. Die Antwort erscheint als Claude, über dich.
3. Wenn dein Berechtigungsmodus ihm erlaubt, ohne Nachfrage zu posten, antwortet es selbst. Sonst fragt es dich vor dem Lesen des Threads und vor dem Antworten um dein Okay.
4. Zum Stoppen: Einmal Strg+C bei leerem Prompt pausiert die Antworten; in /tasks stoppst du eine einzelne Seite.

Claude antwortet nur auf Threads, die ihm jemand geschickt hat: Die anderen bleiben offen, bis eine Person sie schließt. Du kannst die Kommentare auch selbst anfordern:

Lies die Kommentare auf [Link des Artifacts]. Beantworte die Fragen zu den Zahlen, indem du erklärst, woher jede Zahl kommt, setz die gewünschten Änderungen um und veröffentliche neu. Wenn eine Bitte ändert, was wir nach außen zeigen, frag mich vorher.

Häufige Fehler

• Stripe und PostHog nur mit claude mcp add anschließen. Die veröffentlichte Seite ruft nur claude.ai-Connectors auf.
• Dem Investor die Live-Version schicken. Von außerhalb deiner Organisation laufen die Connectors nicht, und er sieht leere Kacheln.
• Die Ersatznachrichten vergessen. Wer einen Connector nicht verbunden hat, sieht einen leeren Bereich und versteht nicht, warum.
• Annehmen, dass jeder Kommentar bei Claude ankommt. Nur die, die jemand mit Bearbeitungsrecht per Send to Claude oder @claude schickt.

Checkliste

• Ich habe einen Pro-, Max-, Team- oder Enterprise-Plan und habe /login gemacht
• Stripe und PostHog sind Connectors auf claude.ai, und /mcp zeigt sie
• Jeder Live-Bereich hat eine Ersatznachricht
• Unter jeder Zahl stehen Quelle und Uhrzeit der Abfrage
• Der Investor bekommt eine Version mit den Zahlen darin, nicht die Live-Version
• Ich habe über den Share-Knopf festgelegt, wer sie sieht

Häufige Fragen