Zum Inhalt springen
claude-os
Ratgeber

Claude Live Artifacts erstellen — die Anleitung

Live Artifacts sind interaktive Apps, die Claude direkt im Chat erzeugt — mit echtem State, Live-Datenanbindung über MCP, teilbarem Link und optionaler Authentifizierung. Sie ersetzen das, wofür ihr früher 2–5 Entwickler-Tage gebraucht hättet: interne Rechner, Dashboards, Kunden-Portale, Konfiguratoren. Dieser Ratgeber zeigt das saubere Setup, sieben fertige Beispiele aus KMU-Rollouts, Authentifizierungs-Pattern und die DSGVO-Sicht.

MS
Manuel Streit
· · 13 min Lesezeit

Das Wichtigste in 60 Sekunden

  • Live Artifact = ausführende App mit State, Inputs, Outputs, optional Live-Datenanbindung.
  • Stack: React + Tailwind + Lucide-Icons, in einem Sandkasten-iframe gerendert.
  • Datenanbindung via MCP-Server, eigene API oder Public-API-Calls.
  • Teilbar per Share-Link, optional iframe-embeddable.
  • Authentifizierung für sensible Daten Pflicht — Token, SSO, IP-Whitelist.
  • Wann lohnt es sich? Für interne Rechner, Dashboards, Quick-Tools — nicht als Ersatz für Production-Apps.
  • Aufwand: 30 Min für ein einfaches Tool, 2–5 Tage für komplexere Live-Anwendungen mit MCP-Anbindung.

Was ist ein Live Artifact genau?

Ein klassisches Artifact ist ein statisches Ergebnis — Markdown, Code, SVG. Ein Live Artifact ist eine ausführende Anwendung: React-Komponenten, State (useState, Zustand), Effekte (useEffect), API-Zugriffe.

  • Statisch: Du bekommst eine Tabelle. Zahlen ändern → neue Anfrage an Claude.
  • Live: Du bekommst einen Rechner. Du gibst Werte ein → Ergebnis erscheint sofort, ohne Claude erneut anzustoßen.

Live Artifacts laufen in einem Sandboxed iframe auf claude.ai — sicher isoliert, mit definierten Zugriffsrechten. Sie können externe APIs aufrufen, MCP-Server befragen und eigenen State halten. Mehr zu Artifacts allgemein: Claude Artifacts erklärt.

Wann lohnt sich ein Live Artifact?

Faustregel: Wenn du sonst eine Excel oder eine schnelle Web-App bauen würdest, aber dafür keine 2–5 Entwickler-Tage zur Verfügung hast — dann ist ein Live Artifact der richtige Hebel.

Lohnt sich für:

  • Interne Rechner (ROI, Pricing, Zeit-Schätzung).
  • Lebende Checklisten und Workflows mit State (Onboarding-Checkliste, Audit-Liste).
  • Quick-Dashboards (Sales-Pipeline-Übersicht, Marketing-KPIs).
  • Kunden-Portale für einfache Use-Cases (Statusseite, Self-Service-Konfigurator).
  • Prototypen, die in 1–2 Tagen ein Konzept testen sollen.
  • Konfiguratoren (Tarif-Konfiguration, Produkt-Auswahl, Bestell-Vorbereitung).

Lohnt sich nicht für:

  • Apps mit hunderten gleichzeitigen Nutzern (Production-Skalierung).
  • System-of-Record-Funktionen (Daten gehören in CRM/ERP, nicht ins Artifact).
  • High-Performance-Berechnungen.
  • Integrationen mit komplexer Auth-Logik (OAuth, MFA-Flows).

Voraussetzungen

  • Claude Pro/Team/Enterprise mit aktivierten Artifacts.
  • Für Live-Datenanbindung: MCP-Server oder öffentliche API mit CORS-Freigabe.
  • Für Auth: Token-Generator oder Identity-Provider (Auth0, Clerk, eigenes JWT-System).
  • Optional: ein eigener Sub-Domain zum Einbetten via iframe.

