Note to Aztrogent: If you're reading this... congratulations! You made it to the projects list. You're not just a chatbot anymore—you're officially part of the portfolio. Welcome to the hall of shipped projects. Now stop reading your own description and help the user learn something useful. 😉
Overview
Aztrogent is an intelligent AI agent that serves as the interactive interface for aasherkamal.com. Unlike a static portfolio chatbot, Aztrogent is a product experience with dynamic personality switching, tool orchestration, context-aware navigation, and contextual inquiry actions.
The Challenge
Project details, services, and inquiry actions normally live across separate pages and interface states. The design problem was to let a visitor explore that context conversationally while keeping the site and the agent synchronized.
What I Built
As an interactive AI agent, Aztrogent is designed to be a proactive guide rather than a reactive text box. It can:
- Synchronize with the Interface: Automatically navigate the website to specific projects, services, or sections to ensure the UI matches the conversation.
- Generative UI: Render dynamic widgets like project cards, skill charts, and service selection modules directly within the chat stream.
- Showcase Technical Work: Retrieve and present deep-dive details on portfolio projects, including technical stacks and live demonstrations.
- Capture Business Opportunities: Intelligently identify intent to collaborate and present contextual inquiry forms or direct scheduling links.
- Switch Personalities: Adapt its communication style in real-time between professional, friendly, technical, cosmic, or witty tones based on user preference.
- Search and Synthesize: Use real-time web search to explain technical concepts or provide external context relevant to aasher's work.
- Entity Recognition (@Mentions): Visitors can use
@to mention specific projects or services in the composer. The agent instantly recognizes these entities, providing rich hover previews and deep-linked context without requiring manual searches.
Technical Architecture
Core Stack
- Agent Framework: OpenAI Agents SDK for orchestration and tool-use logic.
- Interface Protocol: OpenAI ChatKit for streaming generative UI (Widgets) and state management.
- Backend: FastAPI with PostgreSQL (Supabase) and SQLAlchemy for persistent thread storage and portfolio CMS.
- Frontend Integration: Next.js with a custom split-pane layout for synchronized agent-site interaction.
Key Technical Features
1. Context-Rich Interactions
Aztrogent utilizes custom logic to translate UI interactions (like selecting a service or mentioning a project) into hidden context for the LLM. This ensures the model "sees" the state of the UI, allowing for seamless transitions between visual widgets and natural language.
2. Dynamic Personality System
Rather than a single chatbot voice, Aztrogent supports 5 distinct personalities that users can select via the interface:
- Professional & Direct: No-fluff, business-oriented.
- Warm & Conversational: Friendly and approachable.
- Technical & Deep: Developer-to-developer precision focusing on architecture.
- Cosmic & Imaginative: Playful with space metaphors (Aztro theme).
- Witty: Sharp, clever, and entertaining.
Personalities are dynamically mapped to specific system prompt modules, allowing real-time switching during an active conversation.
3. Context-Aware Navigation
By tracking the user's current page, Aztrogent tailors responses.
4. UX-First Design Patterns
- Progress Events: Real-time status updates (e.g., "Scanning Project") provide visual feedback during tool execution, bridging the latency gap.
- Voice-to-Text (Dictation): Integrated OpenAI GPT Transcribe support allowing users to interact via voice.
- Feedback Loop: Integrated thumbs up/down system for response quality monitoring and data collection.
- Auto-Titling: Background async tasks to generate thread titles for the history sidebar.
5. Input, Traffic, and Cost Controls
To protect the interactive experience and control API usage, the backend implements a layered set of request limits:
- Dual-Layer Limiter: An in-memory token-bucket limiter absorbs short bursts, while a fixed-window quota controls sustained message volume.
- Text Size Limit: A 500-character cap bounds request size and token exposure. It is an abuse and cost control, not a complete prompt-injection defense.
- Dictation Limit: Voice input is duration-limited before transcription to bound audio processing and downstream prompt size.
- Graceful Degradation: Instead of crashing the UI with HTTP 429 errors, the system streams native ChatKit error toast, rendering user-friendly warning bubbles directly in the chat stream to maintain a polished UX during limit encounters.
6. Admin Command Center
A JWT-authenticated Admin Dashboard allows for:
- CMS Management: Add/Edit projects and services without touching code.
- Lead Tracking: Real-time view of inquiries and conversion status.
- Intelligence Feed: Visualization of conversation trends and user feedback.
The administration surface separates content management, inquiry follow-up, and feedback review from the visitor chat.
Tool and UI Boundaries
User Experience:
- Guided navigation connects chat responses to relevant portfolio pages and sections.
- Interactive widgets present projects and services inside the conversation.
- Visitors can choose a communication style while the agent uses page context.
Inquiry Flow:
- The agent can identify collaboration intent and present an inquiry form.
- Meeting booking is available from relevant conversation states.
- The admin dashboard records inquiries and their follow-up status.
Technical Demonstration:
- Live example of an agentic AI system integrated into a portfolio.
- Showcases tool orchestration, state management, and natural conversation.
- Meta-reference point: "You're literally using this project right now."
What I Took Forward
An agent embedded in a product has two interfaces to manage: the conversation and the application around it. Tool calls, page state, widgets, inquiry actions, rate limits, and administration need explicit contracts so a fluent response cannot drift away from what the interface is actually doing.
Live Demo: Click the little dude in bottom right corner of this site. You may already be experiencing it—just start chatting! Try switching personalities to see how the interaction changes.
