Action Invoker (Demo Page)

Route and Component

// Route in App.tsx
<Route path="/demo" element={<DemoPage apiBaseUrl={apiBaseUrl} accessToken={accessToken} />} />

// DemoPage source: packages/app-pages-react/src/DemoPage.tsx
// Prop: apiBaseUrl — the base URL for REST API calls (e.g. https://localhost:10001)
// Prop: accessToken — JWT for authenticated requests (optional)

Demo Page Tabs

One-Click Setup

Clicking "Create Demo Servers" calls api.createGroup() for each predefined server and group combination. The three demo servers are:

const DEMO_SERVERS = [
  {
    name: 'BAS Server',
    serverId: 'bas-server-1',
    groups: [
      { name: 'general',  description: 'General business activities' },
      { name: 'sales',    description: 'Sales team activities' },
      { name: 'support',  description: 'Customer support activities' },
    ],
  },
  {
    name: 'Chat Server',
    serverId: 'chat-server-1',
    groups: [
      { name: 'announcements', description: 'Company announcements' },
      { name: 'random',        description: 'Off-topic discussions' },
      { name: 'engineering',   description: 'Engineering team chat' },
    ],
  },
  {
    name: 'ERP Server',
    serverId: 'erp-server-1',
    groups: [
      { name: 'accounting', description: 'Accounting department' },
      { name: 'inventory',  description: 'Inventory management' },
      { name: 'hr',         description: 'Human resources' },
    ],
  },
];

// API call for each group:
const api = createAPI(apiBaseUrl, accessToken ? () => accessToken : undefined);
await api.createGroup(server.serverId, group.name, group.description, 'demo');

Multi-Window Testing

The Multi-Window tab renders multiple iframes, each loading the full EdgeStream DevTools app. This simulates multiple simultaneous clients — each iframe maintains its own independent connection. Messages sent from one window appear in all others in real time.

// Grid layout adapts to window count:
// 1-2 windows  → 1 column or 2 columns
// 3-4 windows  → 2 columns
// 5-10 windows → 3 columns

// Each iframe:
<iframe
  src={appUrl}            // = window.location.origin + base path
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms
           allow-top-navigation-by-user-activation allow-modals"
  title={`Chat Window ${i + 1}`}
/>

// Tip: Configure 2-4 windows, connect each with a different user name,
// then send messages from one window and observe delivery in others.

Manual Setup with curl

The Manual tab generates and displays curl commands for each server/group combination. Each command has a Copy button. This is useful when you need to target a non-default API URL or pass custom headers.

// Example curl command for bas-server-1/general:
curl -X POST https://localhost:10001/api/edge-stream/groups/create \
  -H "Content-Type: application/json" \
  -k \
  -d '{
    "data": {
      "serverId": "bas-server-1",
      "groupName": "general",
      "description": "General business activities",
      "createdBy": "demo"
    }
  }'

// The -k flag skips SSL verification (needed for localhost dev cert).
// Replace the URL with your apiBaseUrl if using a different server.

createAPI Helper

The Demo page uses createAPI from edge-stream-js to make REST calls. The same helper is available in your own application:

import { createAPI } from 'edge-stream-js';

// Without auth:
const api = createAPI('https://localhost:10001');

// With JWT auth (token factory pattern):
const api = createAPI('https://localhost:10001', () => accessToken);

// Available methods:
await api.createGroup(serverId, groupName, description, createdBy);
// Returns: { success: boolean, groupId: string }

// Errors: throws on network failure or non-2xx response
// The Demo page catches and shows via toast.error()

Workflow: First-Time Demo Setup

1. Connect to your EdgeStream server via the QuickStartPanel (or Custom Configuration).
2. Navigate to Demo in the sidebar.
3. On the One-Click Setup tab, click Create Demo Servers.
4. Wait for the success toast — 9 groups are created across 3 servers.
5. Navigate to Chat to send messages.
6. Open the Multi-Window tab and launch 2+ windows to verify real-time delivery.
7. Check Hook Execution and Subscriber Delivery panels to observe the pipeline.