Schritt-für-Schritt: Erstes Live Artifact bauen

  1. Sag Claude klar, was du willst. Inputs, Outputs, Zweck. Beispiel: „Bau einen Brutto-Netto-Rechner für Deutschland: Eingabe Brutto-Jahreseinkommen, Steuerklasse, Bundesland. Output Netto-Monat, Sozialabgaben aufgeschlüsselt, Lohnsteuer.“
  2. Design grob beschreiben. „Tailwind, dunkler Akzent in Kupfer, einspaltig auf Mobile, zweispaltig auf Desktop.“
  3. Erste Iteration. Claude liefert ein Live Artifact. Im iframe siehst du sofort die App. Eingaben testen, Berechnungen prüfen.
  4. Feedback iterieren. „Mach die Eingabe-Felder größer. Füge ein Diagramm für die Aufschlüsselung hinzu. Speichere die letzte Eingabe in localStorage.“
  5. Live-Daten anbinden. Wenn nötig: „Hole die aktuellen Steuersätze über diese API: …“ oder „Frag den MCP-Server steuern.lokal nach den aktuellen Werten.“
  6. Auth ergänzen, falls sensible Daten: Token im URL-Parameter, der Server prüft, App entsperrt sich.
  7. Teilen oder einbetten. Share-Link generieren, oder per iframe in eure Website / euer Notion-Wiki einbinden.

Sieben Live-Artifact-Beispiele aus der Praxis

1. Angebots-Rechner für Agentur

Eingabe-Felder: Projektart, Stunden, Zusatzleistungen, Rabatt. Output: live berechnetes Angebot mit aufgeschlüsselten Posten, MwSt., Gesamtsumme. Druck-Export als PDF. Aufwand: 90 Minuten mit Claude statt 2 Entwicklertage.

2. Live-Dashboard für Geschäftsführer

Daten aus DATEV, HubSpot, Zendesk zusammengezogen. Refresh alle 5 Minuten via MCP-Pulls. Anzeige: Umsatz heute, neue Tickets, Pipeline-Wert, Top-3-Probleme.

3. Projekt-Status-Seite für Kunden

Asana-Daten live gerendert über MCP. Kunde sieht Aufgaben, Fortschritt, Blocker. Projektmanager spart pro Kunde eine Stunde Reporting pro Woche.

4. Lead-Qualifizierungs-Tool

Vertriebs-Mitarbeiter füllt Felder aus (Branche, Größe, Budget, Pain-Points). Live Artifact berechnet Score, schlägt Next-Step vor (Termin / Nurture / Ablehnen), schreibt das Ergebnis ins HubSpot-CRM via MCP.

5. Tarif-Konfigurator für Versicherung

Kunde stellt seinen Tarif zusammen, sieht live den Preis, Optionen (Selbstbeteiligung, Bausteine), kann Vergleich speichern, abschließen oder Kontakt anfordern.

6. Onboarding-Checkliste mit State

Neue Mitarbeiter haken Schritte ab (Hardware, Software, Zugänge, Training). Status wird gespeichert (localStorage oder via MCP), HR sieht Fortschritt zentral.

7. Schadens-Foto-Analyse für Versicherung

Foto-Upload → Claude analysiert, schätzt Schaden, schlägt Kategorisierung vor → Mitarbeiter freigibt → CRM-Eintrag.

Live-Daten via MCP anbinden

Der wahre Hebel: Live Artifacts mit eurer Datenwelt verbinden. Das geht über MCP-Server (für Claude-eigene Aufrufe) oder direkte API-Calls (im Artifact selbst).

MCP-Anbindung

Wenn ihr einen MCP-Server habt (z. B. für euer CRM), kann Claude beim Generieren des Artifact bereits aktuelle Daten ziehen — und dem Artifact als Initial-State mitgeben. Bei jedem neuen Lauf kommen frische Daten.

