Skip to main content

Welcome to KAIU Natural Living

KAIU Natural Living is a modern e-commerce platform offering 100% pure and natural products, powered by an AI chatbot orchestrator for WhatsApp support. This guide will walk you through creating an account, browsing products, and placing your first order.
1

Access the Platform

Start by accessing the KAIU Natural Living platform:For Regular Users:
  1. Navigate to the homepage
  2. Click on “Iniciar Sesión” (Login) or “Registrarse” (Register)
  3. Complete the registration form with your details
For Admin/Testing Access:If you need admin access for testing purposes, you can use the dashboard:
# Access the admin dashboard at:
http://localhost:5173/dashboard
The dashboard provides:
  • Real-time order management
  • AI chatbot oversight and human handover
  • Customer conversation history
  • Product catalog management
2

Browse the Product Catalog

Once logged in, explore the natural product catalog:Navigation:
  • Visit /catalogo to see all available products
  • Products are categorized (all categories except “Kits” are displayed)
  • Use the search bar to find specific products or benefits
Filtering Options:The catalog offers multiple ways to find the perfect product:
// Search by name or benefits
searchQuery: "Lavanda, Relax..."

// Filter by category
categories: ['Todos', 'Aceites Esenciales', 'Hidrolatos', ...]

// Filter by benefits
benefits: ['Relajante', 'Energizante', 'Antiséptico', ...]
View Modes:
  • Grid View: Cards displaying product images and key info
  • List View: Detailed list format (default on mobile)
Product Information: Each product card shows:
  • Product name and image
  • Category
  • Benefits (comma-separated tags)
  • Available variants (sizes/presentations)
  • Price per variant
3

Add Products to Cart

Select products and add them to your shopping cart:Adding to Cart:
  1. Click on a product card to view details
  2. Select your preferred variant (size/presentation)
  3. Adjust quantity if needed
  4. Click “Agregar al Carrito” (Add to Cart)
Cart Management:
// The cart context provides:
- items: Array of selected products
- itemCount: Total number of items
- cartTotal: Subtotal before shipping
- addItem(), removeItem(), updateQuantity(), clearCart()
Product Variants: Each product may have different presentations with unique:
  • SKU (stock keeping unit)
  • Price
  • Weight, dimensions (for shipping calculation)
4

Complete Checkout

Proceed to checkout and complete your order:Access Checkout:
  • Click on your cart icon
  • Review items
  • Click “Proceder al Pago” (Proceed to Payment)
  • You’ll be redirected to /checkout
Required Information:Fill out the checkout form with:
{
  // Personal Information
  nombre: "Full Name (First and Last)",
  email: "[email protected]",
  telefono: "3XXXXXXXXX", // 10-digit Colombian mobile
  identificacion: "12345678", // 5-12 digit ID

  // Shipping Address
  departamento_code: "05", // Department code
  ciudad_code: "05001", // City code
  direccion: "Street Address",
  barrio: "Neighborhood",
  notas: "Optional delivery notes",

  // Payment Method
  payment_method: "COD" | "EXTERNAL_PAYMENT",
  termsAccepted: true
}
Field Validations:
  • Name: Letters and spaces only, minimum 2 words
  • Phone: Must start with 3, exactly 10 digits
  • Email: Valid email format
  • Address: Minimum 10 characters
  • Identification: 5-12 digits
Shipping Calculation:Shipping costs are automatically calculated based on:
  • Selected city and department
  • Product weights and dimensions
  • Payment method
  • Total order value
# Shipping is quoted via API:
POST /api/quote-shipping
{
  "city_code": "05001",
  "subdivision_code": "05",
  "line_items": [...],
  "payment_method_code": "COD"
}
Payment Options:
  1. Cash on Delivery (COD)
    • Pay when you receive your order
    • Select payment_method: "COD"
  2. Online Payment via Wompi
    • Secure payment gateway
    • Credit/debit cards accepted
    • Select payment_method: "EXTERNAL_PAYMENT"
Submit Your Order:
// Order payload structure
{
  billing_info: {
    first_name, last_name, email, phone,
    identification_type: "CC",
    identification
  },
  shipping_info: {
    first_name, last_name, address_1,
    city_code, subdivision_code,
    country_code: "CO", phone
  },
  line_items: [
    {
      sku, name, unit_price, quantity,
      weight, weight_unit: "KG",
      dimensions_unit: "CM",
      height, width, length,
      type: "STANDARD"
    }
  ],
  payment_method_code,
  external_order_id,
  discounts: []
}
After submission, you’ll receive:
  • Order confirmation with order ID
  • Redirect to success page
  • Cart is automatically cleared
5

Track Your Order

Monitor your order status after placement:Order Confirmation:
  • You’ll be redirected to /checkout/success
  • Order details include:
    • Order ID (readable format: KAIU-XXXX)
    • Total amount paid
    • Shipping information
Order Tracking:Your order is created in the system with:
{
  order: {
    readable_id: "KAIU-1234", // User-friendly order number
    db_id: 123,                // Database ID
    external_id: "KAIU-...",   // External reference
    status: "pending",
    ...orderDetails
  }
}
WhatsApp Support:For order updates and customer support:
  • KAIU’s AI chatbot is available 24/7 via WhatsApp
  • Powered by Anthropic Claude 3 Haiku
  • Uses RAG (Retrieval Augmented Generation) for accurate responses
  • Request human agent by asking for “humano” if needed
Admin Dashboard Tracking:Admins can monitor orders at /dashboard:
  • View all orders in real-time
  • See order status updates
  • Manage fulfillment
  • Access customer conversations

Next Steps

Explore Products

Browse our full catalog of 100% natural products including essential oils, hydrosols, and natural remedies

AI Chatbot Integration

Learn how the AI-powered WhatsApp assistant helps customers 24/7 with product recommendations and support

Admin Dashboard

Discover how to manage orders, inventory, and customer conversations through the admin panel

API Reference

Integrate with KAIU’s APIs for orders, shipping quotes, and payment processing

Architecture Overview

KAIU Natural Living runs on a modern, scalable stack:
# Frontend
React + Vite + TailwindCSS

# Backend
Node.js + Express + Prisma ORM

# Database
PostgreSQL (Supabase) with pgvector extension

# AI & Messaging
Anthropic Claude 3 Haiku + LangChain
WhatsApp Cloud API + BullMQ + Redis

Local Development

To run KAIU Natural Living locally:
# Install dependencies
npm install

# Configure environment variables
cp .env.example .env.local
# Edit .env.local with your credentials

# Initialize database
npx prisma db push
npm run seed  # Optional: Load sample data

# Start all services (Redis, Backend, Frontend)
./START_ALL.sh
The application will be available at:
  • Frontend: http://localhost:5173
  • Backend API: http://localhost:3001
  • Dashboard: http://localhost:5173/dashboard

Need Help?

  • Contact support via WhatsApp (AI assistant available 24/7)
  • Request human agent by typing “humano” in the chat
  • Access the admin dashboard for order management
  • Check the API documentation for integration details

Build docs developers (and LLMs) love