Role: Full-Stack Engineering (Created the entire system from scratch including Architecture, Backend APIs, State Management, UI/UX, and Audio Integration)
Key Result: Immersive, context-aware V2 chatbot acting as the central interactive node of the cyberpunk portfolio
Summary: A deeply integrated V2 chatbot system for the Portfolio: Cyberpunk, built as a massive evolution over the original V1 Chatbot (Portfolio: Glass). It simulates an AI construct terminal named "Oz" featuring real-time dubbing, dynamic MCP (Model Context Protocol) tool execution via ToolBadge indicators, system commands, and active context limit management. It acts as a fully autonomous agent representing Franz.
The Problem
Challenge: The cyberpunk portfolio required a chatbot that felt like a built-in terminal or AI assistant rather than an afterthought widget. Unlike the V1 Glass Chatbot which was a standard conversational interface, this V2 iteration needed to process multiple system-level commands, visually render LLM tool calls (like navigating or playing music), play synchronized AI dubbing without audio overlap, and handle context windows efficiently.
Audience: Technical recruiters, developers, and visitors exploring the portfolio.
Constraints: Complex state management involving sound playback, UI layout shifts, user typing, rendering asynchronous tool calls, and API constraints (tokens limit handling) required careful architectural planning without compromising the 60fps animations.
Approach & Decisions
Architecture: Separated components into modular features: ChatHeader, ChatInput, ChatMessage, ChatHistory, DubPopup, and ToolBadge. Utilized useChatbotAudio to orchestrate sounds securely avoiding spam.
Key Decisions:
Tool Call Execution (ToolBadge): To make the LLM's actions visible and transparent, I built the ToolBadge component. When the AI executes an MCP tool (e.g., toggling music, downloading a resume, changing the theme, or translating the site), a sleek, animated terminal badge drops into the chat flow detailing the action. This fundamentally separates normal text from system operations.
Identity & Autonomous Behavior: The AI operates under the persona "Oz", serving as a professional AI assistant. It dynamically handles complex workflows such as Pricing Inquiries (displaying hidden internal pricing tables) and Contact Form Routing (where Oz drafts emails for users but forces them through a strict review-and-approve UI loop).
LLM Engine & Fallback Architecture: Built a resilient backend fallback chain. It natively processes up to 1M context tokens with a hybrid attention architecture to support long-context retention. Queries cascade gracefully from primary fast models down to robust secondary networks if rate-limits or temporary outages hit.
RAG & Context Management: It utilizes RAG (query_portfolio_data) to fetch entire MDX case studies when users ask deep technical questions. An adaptive sliding window drops oldest messages when reaching 90-98% of the context cap.
Lockdown Moderation: Implemented an automated `lockdown` system where Oz can temporarily ban users (short, medium, or long timeouts) for abusive language or spam, fully synced with server-side cookies.
Trade-offs: Instead of using Redux for complex state, I relied on React Context and useSyncExternalStore for localized state management, which optimized bundle size but required precise hook design to prevent unneeded re-renders.
Key Results & Impact
Outcome: A striking, highly functional assistant that enhances the cyberpunk narrative while providing real utility (like answering questions, controlling music, and showcasing skills).
Impact: Demonstrates advanced Next.js patterns, system integration via MCP, custom hooks, and precise audio-visual coordination.
Metric
Result
Performance
Optimized via lazy loading & strict refs
Interactivity
Audio, tool execution, terminal commands
Resilience
Live context size & API degradation detection
Technical Deep Dive
Notable Details:
Tracks live diagnostics (Round-Trip Time, Active Models, Tokens) directly in the UI.
The Tool Call Thingy: The ToolBadge.tsx component is triggered every time the AI returns an action object rather than just text. It parses the tool's parameters (like { type: "toggle_theme", theme: "dark" }) and renders a futuristic glowing badge summarizing the executed task inside the chat feed.
Custom TypewriterMarkdown for rendering markdown safely with a hacker-like typewriter effect.
The DubPopup visualizer reflects "AI speaking" states asynchronously based on API actions.
Verification: Built robust limits (Lockdown states, spam protection) to gracefully handle abusive usage or rate limiting, reflecting server configurations directly in the UI.
Code Quality: Extensive use of TypeScript interfaces for ToolDetail, ChatSession, and strict null checks on refs and visual layout interactions.
Reflections
Differently: I might have decoupled the audio player engine to a generic worker to completely eliminate any main thread stutters when decoding long audio files on mobile devices.
Successes: Seamlessly connecting the useMusicPlayer context with the AI commands so the assistant can truly "act" within the website, crossing the boundary between chat and site navigation.
Lessons: Balancing "cool" cyberpunk effects (typewriter, glitched tools) with accessibility requires constant testing. Designing mobile-friendly floating chat windows with fixed positioning and scroll lock is highly dependent on browser quirks.
My Contributions
System Architecture: Designed the chat state engine, polling logic for live diagnostics, and session storage history.
Audio Engineering: Programmed the sequence-based dubbing and sound effect hooks (useChatbotAudio).
UI/UX: Styled the components (ChatSettings, ChatInput) using Tailwind and Framer Motion for authentic terminal-like appearance.
Integration: Mapped AI output to actionable tools (ToolBadge) affecting the broader app (e.g., changing language, downloading resume, toggling theme).
Project Architecture
The components/chatbot/ directory orchestrates the assistant logic:
Core Engine: Chatbot.tsx acts as the main controller.
