AI Architecture Patterns

Overview

This article documents the architecture behind the AI-powered chatbot experiences on uzdavines.ai. It covers how the platform securely integrates with large language models using server-side API proxying, streaming responses, and client-side conversation state management.

• Why it matters: AI chatbots that expose API keys or lack proper architectural boundaries create security risks and poor user experiences. This pattern keeps credentials safe while delivering real-time, conversational interactions.
• Key takeaways: API keys never reach the browser, responses stream in real time for a natural feel, and conversation context is maintained across exchanges without requiring a database (with plans for persistent storage via Supabase).

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