Building an AI Product Recommendation Bot in Record Time

Sometimes the best projects are the ones you don’t overthink. This weekend, I challenged myself to build a simple AI-powered product recommendation bot for the Nimara e-commerce storefront, and I managed to get it working in just 2 hours.

The Challenge

The idea was simple: create a conversational AI that could analyze a user’s browsing history and product interactions to recommend relevant items. Instead of traditional recommendation algorithms based on collaborative filtering, I wanted to leverage the power of modern LLMs to provide more nuanced, context-aware suggestions.

Tech Stack

I kept the tech stack minimal but powerful:

• Next.js 14 - For the web framework with App Router
• Vercel AI SDK - For streaming AI responses
• OpenAI GPT-4o-mini - The AI model powering recommendations
• Tailwind CSS - For quick styling
• Nimara API - To fetch product data

The Implementation

Setting Up the Data Pipeline

First, I needed to track user interactions. I created a simple event system that captures:

interface UserInteraction {
  productId: string;
  action: 'view' | 'add_to_cart' | 'purchase' | 'wishlist';
  timestamp: Date;
  duration?: number; // for view events
}

Building the AI Recommendation Engine

The core of the system is surprisingly simple. I pass the user’s interaction history to GPT-4o-mini along with product catalog data:

const systemPrompt = `
You are a product recommendation AI for an e-commerce store. 
Based on the user's browsing history and interactions, recommend 3-5 products 
that would be most relevant to them. Consider:

- Products they've viewed but not purchased
- Category preferences
- Price range patterns
- Seasonal relevance
- Complementary items

Respond in a conversational tone and explain why each product might interest them.
`;

Real-time Streaming Interface

Using Vercel’s AI SDK, I implemented a chat-like interface where users can ask for recommendations and get real-time responses:

import { useChat } from 'ai/react';

export function RecommendationChat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/recommendations',
  });

  return (
    <div className="chat-container">
      {/* Chat messages */}
      {messages.map((message) => (
        <div key={message.id} className={`message ${message.role}`}>
          {message.content}
        </div>
      ))}
      
      {/* Input form */}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask for product recommendations..."
        />
      </form>
    </div>
  );
}

Results and Performance

The bot works surprisingly well! Here’s what I observed:

1. Relevance: Recommendations are contextually aware and consider user preferences
2. Speed: Responses stream in real-time, typically completing in 2-3 seconds
3. Personalization: The AI picks up on subtle patterns in browsing behavior

Example Interaction

User: “I’ve been looking at winter jackets and hiking boots. What would you recommend?”

AI: “Based on your interest in winter jackets and hiking boots, I think you’d love our new thermal base layers collection! Since you’re clearly preparing for outdoor adventures, I’d also recommend checking out our insulated gloves and wool socks. They pair perfectly with the hiking boots you were browsing…”

Lessons Learned

1. Start Simple: The MVP approach worked perfectly - I could always add complexity later
2. LLMs Are Powerful: Modern AI models are incredibly good at understanding context and making connections
3. User Experience Matters: The conversational interface feels more natural than traditional recommendation widgets

Next Steps

While this was just a 2-hour experiment, there are several improvements I’d make:

• Add more sophisticated context tracking
• Implement feedback loops to improve recommendations
• Add visual product cards to recommendations
• Integrate with the shopping cart for seamless purchasing

Conclusion

This project reminded me why I love working with modern AI tools. In just 2 hours, I built something that would have taken weeks to implement using traditional recommendation algorithms. The combination of Next.js, Vercel AI SDK, and GPT-4o-mini made the development process incredibly smooth.

Sometimes the best way to learn is to just start building!

---

Want to see more projects like this? Follow me on Twitter or check out my other articles.