The "Ghost Town" Dilemma

We've all been there: you land on a portfolio website looking for a specific skill or a pricing estimate, but the navigation is a maze. You click around for 20 seconds, get frustrated, and leave.

For a business, this isn't just a UI problem; it's a revenue leak.

I noticed that users were bouncing off the site faster than I could say "Full Stack Developer." The content was there, but it was buried. I didn't need a better search bar; I needed a guide. A way to hold the user's hand and lead them exactly where they wanted to go.

Contents

• Enter the Smart Assistant
  • Core Capabilities
• Code Highlight: The Intention Router
• Under the Hood: The Tech Stack
  • The Routing Architecture
• The Impact
• Conclusion

Enter the Smart Assistant

I built a custom, knowledge-based AI chatbot designed to live on the client's website. But this isn't your standard "Please hold while I connect you" bot. It's a context-aware digital concierge.

Core Capabilities

Code Highlight: The Intention Router

The trickiest technical challenge was figuring out what the user actually wanted without overpaying for API tokens.

To solve this, I implemented a Multi-Model Routing system. A lightweight, fast model acts as the "Traffic Cop," analyzing the intention. Based on that intent, it routes the request to the appropriate handler.

Here is a simplified look at how I handle this routing using the AI SDK:

import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";
 
export async function routeRequest(userQuery: string) {
  // 1. The Traffic Cop: Use a cheap, fast model to detect intent
  const { text: intention } = await generateText({
    model: openai("gpt-4o-mini"), // Cost-efficient choice
    system: `
      Analyze the user query.
      Return "GENERAL" for casual chat.
      Return "HIRE" if they want to work with us.
      Return "TECHNICAL" for complex questions.
    `,
    prompt: userQuery,
  });
 
  // 2. Route to the specialized handler
  switch (intention) {
    case "HIRE":
      return await handleHiringFlow(userQuery); // Triggers form tools
    case "TECHNICAL":
      return await handleRAGFlow(userQuery); // Performs vector search
    default:
      return await handleChitChat(userQuery); // Simple completion
  }
}

Under the Hood: The Tech Stack

I handled the entire lifecycle of this project, from the backend logic to the high-accessibility frontend design.

The Routing Architecture

The "cool factor" of this project lies in how it orchestrates different models. It's not a monolith; it's a team of specialists.

The Impact

The goal was to make people stay. And they did. By giving users a conversational way to explore the site, we transformed bounce rates into conversation rates.

Conclusion

This project proved that AI in web development isn't just about slapping a chatbot on a page; it's about architecting a journey.

By using smart routing and cost-effective models, I built a solution that keeps users engaged without breaking the bank. The AI does the talking, the users get their answers, and I... well, I get to watch the engagement metrics go up while I sleep. 📈

Read another project

If you'd like to explore more, here's another project you might enjoy.

Website and Booking System

6 min

Explore the development of a website and booking system for a local car cleaning company.