A Next.js-based chatbot UI for interacting with the Product Assistant RAG API.
- Modern chat interface for product queries
- Real-time related product display with images and details
- Interactive product cards with detailed product information
- Shopping cart with sticky header and checkout
- Responsive design that works on mobile and desktop
- Loading states and error handling
- AED pricing display throughout the UI
- First, make sure the Product Assistant API is running
- Create a
.env.localfile with API configuration:NEXT_PUBLIC_API_URL=http://localhost:3000 - Install dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3001 in your browser
Simply type your product questions in the chat input field. For example:
- "What baby products do you have?"
- "Do you have any strollers?"
- "Tell me about your electronics"
The assistant will respond with information based on the products available in the database, and related products will appear in a carousel below the chat. You can click on any product to view more details and add it to your cart.
When you click on a product, a bottom sheet will open showing:
- Product image
- Detailed information
- Features list
- Price in AED
- "View on Website" link to the product page
- Add to Cart button
The cart system features:
- Sticky header for easy navigation
- Row-based product display with images
- Remove button with trash icon
- Sticky total and checkout section
- Dynamic total calculation
- Responsive design
When the assistant provides product recommendations, each recommended product will adhere to the following JSON structure:
{
"sku": "SKU123",
"name": "Interactive Learning Tablet",
"brand_default_store": "EduKids",
"description": "A fun and educational tablet for young children with interactive games and learning activities.",
"features": "10-inch HD screen, pre-loaded educational apps, parental controls, durable design",
"recom_age": "3-6 years",
"top_category": "Toys & Games",
"secondary_category": "Educational Toys",
"action": "View Product",
"url": "https://example.com/product/tablet123",
"image": "https://example.com/images/tablet123.jpg",
"objectID": "product_123456789",
"price": "149"
}Where:
sku: (string) Product Stock Keeping Unitname: (string) Product Namebrand_default_store: (string) Brand or Default Storedescription: (string) Product Descriptionfeatures: (string) Key Featuresrecom_age: (string) Recommended Age Rangetop_category: (string) Main Product Categorysecondary_category: (string) Sub-categoryaction: (string) Call to action text (e.g., "Buy Now", "Learn More")url: (string) Direct URL to the product pageimage: (string) URL to the product imageobjectID: (string) Unique identifier for the product objectprice: (string) Product price in AED
npm run build
npm start- Next.js 14 with App Router
- React
- TypeScript
- Tailwind CSS
- Axios for API requests
- React Hot Toast for notifications
- KeenSlider for product carousels