Remezcla Demo UI

React-based customer and business management UI with Salesforce Agentforce chat integration.

Part of the Remezcla demo:

• remezcla-demo-api - .NET API backend
• remezcla-demo-agent - Salesforce Agentforce metadata
• remezcla-demo-ui - This repository (React UI)

---

Overview

Customer-facing taco ordering interface with integrated Salesforce Agentforce chat. Customers can browse the menu, build custom tacos, and chat with an AI agent to place orders conversationally.

Key Features:

• Conversational Ordering - Salesforce Agentforce integration with slide-in chat panel
• Menu Browsing - Classic tacos and custom taco builder with ingredient selection
• Real-time Updates - SignalR WebSocket-based order sync with polling fallback
• Allergy Support - Allergy protocol badges and warnings
• Demo Personalization - localStorage-based preferences for booth demos
• Business Dashboard - Order management, inventory, signage configuration (optional)

---

Architecture

State Management

Global application state managed via context pattern (Valtio-style):

• Server-side initialization during SSR
• Client-side hydration from server state
• Actions pattern for state mutations

Real-time Order Sync

SignalR WebSocket collaboration (with automatic polling fallback):

• Primary: WebSocket push notifications via SignalR hub (/hubs/order-events)
• Fallback: 1-second HTTP polling if WebSocket connection fails
• Updates cart automatically when agent modifies order
• Configurable via VITE_FEATURE_SIGNALR environment variable

Agent Integration

Salesforce Messaging API:

• OAuth 2.0 client credentials flow (server-side proxy)
• SSE streaming for agent responses
• Session management with continuation tokens
• Automatic polling for agent-initiated order changes

Key Components

• AgentPanel - Slide-in chat interface with integrated cart view
• OrderBuilder - Custom taco creation modal with ingredient selection
• Cart - Optimistic updates with server reconciliation
• Dashboard - Order management, inventory controls, demo configuration

---

Prerequisites

• Node.js 20+
• pnpm package manager
• API dependency: remezcla-demo-api must be running

---

Local Development

Setup

1. Install dependencies:

pnpm install

2. Configure environment (copy and edit):

cp .env.example .env

3. Set required environment variables in .env:

API_URL=http://localhost:5050

Optional: Salesforce Agentforce Integration

To enable the Salesforce agent chat, add these to .env:

VITE_INSTANCE_URL=https://your-domain.my.salesforce.com
VITE_CLIENT_ID=<your-connected-app-client-id>
VITE_CLIENT_SECRET=<your-connected-app-client-secret>
VITE_AGENT_ID=<your-agentforce-agent-id>

Don't have these? See the complete setup guide for Salesforce Connected App configuration.

Run Development Server

pnpm dev

Open http://localhost:3000

Demo Credentials

• Username: demo
• Password: demo

---

Build & Deploy

Build for Production

pnpm build

Deploy to Heroku

If you already have the API running:

# Add Heroku remote
heroku git:remote -a <your-ui-app>

# Set API URL
heroku config:set API_URL=<your-api-url> -a <your-ui-app>

# Deploy
git push heroku main

Complete System Setup

First time setting up the entire Remezcla demo system?

See SETUP.md for end-to-end setup including Heroku, Salesforce, AppLink, and agent configuration.

---

Project Structure

client/
├── components/
│   ├── agent-panel/      # Agentforce chat integration
│   ├── icons/            # SVG icon components
│   └── ui/               # Reusable UI components
├── constants/            # Shared constants
├── integration/          # Salesforce Data Cloud
├── layouts/              # Page layouts
├── pages/                # Route-based pages
│   └── dashboard/        # Business management UI
├── services/             # API clients and utilities
└── assets/               # Static assets

routes/                   # Fastify server routes
├── api-proxy.js          # API proxy (CORS handling)
├── salesforce-agent.js   # Agentforce OAuth proxy
└── user.js               # Authentication

---

Key Pages

• / - Homepage and marketing
• /order - Customer ordering interface
• /order/finalize - Order submission and confirmation
• /dashboard - Business management (orders, inventory, signage)
• /demo - Demo personalization configuration
• /mock - Mock agent testing harness (if VITE_FEATURE_MOCK_AGENT=true)

---

Configuration

Environment Variables

Required:

• API_URL - Backend API URL (e.g., http://localhost:5050)

Optional (Salesforce Agentforce):

• VITE_INSTANCE_URL - Your Salesforce org URL
• VITE_CLIENT_ID - Connected App Client ID
• VITE_CLIENT_SECRET - Connected App Client Secret
• VITE_AGENT_ID - Agentforce Agent ID

Optional (Features):

• VITE_FEATURE_SIGNALR - Use SignalR WebSockets for real-time updates (default: true). Set to false to use polling fallback.
• VITE_FEATURE_MOCK_AGENT - Enable /mock testing harness (default: false)

Server Configuration

• PORT - HTTP port for UI server (default: 3000)
• SESSION_SECRET - Express session secret (auto-generated in development)

---

Testing

# Run test suite
pnpm test

# Run linter
pnpm lint

# Format code
pnpm format

---

Technology Stack

• React 18
• Vite (build tool + dev server)
• Fastify (Node.js server for SSR)
• Mantine (UI component library)
• TailwindCSS
• Microsoft SignalR Client (real-time updates)
• Salesforce Messaging API (agent integration)