@makemore/agent-frontend 1.0.0 → 1.1.0

package/README.md

@@ -32,16 +32,51 @@ Most chat widgets are tightly coupled to specific frameworks or require complex
 | 💾 **Persistence** | Conversations persist across page reloads via localStorage |
 | 🛡️ **Isolated CSS** | Scoped styles that won't leak into or from your page |
 
+## Installation
+
+### Via npm
+
+```bash
+npm install @makemore/agent-frontend
+```
+
+Then include in your HTML:
+
+```html
+<link rel="stylesheet" href="node_modules/@makemore/agent-frontend/dist/chat-widget.css">
+<script src="node_modules/@makemore/agent-frontend/dist/chat-widget.js"></script>
+```
+
+### Via CDN (unpkg)
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@makemore/agent-frontend/dist/chat-widget.css">
+<script src="https://unpkg.com/@makemore/agent-frontend/dist/chat-widget.js"></script>
+```
+
+### Via CDN (jsDelivr)
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@makemore/agent-frontend/dist/chat-widget.css">
+<script src="https://cdn.jsdelivr.net/npm/@makemore/agent-frontend/dist/chat-widget.js"></script>
+```
+
 ## Quick Start
 
-### 1. Include the files
+### Initialize the widget
 
 ```html
-<link rel="stylesheet" href="https://your-cdn.com/chat-widget.css">
-<script src="https://your-cdn.com/chat-widget.js"></script>
+<script>
+  ChatWidget.init({
+    backendUrl: 'https://your-api.com',
+    agentKey: 'your-agent',
+    title: 'Support Chat',
+    primaryColor: '#0066cc',
+  });
+</script>
 ```
 
-### 2. Initialize the widget
+### With custom API paths
 
 ```html
 <script>
@@ -50,6 +85,11 @@ Most chat widgets are tightly coupled to specific frameworks or require complex
     agentKey: 'your-agent',
     title: 'Support Chat',
     primaryColor: '#0066cc',
+    apiPaths: {
+      anonymousSession: '/api/auth/session/',
+      runs: '/api/chat/runs/',
+      runEvents: '/api/chat/runs/{runId}/events/',
+    },
   });
 </script>
 ```
@@ -74,6 +114,37 @@ Most chat widgets are tightly coupled to specific frameworks or require complex
 | `anonymousTokenHeader` | string | `'X-Anonymous-Token'` | Header name for auth token |
 | `conversationIdKey` | string | `'chat_widget_conversation_id'` | localStorage key for conversation ID |
 | `sessionTokenKey` | string | `'chat_widget_session_token'` | localStorage key for session token |
+| `apiPaths` | object | See below | API endpoint paths (customizable for different backends) |
+
+### API Paths Configuration
+
+The `apiPaths` option allows you to customize the backend API endpoints. This is useful when integrating with different backend frameworks or URL structures.
+
+**Default values:**
+```javascript
+apiPaths: {
+  anonymousSession: '/api/accounts/anonymous-session/',
+  runs: '/api/agent-runtime/runs/',
+  runEvents: '/api/agent-runtime/runs/{runId}/events/',
+  simulateCustomer: '/api/agent-runtime/simulate-customer/',
+}
+```
+
+**Example - Custom Django backend:**
+```javascript
+ChatWidget.init({
+  backendUrl: 'https://your-api.com',
+  agentKey: 'chat-agent',
+  apiPaths: {
+    anonymousSession: '/api/ai/agent/anonymous-session/',
+    runs: '/api/ai/agent/runs/',
+    runEvents: '/api/ai/agent/runs/{runId}/events/',
+    // simulateCustomer uses default value
+  },
+});
+```
+
+You only need to specify the paths you want to override; unspecified paths will use the defaults.
 
 ## Journey Types Configuration
 

package/dist/chat-widget.js

@@ -36,6 +36,13 @@
     anonymousTokenHeader: 'X-Anonymous-Token',
     conversationIdKey: 'chat_widget_conversation_id',
     sessionTokenKey: 'chat_widget_session_token',
+    // API endpoint paths (can be customized for different backend setups)
+    apiPaths: {
+      anonymousSession: '/api/accounts/anonymous-session/',
+      runs: '/api/agent-runtime/runs/',
+      runEvents: '/api/agent-runtime/runs/{runId}/events/',
+      simulateCustomer: '/api/agent-runtime/simulate-customer/',
+    },
   };
 
   // State
@@ -140,7 +147,7 @@
 
     // Create new anonymous session
     try {
-      const response = await fetch(`${config.backendUrl}/api/accounts/anonymous-session/`, {
+      const response = await fetch(`${config.backendUrl}${config.apiPaths.anonymousSession}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
       });
@@ -191,7 +198,7 @@
         state.conversationId = getStoredValue(config.conversationIdKey);
       }
 
-      const response = await fetch(`${config.backendUrl}/api/agent-runtime/runs/`, {
+      const response = await fetch(`${config.backendUrl}${config.apiPaths.runs}`, {
         method: 'POST',
         headers,
         body: JSON.stringify({
@@ -231,7 +238,8 @@
       state.eventSource.close();
     }
 
-    let url = `${config.backendUrl}/api/agent-runtime/runs/${runId}/events/`;
+    const eventPath = config.apiPaths.runEvents.replace('{runId}', runId);
+    let url = `${config.backendUrl}${eventPath}`;
     if (token) {
       url += `?anonymous_token=${encodeURIComponent(token)}`;
     }
@@ -366,7 +374,7 @@
     render();
 
     try {
-      const response = await fetch(`${config.backendUrl}/api/agent-runtime/simulate-customer/`, {
+      const response = await fetch(`${config.backendUrl}${config.apiPaths.simulateCustomer}`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -685,7 +693,17 @@
   // ============================================================================
 
   function init(userConfig = {}) {
-    config = { ...DEFAULT_CONFIG, ...userConfig };
+    // Deep merge apiPaths to allow partial overrides
+    const mergedApiPaths = {
+      ...DEFAULT_CONFIG.apiPaths,
+      ...(userConfig.apiPaths || {}),
+    };
+
+    config = {
+      ...DEFAULT_CONFIG,
+      ...userConfig,
+      apiPaths: mergedApiPaths,
+    };
     state.journeyType = config.defaultJourneyType;
 
     // Restore conversation ID

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A standalone, zero-dependency chat widget for AI agents. Embed conversational AI into any website with a single script tag.",
   "main": "dist/chat-widget.js",
   "files": [
@@ -16,7 +16,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/yourusername/agent-frontend.git"
+    "url": "git+https://github.com/makemore/agent-frontend.git"
   },
   "keywords": [
     "chat",
@@ -33,12 +33,12 @@
     "conversational-ai",
     "customer-support"
   ],
-  "author": "Your Name",
+  "author": "makemore",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/yourusername/agent-frontend/issues"
+    "url": "https://github.com/makemore/agent-frontend/issues"
   },
-  "homepage": "https://github.com/yourusername/agent-frontend#readme",
+  "homepage": "https://github.com/makemore/agent-frontend#readme",
   "engines": {
     "node": ">=12.0.0"
   }