# Agora-Conversational-AI-Ecommerce-Demo

**Repository Path**: mirrors_AgoraIO-Community/Agora-Conversational-AI-Ecommerce-Demo

## Basic Information

- **Project Name**: Agora-Conversational-AI-Ecommerce-Demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-15
- **Last Updated**: 2026-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🛍️ Agora E-Commerce Voice AI Demo

A modern e-commerce product page with an integrated AI voice assistant powered by Agora Conversational AI. Users can have real-time voice conversations with an AI sales agent to get product information, pricing, and assistance with purchasing decisions.

![Demo Preview](https://via.placeholder.com/800x400/1e40af/ffffff?text=Agora+E-Commerce+Voice+AI+Demo)

## ✨ Features

### 🎯 **E-Commerce Product Page**

- Beautiful, responsive iPhone 15 Pro product showcase
- High-quality product images and specifications
- Pricing with discount badges and promotional offers
- Technical specifications and feature highlights
- Modern UI with Tailwind CSS and shadcn/ui components

### 🎤 **AI Voice Assistant**

- **Real-time voice conversations** with AI sales agent
- **Natural language processing** for product inquiries
- **TTS-optimized responses** with proper pronunciation
- **Sales-focused AI personality** with persuasive techniques
- **Floating widget design** that doesn't block page scrolling

### 🔧 **Technical Features**

- **Agora RTC** for real-time audio communication
- **Agora Conversational AI** for intelligent voice responses
- **OpenAI GPT-4** for natural language understanding
- **Azure TTS** for high-quality voice synthesis
- **Next.js 15** with App Router
- **TypeScript** for type safety
- **Responsive design** for mobile and desktop

## 🚀 Quick Start

### Prerequisites

- Node.js 18+ and pnpm
- Agora account with Conversational AI enabled
- OpenAI API key
- Azure TTS subscription

### Installation

1. **Clone the repository**

   ```bash
   git clone <your-repo-url>
   cd agora-ecommerce-demo
   ```

2. **Install dependencies**

   ```bash
   pnpm install
   ```

3. **Set up environment variables**

   ```bash
   cp .env.example .env.local
   ```

   Fill in your API credentials in `.env.local`:

   ```env
   # Agora Configuration
   NEXT_PUBLIC_AGORA_APP_ID=your_agora_app_id
   AGORA_APP_ID=your_agora_app_id
   AGORA_CUSTOMER_ID=your_agora_customer_id
   AGORA_CUSTOMER_SECRET=your_agora_customer_secret
   AGORA_TEMP_TOKEN=your_agora_temp_token

   # OpenAI Configuration
   OPENAI_API_KEY=your_openai_api_key

   # Azure TTS Configuration
   AZURE_TTS_KEY=your_azure_tts_key
   AZURE_TTS_REGION=your_azure_region
   ```

4. **Run the development server**

   ```bash
   pnpm dev
   ```

5. **Open your browser**
   Navigate to `http://localhost:3000`

## 🎯 How It Works

### 1. **Product Browsing**

Users can browse the iPhone 15 Pro product page, view specifications, pricing, and features.

### 2. **Voice AI Integration**

- Click "Hablar con IA" to open the voice assistant
- The AI agent joins the same Agora channel as the user
- Real-time voice conversation with natural language processing

### 3. **AI Sales Agent**

The AI is configured with:

- **Product knowledge** about iPhone 15 Pro specifications
- **Sales techniques** including urgency, benefits, and calls-to-action
- **TTS optimization** for natural pronunciation of numbers and currency
- **Spanish language support** with Colombian dialect

## 🏗️ Architecture

```
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Next.js App   │    │  Agora RTC      │    │ Agora Conversational AI │
│                 │    │                 │    │                 │
│ • Product Page  │◄──►│ • Voice Channel │◄──►│ • AI Agent      │
│ • Voice Widget  │    │ • Audio Streams │    │ • LLM (GPT-4)   │
│ • UI Components │    │ • Real-time     │    │ • TTS (Azure)   │
└─────────────────┘    └─────────────────┘    └─────────────────┘
```

### **Frontend (Next.js)**

- **Product Page**: Beautiful e-commerce showcase
- **Voice Widget**: Floating chat interface
- **Agora RTC**: Real-time audio communication
- **State Management**: React hooks for connection status

### **Backend (API Routes)**

- **`/api/agora/start-agent`**: Initiates AI agent in voice channel
- **`/api/agora/stop-agent`**: Terminates AI agent session

### **AI Integration**

- **Agora Conversational AI**: Manages voice conversations
- **OpenAI GPT-4**: Natural language understanding
- **Azure TTS**: Text-to-speech synthesis

## 🎨 UI Components

### **Product Page**

- Responsive product showcase with image gallery
- Pricing display with discount badges
- Technical specifications in organized cards
- Call-to-action buttons for purchase and AI assistance

### **Voice Widget**

- **Floating Design**: Non-blocking bottom-right corner placement
- **Status Indicators**: Visual feedback for connection states
- **Voice Controls**: Mute/unmute and call management
- **Smooth Animations**: Slide-in effects and transitions

## 🔧 Configuration

### **AI Agent Settings**

The AI agent is configured with:

- **Personality**: Sales-focused, enthusiastic, persuasive
- **Language**: Spanish (Colombian dialect)
- **TTS Voice**: `es-CO-SalomeNeural` (Colombian Spanish)
- **Response Length**: Maximum 120 words for concise interactions
- **Temperature**: 0.8 for dynamic, engaging responses

### **TTS Optimization**

Special instructions ensure natural pronunciation:

- Numbers written in words: "cuatro millones" instead of "4,000,000"
- Currency explicit: "pesos colombianos" instead of "COP"
- Technical terms: "cuarenta y ocho megapíxeles" instead of "48MP"

## 📱 Responsive Design

- **Desktop**: Full product showcase with side-by-side layout
- **Mobile**: Stacked layout with optimized touch targets
- **Voice Widget**: Adapts to screen size with responsive positioning

## 🛠️ Development

### **Available Scripts**

```bash
pnpm dev          # Start development server
pnpm build        # Build for production
pnpm start        # Start production server
pnpm lint         # Run ESLint
```

### **Project Structure**

```
├── app/                    # Next.js App Router
│   ├── api/agora/         # API routes for Agora integration
│   ├── page.tsx           # Main product page
│   └── layout.tsx         # App layout
├── components/            # Reusable UI components
├── hooks/                 # Custom React hooks
│   └── use-agora-voice.ts # Agora RTC integration
├── lib/                   # Utility functions
└── styles/               # Global styles
```

## 🔐 Environment Variables

| Variable                   | Description                  | Required |
| -------------------------- | ---------------------------- | -------- |
| `NEXT_PUBLIC_AGORA_APP_ID` | Agora App ID for client-side | ✅       |
| `AGORA_APP_ID`             | Agora App ID for server-side | ✅       |
| `AGORA_CUSTOMER_ID`        | Agora Customer ID            | ✅       |
| `AGORA_CUSTOMER_SECRET`    | Agora Customer Secret        | ✅       |
| `AGORA_TEMP_TOKEN`         | Agora Temporary Token        | ✅       |
| `OPENAI_API_KEY`           | OpenAI API Key               | ✅       |
| `AZURE_TTS_KEY`            | Azure TTS API Key            | ✅       |
| `AZURE_TTS_REGION`         | Azure TTS Region             | ✅       |

## 🌐 API Endpoints

### **POST /api/agora/start-agent**

Initiates an AI agent in the specified Agora channel.

**Request Body:**

```json
{
  "channel": "product-demo-1234567890",
  "language": "es-CO"
}
```

**Response:**

```json
{
  "success": true,
  "agentId": "A42AV82KP36KE23KN89HC24RV47RJ89H",
  "channel": "product-demo-1234567890",
  "message": "Agente de IA conectado exitosamente"
}
```

### **POST /api/agora/stop-agent**

Terminates the specified AI agent.

**Request Body:**

```json
{
  "agentId": "A42AV82KP36KE23KN89HC24RV47RJ89H"
}
```

**Response:**

```json
{
  "success": true,
  "message": "Agente de IA desconectado exitosamente"
}
```

## 🎯 Use Cases

### **E-Commerce**

- Product information and specifications
- Pricing and promotional offers
- Purchase assistance and recommendations
- Customer support and FAQs

### **Sales & Marketing**

- Lead qualification and nurturing
- Product demonstrations
- Upselling and cross-selling
- Customer engagement

### **Customer Service**

- 24/7 automated support
- Multilingual assistance
- Voice-first interactions
- Scalable customer care

## 🚀 Deployment

### **Vercel (Recommended)**

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically

### **Other Platforms**

The app can be deployed to any platform that supports Next.js:

- Netlify
- AWS Amplify
- Railway
- DigitalOcean App Platform

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch: `git checkout -b feature/amazing-feature`
3. Commit your changes: `git commit -m 'Add amazing feature'`
4. Push to the branch: `git push origin feature/amazing-feature`
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🙏 Acknowledgments

- [Agora](https://www.agora.io/) for real-time communication infrastructure
- [OpenAI](https://openai.com/) for advanced language models
- [Microsoft Azure](https://azure.microsoft.com/) for text-to-speech services
- [Next.js](https://nextjs.org/) for the React framework
- [Tailwind CSS](https://tailwindcss.com/) for styling
- [shadcn/ui](https://ui.shadcn.com/) for UI components

## 📞 Support

For support, email support@yourcompany.com or join our Slack channel.

---

**Built with ❤️ using Agora Conversational AI**