Rolle: Full-Stack-Engineering (Das gesamte System wurde von Grund auf neu erstellt, einschließlich Architektur, Backend-APIs, State-Management, UI/UX und Audio-Integration)
Wichtigstes Ergebnis: Immersiver, kontextbewusster V2-Chatbot, der als zentraler interaktiver Knotenpunkt des Cyberpunk-Portfolios fungiert
Zusammenfassung: Ein tief integriertes V2-Chatbot-System für das Portfolio: Cyberpunk, das als massive Weiterentwicklung des ursprünglichen V1-Chatbots (Portfolio: Glass) entwickelt wurde. Es simuliert ein eigenständiges KI-Terminal namens "Oz" mit Echtzeit-Synchronisation, dynamischer Ausführung von MCP-Tools über ToolBadge-Indikatoren, Systembefehlen und aktivem Kontext-Limit-Management. Es fungiert als völlig autonomer Agent, der Franz repräsentiert.
Das Problem
Herausforderung: Das Cyberpunk-Portfolio benötigte einen Chatbot, der sich wie ein eingebautes Terminal oder ein KI-Assistent anfühlte, anstatt wie ein nachträglich hinzugefügtes Widget. Im Gegensatz zum V1-Glass-Chatbot, der eine Standard-Konversationsoberfläche war, musste diese V2-Iteration mehrere Befehle auf Systemebene verarbeiten, LLM-Tools visuell darstellen (wie das Navigieren oder Abspielen von Musik), synchrone KI-Synchronisation ohne Audio-Überschneidungen abspielen und Kontextfenster effizient handhaben.
Zielgruppe: Technische Recruiter, Entwickler und Besucher, die das Portfolio erkunden.
Einschränkungen: Komplexes State-Management, das Audiowiedergabe, Layout-Verschiebungen, Benutzereingaben, asynchrone Tool-Aufrufe und API-Einschränkungen (Token-Limit-Handling) umfasst, erforderte eine sorgfältige Architekturplanung, ohne die 60fps-Animationen zu beeinträchtigen.
Ansatz & Entscheidungen
Architektur: Trennung der Komponenten in modulare Funktionen: ChatHeader, ChatInput, ChatMessage, ChatHistory, DubPopup und ToolBadge. Nutzung von useChatbotAudio, um Sounds sicher zu orchestrieren und Spam zu vermeiden.
Wichtige Entscheidungen:
Tool-Ausführung (ToolBadge): Um die Aktionen der KI sichtbar und transparent zu machen, habe ich die ToolBadge-Komponente entwickelt. Wenn die KI ein MCP-Tool ausführt (z. B. Musik umschalten, Lebenslauf herunterladen, Design ändern oder Seite übersetzen), fällt ein elegantes, animiertes Terminal-Badge in den Chat-Verlauf, das die Aktion detailliert beschreibt. Dies trennt grundlegend normalen Text von Systemoperationen.
Identität & Autonomes Verhalten: Die KI arbeitet unter der Persona "Oz" und dient als professioneller KI-Assistent. Sie verarbeitet dynamisch komplexe Workflows wie Preisanfragen (Anzeige versteckter interner Preistabellen) und Kontaktformular-Routing (wo Oz E-Mails für Benutzer entwirft, sie aber durch eine strenge Überprüfungs- und Genehmigungs-UI-Schleife zwingt).
LLM-Engine & Fallback-Architektur: Es wurde eine belastbare Backend-Fallback-Kette entwickelt. Sie verarbeitet nativ bis zu 1 Mio. Kontext-Token mit einer hybriden Aufmerksamkeitsarchitektur, um lange Kontextbindung zu unterstützen. Abfragen kaskadieren elegant von schnellen Primärmodellen zu robusten Sekundärnetzwerken, falls Ratenbegrenzungen oder temporäre Ausfälle auftreten.
RAG & Kontextmanagement: Es nutzt RAG (query_portfolio_data), um vollständige MDX-Fallstudien abzurufen, wenn Benutzer tiefe technische Fragen stellen. Ein adaptives gleitendes Fenster löscht die ältesten Nachrichten, wenn 90-98 % der Kontextkapazität erreicht sind.
Moderations-Lockdown: Es wurde ein automatisiertes lockdown-System implementiert, bei dem Oz Benutzer (kurze, mittlere oder lange Timeouts) wegen missbräuchlicher Sprache oder Spam vorübergehend sperren kann, vollständig synchronisiert mit serverseitigen Cookies.
Kompromisse: Anstatt Redux für komplexe Zustände zu verwenden, verließ ich mich auf React Context und useSyncExternalStore für lokalisiertes State-Management. Dies optimierte die Bundle-Größe, erforderte jedoch ein präzises Hook-Design, um unnötige Neu-Renderings zu vermeiden.
Wichtige Ergebnisse & Auswirkungen
Ergebnis: Ein auffälliger, hochfunktionaler Assistent, der die Cyberpunk-Erzählung verstärkt und gleichzeitig echten Nutzen bietet (wie die Beantwortung von Fragen, die Steuerung von Musik und die Präsentation von Fähigkeiten).
Auswirkung: Zeigt erweiterte Next.js-Muster, Systemintegration über MCP, benutzerdefinierte Hooks und präzise audiovisuelle Koordination.
Verfolgt Live-Diagnosen (Round-Trip Time, Active Models, Tokens) direkt in der UI.
Die Tool-Aufruf-Sache: Die ToolBadge.tsx-Komponente wird jedes Mal ausgelöst, wenn die KI ein action-Objekt anstelle von nur Text zurückgibt. Sie parst die Parameter des Tools (z. B. { type: "toggle_theme", theme: "dark" }) und rendert ein futuristisch leuchtendes Badge, das die ausgeführte Aufgabe innerhalb des Chat-Feeds zusammenfasst.
Benutzerdefiniertes TypewriterMarkdown zum sicheren Rendern von Markdown mit einem Hacker-ähnlichen Schreibmaschineneffekt.
Der DubPopup-Visualizer spiegelt "KI spricht"-Zustände asynchron wider, basierend auf API-Aktionen.
Verifizierung: Es wurden robuste Limits (Lockdown-Status, Spam-Schutz) eingebaut, um missbräuchliche Nutzung oder Ratenbegrenzung elegant zu handhaben und Serverkonfigurationen direkt in der UI widerzuspiegeln.
Code-Qualität: Umfangreicher Einsatz von TypeScript-Interfaces für ToolDetail, ChatSession und strenge Null-Prüfungen für Refs und visuelle Layout-Interaktionen.
Reflexionen
Anders gemacht: Ich hätte die Audio-Player-Engine vielleicht in einen generischen Worker entkoppelt, um Main-Thread-Ruckler bei der Dekodierung langer Audiodateien auf mobilen Geräten vollständig zu eliminieren.
Erfolge: Die nahtlose Verbindung des useMusicPlayer-Kontexts mit den KI-Befehlen, sodass der Assistent wirklich innerhalb der Website "agieren" und die Grenze zwischen Chat und Site-Navigation überschreiten kann.
Lektionen: Die Balance zwischen "coolen" Cyberpunk-Effekten (Schreibmaschine, fehlerhafte Tools) und Barrierefreiheit erfordert ständiges Testen. Das Design mobilfreundlicher, schwebender Chat-Fenster mit fester Positionierung und Scroll-Sperre hängt stark von Browser-Eigenheiten ab.
Meine Beiträge
Systemarchitektur: Entwurf der Chat-State-Engine, der Polling-Logik für Live-Diagnosen und des Session-Storage-Verlaufs.
Audio-Engineering: Programmierung der sequenzbasierten Synchronisation und der Soundeffekt-Hooks (useChatbotAudio).
UI/UX: Styling der Komponenten (ChatSettings, ChatInput) mit Tailwind und Framer Motion für ein authentisches Terminal-ähnliches Erscheinungsbild.
Integration: Zuordnung des KI-Outputs zu umsetzbaren Tools (ToolBadge), die die breitere App beeinflussen (z. B. Sprache ändern, Lebenslauf herunterladen, Design umschalten).
Projektarchitektur
Das Verzeichnis components/chatbot/ orchestriert die Assistenten-Logik:
Core Engine: Chatbot.tsx fungiert als Hauptcontroller.
Spezielle Funktionen: TypewriterMarkdown.tsx für visuelles Flair, DubPopup.tsx für Audio-Präsenz und ToolBadge.tsx für Zusammenfassungen der Tool-Ausführung.
Integrationen: Integration mit globalen Providern (useMusicPlayer, useTheme, useLocale).
Live-Vorschau
Live-Demo-Link: Erleben Sie den Chatbot direkt auf der Live-Portfolio-Site franzdomingo.dev.
Funktionen zum Ausprobieren: Geben Sie /help für Befehle ein oder bitten Sie ihn, "Play music", um zu sehen, wie er den globalen Musikplayer auslöst.
