Blog & Articles

Insights on web development, AI integration, and software engineering best practices

AI Chat Assistant: Architecture Overview
AI & Portfolio

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.

Workflows vs. Agents: Architecture Comparison
AI & Architecture

Workflows vs. Agents: Choosing the Right Architecture for Agentic Systems

When building with LLMs, the choice between a predefined workflow and an autonomous agent depends on your requirement for predictability versus flexibility. Learn when to use each approach and how to mitigate the risks of agentic systems.

Workflows (Orchestrated Paths)

In a workflow, the system follows code-defined logic. This is ideal for production environments where reliability and latency are priorities. Common patterns include Prompt Chaining, Routing, Parallelization, Orchestrator-Worker, and Evaluator-Optimizer.

Agents (Dynamic Autonomy)

Agents are used when the steps cannot be hardcoded. They utilize feedback loops to observe results and adjust their actions dynamically. While highly flexible and capable of solving open-ended problems, they require robust monitoring and sandboxing.

Risks and Mitigation

Autonomy introduces variables that are difficult to manage at scale: unpredictable paths/outputs and compounding costs. Mitigation strategies include implementing visibility tools (Monitor) and strict boundaries (Guardrails).

Key Takeaway: Agents are powerful for open-ended, complex problems. But in many cases, a well-designed workflow is more reliable and more cost-efficient.