Skip to main content

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

ComponentTechnologyPurpose
AI ModelClaude (Anthropic)Conversational intelligence
API ProxyNext.js API RoutesSecure key management
Client StateReact useStateConversation memory
StreamingServer-Sent EventsReal-time response delivery
Future StorageSupabasePersistent conversations