EP Assistant

An AI-powered procurement assistant for B2B commerce built with React, CopilotKit, and Lit web components.

Overview

EP Assistant provides an intelligent chat interface for product discovery and procurement guidance. It integrates with Elastic Path Commerce Cloud to deliver AI-powered shopping experiences as reusable web components.

Features

🤖 AI-Powered Chat Interface

• Natural language product search and recommendations
• Interactive product cards with detailed information
• User authentication and account management
• Generative UI for enhanced shopping experiences

🛒 Product Discovery

• Product search and filtering
• Conversation thread persistence
• Mock product catalog with office supplies
• Bulk pricing information display

📦 Web Component Integration

• Custom web elements for easy integration
• Shadow DOM encapsulation with proper styling
• Support for multiple deployment scenarios

Components

Core Components

• ChatDashboardRoot: Main dashboard with full procurement interface
• ChatRoot: Simplified chat-only interface
• EpAssistantDashboard: Web component wrapper for dashboard
• EpAssistant: Web component wrapper for chat interface

AI Actions

The assistant includes several CopilotKit actions:

• authenticate-store-account: User login with form UI
• searchProducts: Product search with interactive results
• getProductDetails: Detailed product information display

Usage

As Web Components

<!-- Full dashboard experience -->
<ep-assistant-dashboard 
  runtime-url="/api/ep-assistant-agent"
  client-id="your-client-id"
  ep-url="https://api.elasticpath.com" 
  ep-access-token="your-token">
</ep-assistant-dashboard>

<!-- Chat interface only -->
<ep-assistant 
  runtime-url="/api/ep-assistant-agent"
  client-id="your-client-id">
</ep-assistant>

As React Components

import { ChatDashboardRoot, ChatRoot } from '@field123/ep-assistant';

// Full dashboard
<ChatDashboardRoot 
  runtimeUrl="/api/ep-assistant-agent"
  clientId="your-client-id"
  epUrl="https://api.elasticpath.com"
  epAccessToken="your-token" 
/>

// Chat only
<ChatRoot 
  runtimeUrl="/api/ep-assistant-agent"
  clientId="your-client-id" 
/>

Data Models

interface Product {
  id: string;
  name: string;
  category: string;
  price: number;
  bulkPrice: number;
  minBulkQuantity: number;
  description: string;
  specifications: string[];
  inStock: boolean;
  leadTime: string;
  image: string;
}

Development

Prerequisites

• Node.js 18+
• pnpm package manager

Installation

pnpm install

Development

pnpm dev

Build

pnpm build

Integration with Elastic Path

The package is designed to integrate with Elastic Path Commerce Cloud:

1. Replace mock product data with EP API calls
2. Implement authentication via EP customer accounts
3. Connect product search to EP catalog services
4. Configure runtime URL and credentials

License

MIT License