TOYOTA Initial Diagnostics

A smart car recommendation engine that helps users find the perfect Toyota vehicle based on their preferences. Uses AI-powered conversation and intelligent filtering to provide personalized recommendations.

• Smart Filtering: Filter by budget, body type, fuel type, make, model, mileage, and maintenance tier
• AI Chat Assistant: Conversational interface powered by Google Gemini to extract filter preferences naturally
• Intelligent Recommendations: Multi-level matching algorithm that finds exact matches or relaxes constraints intelligently
• Substitute Models: When exact matches aren't available, the system suggests comparable alternatives
• Vehicle Details: Comprehensive modal view with pricing, financing options, fuel costs, and specifications
• Visual Gallery: Browse cars with real images and detailed information cards

• Framework: Next.js 14+ (App Router, TypeScript)
• UI: React 18 with Tailwind CSS
• Icons: Lucide React
• AI: Google Gemini API (@google/genai)
• Database: Mock data (can be connected to real backend)

• Node.js 18+
• Google Gemini API key (get one at https://aistudio.google.com/app/api-keys)

# Install dependencies
npm install

# Install additional packages
npm install lucide-react @google/genai

Create a .env.local file in the root directory:

GEMINI_API_KEY=your_api_key_here

npm run dev

Open http://localhost:3000 to see the app.

├── app/
│   ├── page.tsx              # Main dashboard
│   ├── layout.tsx            # Root layout
│   └── api/
│       ├── chat/route.ts     # Chat API endpoint
│       └── recommend/route.ts # Recommendation API
├── components/
│   ├── FilterBar.tsx         # Filter controls (8 dimensions)
│   ├── CarCard.tsx           # Vehicle card component
│   ├── CarModal.tsx          # Vehicle details modal
│   ├── ChatWidget.tsx        # Chat interface
│   └── chatbotmsg.tsx        # Chat message bubble
├── lib/
│   ├── mockCars.ts           # Vehicle inventory (16 vehicles)
│   ├── recommender.ts        # Recommendation algorithm
│   ├── diagnostics.ts        # Cost calculations
│   ├── substitutes.ts        # Alternative models mapping
│   └── [other utilities]
├── types/
│   └── car.ts                # TypeScript interfaces
└── public/
    └── cars/                 # Vehicle images (15 images)

8-dimensional filtering system:

• Budget (range slider: $15k-$60k)
• Make (dynamic dropdown)
• Model (cascading, disabled until make selected)
• Body Type (Sedan, SUV, Truck, Crossover, etc.)
• Fuel Type (Gas, Hybrid, Electric, Diesel)
• Max Mileage (presets: 10k, 25k, 50k, Any)
• Maintenance Tier (Low, Medium, High)
• Distance (50, 100, 150, 300, Any miles)

3-Step Matching Process:

1. Exact Matching - ALL active filters must match strictly
2. Substitute Search - If no exact match and no make/model filter, try compatible models
3. Constraint Relaxation - Progressive relaxation (budget → body type → fuel type) only if needed

• Natural language processing via Google Gemini
• Extracts filter preferences from user messages
• Supports complex requests like "Show me affordable hybrids" or "Honda Accords under $30k"

16 vehicles across Toyota lineup:

• Sedans: Camry (Hybrid), Corolla (Gas), Accord (Hybrid)
• SUVs: RAV4, Highlander, 4Runner, Sequoia, Land Cruiser, bZ4X (Electric)
• Trucks: Tacoma, Tundra
• Hatchback: Prius
• Crossover: Venza
• Coupe: GR86
• Minivan: Sienna

Accepts user messages and returns filter recommendations.

{
  "message": "Show me affordable hybrids",
  "history": [],
  "currentFilters": { ... }
}

Returns recommended vehicles based on current filters (called internally).

1. Add new filters: Update types/car.ts, components/FilterBar.tsx, and lib/recommender.ts
2. Add vehicles: Update lib/mockCars.ts and add images to public/cars/
3. Modify recommendations: Update the algorithm in lib/recommender.ts
4. Enhance chat: Improve the system prompt in app/api/chat/route.ts

The app includes example cars and filters to test immediately. Use the FilterBar manually or the ChatWidget to test AI integration.

npm install -g vercel
vercel

Set GEMINI_API_KEY in Vercel environment variables.

• Next.js Documentation
• Google Gemini API
• Tailwind CSS