AI Architecture Patterns
The uzdavines.ai platform integrates AI through conversational chatbot interfaces. Both the homepage and resume sites use the same architectural pattern with application-specific system prompts.
Architecture Overview
+------------------+ +-------------------+ +------------------+
| React Client | --> | Next.js API Route | --> | Claude API |
| (Browser) | | (/api/chat) | | (Anthropic) |
| | <-- | | <-- | |
+------------------+ +-------------------+ +------------------+
| |
| Conversation | API key stays
| state in React | server-side
| (client memory) | (never exposed)
v v
Key Design Decisions
Server-Side API Keys
API calls to the Claude API are proxied through Next.js API routes (/api/chat). The API key never reaches the browser.
Client --> /api/chat (Next.js Route) --> Anthropic API
|
+-- API key loaded from environment variable
+-- Request validation
+-- Rate limiting (future)
Streaming Responses
Both chatbots use streaming responses for a natural conversation feel. The API route streams tokens as they arrive from the Claude API, rather than waiting for the full response.
Conversation History
Conversation history is maintained in React state on the client side. Each message exchange is appended to the history array and sent with subsequent requests for context continuity.
Current: Client-side state (in-memory, lost on page refresh) Future: Supabase for persistent conversation storage
Chatbot Implementations
Homepage Chatbot
A general-purpose AI assistant on the main homepage that can discuss Bobby's expertise, the platform, and AI topics.
Pierre — Resume Chatbot
Pierre is Bobby's AI "colleague" on the resume page. Pierre has specific behavioral guidelines:
- Professional, friendly, and neutral tone
- Speaks as if at a professional networking event
- Refers to Bobby in third person ("Bobby has experience with...")
- Admits gaps honestly — never fabricates experience
- Knowledge sourced from Bobby's resume and supplemental notes
Technology Stack
| Component | Technology | Purpose |
|---|---|---|
| AI Model | Claude (Anthropic) | Conversational intelligence |
| API Proxy | Next.js API Routes | Secure key management |
| Client State | React useState | Conversation memory |
| Streaming | Server-Sent Events | Real-time response delivery |
| Future Storage | Supabase | Persistent conversations |