Wie unsere KI 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.
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 unserer 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
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 wir auch für Kunden verwenden. Lassen Sie uns gemeinsam etwas Intelligentes bauen.
Gespräch starten