A Next.js application powered by OpenAI that provides intelligent product recommendations based on customer queries. The app uses AI to analyze customer needs and recommend the most suitable products from the catalog.
- AI-Powered Recommendations: Uses OpenAI GPT-4 to understand customer needs and provide personalized product suggestions
- Vehicle-Specific Tire Fitment: Automatically recommends the correct wheel and tire sizes based on the customer's vehicle make and model
- Fitment Style Detection: Intelligently detects desired fitment style (mild drop, aggressive, or bagged) from customer queries
- Smart Search: Natural language search - customers can describe what they need in plain English
- Comprehensive Fitment Database: Includes fitment data for 80+ vehicle models from BMW, Nissan, Toyota, Honda, Subaru, and more
- Product Categories: Currently supports tires and electronics, easily extensible to other categories
- Beautiful UI: Modern, responsive interface built with Tailwind CSS
- Detailed Product Cards: Display comprehensive product information including wheel size, tire size, specs, ratings, and reviews
- Next.js 15: React framework with App Router
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first CSS framework
- OpenAI API: GPT-4 for intelligent recommendations
- MCP-UI: Model Context Protocol UI components
- Node.js 18+ installed
- An OpenAI API key (Get one here)
- Clone the repository or navigate to the project directory:
cd product-recommendation-app- Install dependencies:
npm install- Set up environment variables:
Copy the .env.example file to .env.local:
cp .env.example .env.localThen edit .env.local and add your OpenAI API key:
OPENAI_API_KEY=your_actual_api_key_here
- Run the development server:
npm run dev- Open http://localhost:3000 in your browser
Here are some example queries you can try:
For Tires (with vehicle-specific fitment):
- Query: "I need performance tires" + Vehicle: "BMW E46 M3" → Automatically recommends 18x9.5 +22 fitment
- Query: "Looking for winter tires" + Vehicle: "Nissan 350Z" → Suggests winter tires in correct size
- Query: "I want an aggressive fitment" + Vehicle: "Subaru WRX" → Recommends 18x9.5 +22 options
- Query: "Need tires for daily driving" + Vehicle: "Honda S2000" → Shows 18x8.5 +35 mild drop fitment
- Query: "I have a bagged car" + Vehicle: "Toyota GT86" → Recommends 18x10.5 +12 extreme fitment
For Tires (general):
- "Budget-friendly touring tires for highway driving"
- "High-performance summer tires for track days"
For Electronics:
- "I need noise-cancelling headphones for work"
- "Looking for a laptop for programming"
- Customer Input: User enters their requirements in natural language and optionally their vehicle info
- Vehicle Fitment Lookup: If a vehicle is provided, the system automatically:
- Identifies the make and model
- Looks up the correct wheel fitment from the database
- Detects fitment style from the query (mild drop, aggressive, or bagged)
- Filters products to match the recommended wheel size
- AI Analysis: OpenAI GPT-4 analyzes the query, considering:
- Product specifications
- User requirements
- Correct wheel and tire fitment for the specific vehicle
- Value for money
- Ratings and reviews
- Seasonal considerations
- Fitment style preferences
- Smart Recommendations: The AI returns 3-4 most suitable products with reasoning
- Display: Products are displayed as cards with detailed specs including wheel size and tire size
product-recommendation-app/
├── app/
│ ├── api/
│ │ └── recommendations/
│ │ └── route.ts # API endpoint for recommendations
│ └── page.tsx # Main page
├── components/
│ ├── ProductCard.tsx # Product display component
│ └── ProductSearch.tsx # Search interface component
├── lib/
│ ├── ai/
│ │ └── recommendations.ts # OpenAI integration logic
│ └── data/
│ ├── products.ts # Product catalog with tire sizes
│ └── vehicle-fitment.ts # Vehicle fitment database (80+ vehicles)
├── .env.local # Environment variables (not in git)
├── .env.example # Environment variables template
└── next.config.ts # Next.js configuration
Edit lib/data/products.ts to add new products to the catalog:
export const yourCategory: Product[] = [
{
id: "product-1",
name: "Product Name",
brand: "Brand",
category: "Category",
price: 99.99,
image: "image-url",
description: "Product description",
specs: {
"Spec 1": "Value 1",
"Spec 2": "Value 2",
},
rating: 4.5,
reviews: 100
},
// ... more products
];Edit the system prompt in lib/ai/recommendations.ts to adjust how the AI evaluates and recommends products.
The app uses Tailwind CSS. You can customize the design by editing:
components/ProductCard.tsx- Product card stylingcomponents/ProductSearch.tsx- Search interface stylingtailwind.config.ts- Global theme configuration
Request body:
{
"query": "I need tires for winter driving",
"userDetails": {
"vehicle": "2020 Honda Civic",
"preferences": "Budget-friendly"
}
}Response:
{
"recommendations": [
{
"id": "tire-1",
"name": "Product Name",
"brand": "Brand",
// ... product details
}
],
"reasoning": "AI explanation of why these products were recommended"
}- Push your code to GitHub
- Import the project in Vercel
- Add your
OPENAI_API_KEYenvironment variable in the Vercel project settings - Deploy
The app can be deployed to any platform that supports Next.js:
- Netlify
- AWS Amplify
- Railway
- Render
Make sure to set the OPENAI_API_KEY environment variable in your deployment platform.
npm run testnpm run buildnpm run lint- User authentication
- Shopping cart functionality
- Real-time inventory integration
- Product comparison feature
- Save favorite products
- Price tracking and alerts
- Integration with real e-commerce APIs
- More product categories
- Advanced filtering options
MIT
For questions or issues, please open an issue on GitHub.