Building a Retro AI Shopping Assistant for Game Haven
Next.js · Tailwind · Prisma · Postgres · OpenAI ChatKit
The Problem
Retro gaming stores face a unique challenge: large catalogs, niche product knowledge, and customers who want conversation, not just filters.
Game Haven needed a way to help users quickly discover classic games, cards, and collectibles—without overwhelming them or forcing endless browsing.
The Solution
I built an AI-powered shopping assistant directly into the Game Haven storefront.
Instead of replacing search, the assistant enhances it—answering product questions, guiding collectors, and surfacing relevant inventory in real time. The experience feels less like customer support and more like talking to a knowledgeable employee at a retro game shop.
Conversational product discovery in action
Tech Stack Overview
Next.js (App Router)
Client-side interactivity with secure, server-backed AI calls
Tailwind CSS
Fast iteration with a dark, retro-inspired UI
Prisma + PostgreSQL
Structured product data, chat context, and analytics-ready storage
OpenAI ChatKit (React)
Drop-in conversational UI with full control over branding and behavior
Chat Architecture
The chat interface lives entirely on the client, while sensitive logic remains server-side:
- A Next.js client component renders the chat widget
- A secure client secret is fetched from a backend route
- AI agent logic determines user intent:
- Product questions
- Recommendations
- Category browsing
- Responses are scoped to Game Haven's inventory and brand voice
Designing the AI with OpenAI Agent Builder
Before writing application code, I designed the conversation flow using OpenAI's Agent Builder. This visual workflow tool makes it possible to prototype multi-agent systems, test edge cases, and refine routing logic before implementation.
Agent workflow designed in OpenAI's visual builder
Agent Workflow
The Game Haven assistant uses a multi-agent architecture, with each agent handling a specific responsibility:
- Guardrails
All messages pass through moderation to ensure safe, on-topic conversations - Categorize Agent
Determines user intent (product info, recommendations, browsing) - Conditional Routing
Routes the conversation to specialized agents:- Product Agent – availability, pricing, and item details
- Collector Agent – expert recommendations for serious collectors
- Guard Agent – validates responses for accuracy and brand consistency
This approach allowed rapid experimentation and confident iteration before writing production code.
Chat Component (Simplified)
The assistant is implemented using @openai/chatkit-react and customized to match Game Haven's branding:
'use client';
import { ChatKit, useChatKit } from '@openai/chatkit-react';
import { getClientSecret } from '../helpers/chat';
const GameHavenChat = () => {
const chatKit = useChatKit({
api: { getClientSecret },
header: { title: { text: 'Ask Game Haven' } },
composer: {
placeholder: 'Ask about retro games, cards, or collectibles...',
},
theme: {
colorScheme: 'dark',
radius: 'round',
color: {
accent: { primary: '#ef4444', level: 3 },
},
},
startScreen: {
greeting: 'Welcome to Game Haven! 👾\nHow can I help you today?',
},
});
return <ChatKit {...chatKit} />;
};
export default GameHavenChat;The result is a fully embedded, brand-aligned AI assistant that feels native to the site—not bolted on.
Why This Matters for E-Commerce
🧠 Reduces friction for non-technical shoppers
🎮 Matches collector behavior (questions, nostalgia, discovery)
⚡ Faster than filters—especially on mobile
📈 Creates a foundation for:
- Lead capture
- Chat-to-cart conversion tracking
- Personalized recommendations
Final Thoughts
This project demonstrates that AI agents don't need to be complex to be effective.
By combining Next.js, Prisma, OpenAI Agent Builder, and a thoughtfully designed chat interface, Game Haven gains a digital team member—one that scales instantly and never forgets inventory.
For niche e-commerce brands, especially in retro gaming and collectibles, conversational AI isn't a gimmick—it's a competitive edge.