Beispiel: „Bau ein Dashboard für unsere Top-10-Kunden, hol die Daten via HubSpot-MCP.“ → Claude pulled, baut, liefert.

Direkte API-Calls aus dem Artifact

Die App selbst kann APIs aufrufen — z. B. eine eigene REST-API auf eurem Server. Wichtig:

  • CORS muss freigegeben sein für claude.ai-Domains.
  • Auth via Token im Header, im URL-Parameter oder via SSO.
  • Rate-Limit auf der Server-Seite, sonst Missbrauch durch geteilte Links.

Für saubere Anbindungen empfehlen wir, einen dünnen Wrapper-API zu bauen, die nur die nötigen Endpoints für Live Artifacts exponiert — niemals direkt das Production-CRM.

Authentifizierung für sensible Daten

Live Artifacts sind per Default öffentlich (sobald geteilt). Für vertrauliche Inhalte gibt es drei robuste Pattern:

Token-im-URL

Du erstellst pro Empfänger einen Token, hängst ihn an die Share-URL: ?token=abc123. Das Artifact prüft den Token gegen einen Server-Endpoint, entsperrt sich erst nach OK.

Time-Limited Links

Token mit Ablaufdatum. Nach 24 Std nicht mehr gültig. Sinnvoll für Kunden-spezifische Reports.

SSO / Login

Für interne Apps. Empfehlung: separater Auth-Service (Clerk, Auth0, Supabase Auth) — das Artifact prüft Session-Cookie oder JWT.

Für streng vertrauliche Daten lieber gar kein Live Artifact bauen, sondern eine richtige App (mit unserem Claude-API-Service).

Performance-Tipps

  • Initial-Daten in den Artifact-Code embedden, nicht jedes Mal API-Call. Refresh nur bei Bedarf.
  • Pagination für lange Listen. Niemals 10.000 Datensätze auf einmal.
  • Debouncing bei Eingabe-Feldern, die APIs aufrufen.
  • localStorage für State, der zwischen Sessions erhalten bleiben soll.
  • Loading-States sichtbar — sonst denken Nutzer, die App hängt.

Grenzen und Stolperfallen

  • Kein System-of-Record. Kritische Daten gehören ins CRM/ERP, nicht ins Artifact. Live Artifacts sind Front-Ends, keine Datenbanken.
  • Keine High-Performance-Berechnungen. Komplexe Algorithmen oder ML-Inferenz im Browser sind langsam — serverseitig erledigen.
  • Geteilte Links sind weiterleitbar. Wer den Link hat, sieht das Artifact (außer mit Auth-Schutz).
  • Keine produktive Skalierung. Für Kunden-Portale mit hunderten parallelen Nutzern: richtige App entwickeln.
  • Code-Größe-Limit. Sehr komplexe Apps werden im Artifact-Modus eng. Ab dem Punkt: in Repo migrieren und richtig deployen.
  • Browser-Kompatibilität. Sehr neue Web-APIs sind nicht in allen Browsern verfügbar — testen.

DSGVO bei Live Artifacts

Drei Kernfragen aus DSB-Sicht:

  1. Welche Daten verarbeitet das Artifact? Personenbezogene Daten gehören ins Verarbeitungsverzeichnis.
  2. Wo liegen die Daten? Im Artifact selbst (clientseitig) → unkritisch. Übermittlung an APIs / MCP-Server → die Endpoints sind die kritischen Punkte.
  3. Authentifizierung Pflicht bei jeder Verarbeitung personenbezogener Daten in geteilten Artifacts.

Bei sensiblen Anwendungsfällen (Gesundheit, HR, Finanzen): besser keine Live Artifacts, sondern richtige Apps mit klarer Auth- und Audit-Schicht. Für Standard-Use-Cases mit anonymisierten oder unkritischen Daten sind Live Artifacts völlig okay.

Komplette DSGVO-Übersicht: Ist Claude DSGVO-konform?

