@spectrumsense/spectrum-chat-dev/examples/README.md

Embeddable AI Widget - Add trusted, evidence-based answers directly to your website. Simple installation, enterprise-grade security.

# Spectrum Chat Examples

This directory contains example implementations of the Spectrum Chat widget, organized by server type.

## 📁 Directory Structure

```
examples/
├── mock/          # Mock server examples (port 8001)
├── real/          # Real API server examples (port 8000)
└── README.md      # This file
```

## 🚀 Quick Start

### Option 1: Mock Server (Recommended for Development)

1. **Start mock server:**
   ```bash
   node mock-api-server-8001.js
   ```

2. **Start web server:**
   ```bash
   python -m http.server 3000
   ```

3. **Open examples:**
   - http://localhost:3000/examples/mock/plain-html-example.html

### Option 2: Real API Server (Production Testing)

1. **Start your API server on port 8000**

2. **Start web server:**
   ```bash
   python -m http.server 3000
   ```

3. **Open examples:**
   - http://localhost:3000/examples/real/plain-html-example.html

## 📋 Available Examples

### Custom Element Examples
- **`plain-html-example.html`** - Basic custom element implementation
- **`template-base.html`** - Base template with global configuration
- **`template-home.html`** - Home page extending base template
- **`template-page1.html`** - Additional template pages
- **`template-page2.html`** - Additional template pages
- **`template-page3.html`** - Additional template pages

## 🔧 Configuration

### Mock Server Examples
- **API URL**: `http://localhost:8001/api/v1/conversations`
- **Purpose**: Development and testing
- **Data**: Simulated responses

### Real Server Examples
- **API URL**: `http://localhost:8000/api/v1/conversations`
- **Purpose**: Production testing
- **Data**: Real API responses

## 🧪 Testing

Both example sets support:
- ✅ **Custom element mode** - Individual page integration
- ✅ **Template system mode** - Global configuration
- ✅ **Session storage** - Conversation persistence
- ✅ **Cross-page navigation** - State management

## 📚 Documentation

- [Mock Server Examples](mock/README.md) - Development setup
- [Real Server Examples](real/README.md) - Production setup
- [Testing Instructions](../TESTING_INSTRUCTIONS.md) - Comprehensive testing guide