AI Chat Assistant for Portfolio Site
When visitors land on your portfolio, they often have questions. I added an AI chat assistant that answers them 24/7 and lets visitors book a call without leaving the page. Here's how it works.
Architecture
A static site on Vercel with a serverless API route that handles chat requests and calls OpenAI. The profile context defines everything the AI knows; the frontend never sees the API key.
Implementation
Vanilla JS chat widget, message formatting (bold, links, CTA button), mobile-responsive panel. GPT-4o-mini for cost-effective Q&A.
Lessons Learned
Keeping responses concise, handling LinkedIn URLs with/without protocol, and fixing mobile panel cutoff with position: fixed.
Outcome: Visitors can ask about services or booking and get an instant, helpful response.