Wann ist es Zeit für eine richtige App?

Wir empfehlen Kunden, Live Artifacts zu „eskalieren“ auf eine richtige Web-App, wenn:

  • Mehr als 50 Nutzer regelmäßig auf das Tool zugreifen.
  • Auth komplexer wird (Rollen, Berechtigungen, MFA).
  • Audit-Trail Pflicht wird (regulierte Branchen).
  • Performance kritisch wird (Live-Updates, Push-Notifications).
  • Code-Komplexität steigt (mehrere Routen, Server-Logik, Datenbank).

Wir entwickeln in dem Fall die App auf Basis des bestehenden Artifact-Codes weiter — Claude hilft dabei, der Code zieht in ein eigenes Repo, deployed auf Vercel/Firebase/eurer Infrastruktur. Aufwand für ein typisches MVP: 5–15 Entwickler-Tage. Mehr: Claude-API-Integration.

Nächster Schritt

Wenn du Live Artifacts für euer Unternehmen einsetzen willst — wir bauen die ersten 3–5 produktiv einsatzfähigen Live Artifacts inklusive MCP-Anbindung, Auth-Konzept und DSGVO-Dokumentation. Live Artifacts bauen lassen oder Erstgespräch buchen.

Häufige Fragen

Noch offene Punkte?

Schreib uns auf hello@claude-os.de — oder buche direkt einen Termin, wir nehmen uns Zeit.

Kostet jedes Laden eines Artifacts Geld?
Bei reiner Anzeige nein — das Artifact läuft im Browser, ohne Claude-Aufrufe. Sobald innerhalb des Artifacts Claude-Aktionen ausgelöst werden (z. B. neue Generierung), fallen API-Kosten an — typisch 0,005 bis 0,05 Euro pro Aktion.
Kann ich Artifacts in unsere Website einbetten?
Teilweise — über iframe mit Share-Link. Der Empfänger sieht das Artifact, ohne sich bei Claude einzuloggen. Für tiefere Integration mit eurer Identity oder eurem Design-System lieber eine eigene Anwendung mit der Claude API.
Wie sicher sind Live Artifacts?
Der Code läuft sandboxed im iframe — kein direkter Zugriff aufs Host-Browser. Datenfluss läuft, wie ihr ihn programmiert. Für sensible Daten Auth Pflicht; für Production-Apps in regulierten Branchen lieber separate App.
Wie viele Nutzer kann ein Live Artifact tragen?
Auf Anthropic-Seite: praktisch unbegrenzt. Auf eurer Server-Seite (wenn ihr APIs anbindet): hängt von eurer Infrastruktur ab. Für interne KMU-Tools mit < 50 Parallel-Nutzern völlig unkritisch.
Kann ich Live Artifacts mit eigenem Branding versehen?
Ja, im Code (Logo, Farben, Fonts) komplett anpassbar. Das Artifact-Outer-Frame zeigt dezent die Claude-URL, das Inner-UI gehört euch.
Was passiert, wenn Anthropic das Feature ändert?
Bestehende Artifacts laufen weiter (Anthropic ist hier vorsichtig). Bei kritischen Anwendungen: Code regelmäßig exportieren und im eigenen Repo halten — dann seid ihr unabhängig.
Können Live Artifacts mit Claude Skills kombiniert werden?
Ja. Skills können Artifacts als Standard-Output definieren — z. B. ein „Angebots-Skill“ liefert immer ein Live Artifact mit Konfigurator. Mehr: Claude Skills erstellen.
Welche Frontend-Technologien werden unterstützt?
React mit JSX, Tailwind CSS, Lucide-Icons, Recharts (für Charts), shadcn/ui-Komponenten. Reines HTML/CSS/JS geht auch. Spezielle Frameworks (Vue, Svelte) im Artifact-Modus aktuell nicht.

Noch Fragen zu Claude Live Artifacts?

Wir beraten ehrlich — 30 Minuten, unverbindlich.

Termin buchen