Wie die KI dieser Website wirklich funktioniert
Jedes KI-Feature auf dieser Website wird von echter AWS-Infrastruktur angetrieben. Erkunden Sie die Architektur, Services und technischen Abläufe hinter jedem einzelnen.
AI Playground
Beschreiben. Zusehen. Fertig.
Tech-Stack-Berater
Projekt beschreiben. Stack erhalten.
KI-Agenten-Visualisierer
KI beim Denken zusehen — Schritt für Schritt.
KI-Chat-Assistent
Fragen Sie alles über creative-it.
Website Remix
Diese Website mit KI neu gestalten.
Live-Übersetzung
Diese Website in 25+ Sprachen lesen.
Agentic Coding Stats
Live-GitHub-Aktivität von KI-Agenten.
Cloud-Kosten-Check
Was kostet Ihre Cloud wirklich?
EU-AI-Act-Check
In welche Risikoklasse fällt Ihre KI?
Modell-Vergleich
Ein Prompt. Drei Modelle.
Architecture
Full AWS service map
Beschreiben. Zusehen. Fertig.
Geben Sie eine Beschreibung einer beliebigen UI-Komponente ein und sehen Sie zu, wie KI produktionsreifes HTML + Tailwind CSS in Echtzeit generiert. Unterstützt mehrstufige Konversationen zum Verfeinern und Iterieren Ihrer Komponente.
Try itHow It Works
Ihr Prompt wird an einen API-Gateway-Endpunkt gesendet, der von einer Lambda-Funktion unterstützt wird. Das Lambda ruft Amazon Bedrock mit Claude auf und streamt Tokens über eine Chunked-HTTP-Response zurück. Das Frontend rendert jeden Chunk in Echtzeit in ein Live-Preview-Iframe.
Technical Flow
Benutzer gibt eine Komponentenbeschreibung im Browser ein
Anfrage trifft auf API Gateway mit Rate Limiting (10/Tag pro IP)
Lambda erstellt einen System-Prompt, optimiert für HTML/Tailwind-Generierung
Amazon Bedrock streamt Claudes Antwort Token für Token
Frontend rendert jeden Chunk in ein Sandbox-Iframe in Echtzeit
Konversationsverlauf wird client-seitig für mehrstufige Verfeinerung gespeichert
AWS Services
Projekt beschreiben. Stack erhalten.
Beschreiben Sie Ihre Projektanforderungen und erhalten Sie KI-gestützte Architekturempfehlungen mit komplettem Tech-Stack, Begründung und einem Mermaid-Architekturdiagramm. Stellen Sie Rückfragen, um die Empfehlungen zu verfeinern.
Try itHow It Works
Die Lambda-Funktion sendet Ihre Projektbeschreibung über Bedrock an Claude mit einem spezialisierten System-Prompt, der das Modell anweist, Anforderungen zu analysieren, Technologien zu empfehlen und ein Mermaid-Diagramm zu generieren. Antworten werden mit einem speziellen Marker-Format für den Diagramm-Abschnitt zurückgestreamt.
Technical Flow
Benutzer beschreibt seine Projektanforderungen
Lambda sendet den Prompt mit architektur-fokussierten System-Instruktionen an Bedrock
Claude analysiert Anforderungen und generiert strukturierte Empfehlungen
Antwort enthält ein Mermaid-Diagramm zwischen ---DIAGRAM--- Markern
Frontend rendert Markdown-Empfehlungen und lädt Mermaid.js für das Diagramm
Rückfragen behalten den Konversationskontext für tiefere Analyse bei
AWS Services
KI beim Denken zusehen — Schritt für Schritt.
Wählen Sie ein Szenario (Code-Review, Datenanalyse, Deployment, Bug-Fix) und beobachten Sie, wie ein KI-Agent das Problem aufschlüsselt, eine Lösung plant, Schritte ausführt und Ergebnisse verifiziert — alles live gestreamt in eine Terminal-ähnliche Oberfläche.
Try itHow It Works
Das Lambda empfängt eine Szenario-ID, konstruiert eine mehrstufige Prompt-Kette und ruft Bedrock für jede Agentenphase auf (Denken → Planen → Ausführen → Verifizieren → Ergebnis). Die Ausgabe jeder Phase wird als Newline-delimited JSON gestreamt, wobei das Frontend die Pipeline-Visualisierung in Echtzeit aktualisiert.
Technical Flow
Benutzer wählt ein vordefiniertes Szenario (z.B. 'Code-Review')
Lambda empfängt das Szenario und initiiert eine mehrphasige Prompt-Kette
Jede Phase (Denken, Planen, Ausführen, Verifizieren, Ergebnis) ruft Bedrock unabhängig auf
Antworten werden als NDJSON mit Schritt-Metadaten gestreamt
Frontend hebt den aktiven Pipeline-Schritt hervor und fügt Terminal-Ausgabe an
Rate Limiting verfolgt die tägliche Nutzung pro IP
AWS Services
Fragen Sie alles über creative-it.
Ein schwebendes Chat-Widget, das Fragen zu den Dienstleistungen, Prozessen, dem Team und den Fähigkeiten von creative-it beantwortet. Hält den Session-Kontext für natürliche Folgekonversationen mit Streaming-Antworten aufrecht.
How It Works
Das Lambda nutzt eine Bedrock Knowledge Base, die von einem S3-Bucket mit kuratierten Unternehmensdokumenten unterstützt wird. Wenn ein Benutzer eine Frage stellt, wird RAG (Retrieval-Augmented Generation) durchgeführt — relevante Chunks aus der Wissensbasis abgerufen und dann mit Claude eine fundierte Antwort generiert. Session-IDs ermöglichen mehrstufige Konversationen.
Technical Flow
Benutzer tippt eine Frage in das schwebende Chat-Widget
Anfrage enthält eine Session-ID für Konversationskontinuität
Lambda fragt die Bedrock Knowledge Base nach relevanten Dokumenten-Chunks ab
Abgerufener Kontext wird in Claudes Prompt injiziert (RAG-Muster)
Claude generiert eine fundierte Antwort, die zum Widget zurückgestreamt wird
Session-Status bleibt über Nachrichten hinweg für Rückfragen erhalten
AWS Services
Diese Website mit KI neu gestalten.
Geben Sie ein visuelles Thema ein (z.B. 'Retro 80er Neon' oder 'minimalistisches Monochrom') und KI generiert individuelles CSS, das das gesamte Erscheinungsbild der Website in Echtzeit transformiert. Jederzeit zurücksetzen auf das Original.
How It Works
Das Lambda sendet Ihre Themenbeschreibung an Claude mit einem System-Prompt, der die CSS Custom Properties und die Design-Token-Struktur der Website enthält. Claude generiert überschreibendes CSS, das die bestehenden Theme-Variablen anspricht. Das Frontend injiziert das CSS als <style>-Tag und stylt die Seite sofort um.
Technical Flow
Benutzer gibt eine Themenbeschreibung ein (z.B. 'warme Erdtöne')
Lambda sendet den Prompt mit dem CSS-Variablen-Schema der Website
Claude generiert CSS-Überschreibungen für die Theme Custom Properties
Antwort wird mit CSS zwischen ---CSS--- Markern gestreamt
Frontend extrahiert das CSS und injiziert es als <style>-Element
Ein Banner erscheint mit einem Reset-Button zur Wiederherstellung des Original-Themes
AWS Services
Diese Website in 25+ Sprachen lesen.
Klicken Sie auf eine Sprachflagge und die gesamte Seite wird vor Ort übersetzt — Überschriften, Absätze, Buttons und alles andere. Übersetzungen sind kontextbewusst und behalten die Formatierung bei. Jederzeit auf Englisch zurücksetzen.
How It Works
Das Frontend sammelt alle übersetzbaren Textknoten aus dem DOM, bündelt sie (50 pro Anfrage) und sendet sie an ein Lambda, das Claude mit übersetzungsspezifischen Prompts aufruft. Claude gibt ein JSON-Array übersetzter Strings zurück, das das Frontend auf die entsprechenden DOM-Elemente anwendet.
Technical Flow
Benutzer klickt eine Sprachflagge (z.B. Deutsch, Japanisch)
Frontend durchläuft das DOM und sammelt Text aus übersetzbaren Elementen
Originaltext wird in einer Map für späteres Zurücksetzen gespeichert
Texte werden gebündelt (50 pro Anfrage) und an das Übersetzungs-Lambda gesendet
Claude übersetzt den Batch unter Beibehaltung von Formatierung und Kontext
Übersetzte Strings werden auf DOM-Elemente angewendet; ein Banner zeigt die aktive Sprache an
AWS Services
Live-GitHub-Aktivität von KI-Agenten.
Zeigt Echtzeit-GitHub-Statistiken — Commits, geänderte Zeilen und ein 7-Tage-Aktivitätsdiagramm — aus den Repositories meiner Organisation. Eine KI-generierte Erzählung fasst die Entwicklungsaktivität des Tages zusammen.
Try itHow It Works
Zwei Lambda-Funktionen treiben dieses Feature an. Das Stats-Lambda fragt die GitHub-API nach Commit- und Diff-Daten über alle Org-Repos ab und cached die Ergebnisse in DynamoDB mit TTL. Das Story-Lambda nimmt die Statistiken und sendet sie an Claude, der eine kreative Erzählung über die Coding-Aktivität des Tages generiert.
Technical Flow
Seite wird geladen und ruft /github-stats von der API ab
Stats-Lambda prüft den DynamoDB-Cache (5-Minuten-TTL)
Bei Cache-Miss fragt Lambda die GitHub-API nach organisationsweiten Commit-Daten ab
Statistiken werden aggregiert (24h, 7d) und Verlaufspunkte gespeichert
Frontend rendert Stats-Karten und zeichnet ein Canvas-basiertes Aktivitätsdiagramm
Story-Lambda sendet Statistiken an Claude für eine narrative Zusammenfassung
AWS Services
Was kostet Ihre Cloud wirklich?
Beschreiben Sie ein beliebiges System — Cloud oder On-Premise — und erhalten Sie eine realistische monatliche AWS-Kostenschätzung als Spannen, plus was ein Serverless-Umbau derselben Last kosten und sparen würde.
Try itHow It Works
Eine Lambda-Funktion schickt Ihre Beschreibung mit einem Kostenberater-System-Prompt auf Basis von eu-central-1-Listenpreisen an Claude via Bedrock. Das Modell legt seine Annahmen explizit offen, schätzt Kosten pro Service und berechnet das Serverless-Einsparpotenzial. Die Antwort streamt Token für Token zurück.
Technical Flow
Nutzer beschreibt System und Last
Lambda leitet die Beschreibung mit Kostenanalyse-Anweisungen an Bedrock weiter
Claude leitet Annahmen ab (Traffic, Storage, Region) und listet sie transparent auf
Schätzungen pro Service und ein Serverless-Vergleich streamen als Markdown zurück
Rückfragen verfeinern die Schätzung im Gesprächskontext
AWS Services
In welche Risikoklasse fällt Ihre KI?
Beschreiben Sie einen KI-Anwendungsfall und erhalten Sie eine Ersteinschätzung nach dem EU AI Act (Verordnung (EU) 2024/1689): Risikoeinstufung mit den relevanten Artikeln, Ihre Pflichten, DSGVO-Berührungspunkte und praktische nächste Schritte.
Try itHow It Works
Die Lambda schickt Ihren Anwendungsfall mit einem Compliance-Analyst-System-Prompt an Claude. Das Modell beginnt seine Antwort mit einem maschinenlesbaren Risiko-Marker, den das Frontend in ein farbiges Badge übersetzt, gefolgt von der gestreamten Einschätzung. Jede Antwort endet mit einem Hinweis, dass es sich nicht um Rechtsberatung handelt.
Technical Flow
Nutzer beschreibt den KI-Anwendungsfall
Lambda leitet ihn mit AI-Act-Klassifizierungs-Anweisungen an Bedrock weiter
Claude stuft den Fall ein (verboten / hoch / begrenzt / minimal / unklar)
Ein ---RISK----Marker am Streamanfang steuert das Badge in der UI
Pflichten, DSGVO-Berührungspunkte und nächste Schritte streamen als Markdown zurück
AWS Services
Ein Prompt. Drei Modelle.
Schickt denselben Prompt an drei Modellfamilien auf Amazon Bedrock — immer die neueste verfügbare Generation von Claude Sonnet, Claude Haiku und Amazon Nova Lite — und zeigt die Antworten nebeneinander mit Latenz, Token-Verbrauch und ungefähren Kosten pro Aufruf.
Try itHow It Works
Die Lambda nutzt Bedrocks Converse API, die Requests über Modellanbieter hinweg normalisiert, und ruft alle Modelle parallel auf. Jedes Ergebnis wird in dem Moment als zeilengetrenntes JSON-Event in die Antwort geschrieben, in dem das Modell fertig ist — das schnellste Modell erscheint also zuerst in der UI.
Technical Flow
Nutzer gibt einen einzelnen Prompt ein
Lambda ruft alle drei Modelle parallel über die Converse API auf
Latenz und Token-Verbrauch werden pro Aufruf gemessen
Kosten werden aus On-Demand-Listenpreisen pro 1K Tokens berechnet
Ergebnisse streamen als NDJSON-Events zurück und füllen ihre Spalte beim Eintreffen
AWS Services
Der komplette Stack
Alle KI-Features laufen auf einer serverlosen AWS-Architektur. Hier sind alle beteiligten Services, gruppiert nach Schicht.
KI / ML Schicht
Managed LLM-Inferenz mit Claude — treibt alle KI-Features an
RAG-Pipeline für die Dokumentenabfrage des Chat-Assistenten
Compute-Schicht
Serverlose Funktionen für jeden API-Endpunkt — null Leerlaufkosten
REST-APIs mit Throttling, CORS und benutzerdefiniertem Domain-Mapping
Datenschicht
Low-Latency-Caching für GitHub-Statistiken und Rate Limiting
Dokumentenspeicher für die Wissensbasis und statische Assets
Netzwerk & Orchestrierung
CDN für die statische Astro-Site und Asset-Auslieferung
Infrastructure as Code — der gesamte Stack in TypeScript definiert
Zentrales Logging, Metriken und Alerting über alle Lambdas
Feingranulare Berechtigungen zwischen Services
Wollen Sie das für Ihr Produkt?
Jedes Feature auf dieser Website wird mit den gleichen Tools und Mustern gebaut, die ich auch für Kundenprojekte verwende. Lassen Sie uns gemeinsam etwas Intelligentes bauen.
Gespräch starten