web-agent-bridge 1.2.0 → 2.1.0

package/examples/puppeteer-agent.js

@@ -1,108 +1,108 @@
-/**
- * Example: Basic AI Agent using Puppeteer + WAB
- *
- * This agent connects to a website that has the Web Agent Bridge script installed,
- * discovers available actions, and executes them.
- *
- * Prerequisites:
- *   npm install puppeteer
- *
- * Usage:
- *   node examples/puppeteer-agent.js <url>
- */
-
-const puppeteer = require('puppeteer');
-
-const TARGET_URL = process.argv[2] || 'http://localhost:3000';
-
-async function main() {
-  console.log(`\n🤖 WAB Puppeteer Agent`);
-  console.log(`   Target: ${TARGET_URL}\n`);
-
-  const browser = await puppeteer.launch({ headless: true });
-  const page = await browser.newPage();
-
-  // Navigate to the target site
-  await page.goto(TARGET_URL, { waitUntil: 'networkidle2' });
-  console.log(`✓ Page loaded: ${await page.title()}`);
-
-  // Wait for WAB bridge to be ready
-  const hasBridge = await page.evaluate(() => {
-    return new Promise((resolve) => {
-      if (window.AICommands && window.AICommands._ready) {
-        resolve(true);
-      } else {
-        // Wait up to 5 seconds for bridge
-        const timeout = setTimeout(() => resolve(false), 5000);
-        document.addEventListener('wab:ready', () => {
-          clearTimeout(timeout);
-          resolve(true);
-        });
-      }
-    });
-  });
-
-  if (!hasBridge) {
-    console.log('✗ Web Agent Bridge not found on this page.');
-    await browser.close();
-    return;
-  }
-
-  console.log('✓ Web Agent Bridge detected\n');
-
-  // Step 1: Get page info
-  const pageInfo = await page.evaluate(() => window.AICommands.getPageInfo());
-  console.log('📄 Page Info:');
-  console.log(`   Title: ${pageInfo.title}`);
-  console.log(`   URL: ${pageInfo.url}`);
-  console.log(`   Bridge Version: ${pageInfo.bridgeVersion}`);
-  console.log(`   Tier: ${pageInfo.tier}`);
-  console.log(`   Actions Available: ${pageInfo.actionsCount}`);
-  console.log(`   Rate Limit Remaining: ${pageInfo.rateLimitRemaining}\n`);
-
-  // Step 2: Discover all available actions
-  const actions = await page.evaluate(() => window.AICommands.getActions());
-  console.log(`🔍 Discovered ${actions.length} actions:`);
-  actions.forEach((action) => {
-    console.log(`   • ${action.name} (${action.trigger}) — ${action.description}`);
-    if (action.fields) {
-      action.fields.forEach((f) => {
-        console.log(`     └─ ${f.name}: ${f.type}${f.required ? ' (required)' : ''}`);
-      });
-    }
-  });
-
-  // Step 3: Read content from the page
-  const content = await page.evaluate(() => {
-    return window.AICommands.readContent('h1') || window.AICommands.readContent('title');
-  });
-  if (content && content.success) {
-    console.log(`\n📖 Page heading: "${content.text}"`);
-  }
-
-  // Step 4: Execute a click action (first available)
-  const clickAction = actions.find((a) => a.trigger === 'click');
-  if (clickAction) {
-    console.log(`\n▶ Executing action: "${clickAction.name}"`);
-    const result = await page.evaluate(
-      (name) => window.AICommands.execute(name),
-      clickAction.name
-    );
-    console.log(`   Result: ${result.success ? '✓ Success' : '✗ ' + result.error}`);
-  }
-
-  // Step 5: List permissions
-  const permissions = pageInfo.permissions;
-  console.log('\n🔐 Permissions:');
-  Object.entries(permissions).forEach(([key, value]) => {
-    console.log(`   ${value ? '✓' : '✗'} ${key}`);
-  });
-
-  console.log('\n✓ Agent session complete.');
-  await browser.close();
-}
-
-main().catch((err) => {
-  console.error('Agent error:', err.message);
-  process.exit(1);
-});
+/**
+ * Example: Basic AI Agent using Puppeteer + WAB
+ *
+ * This agent connects to a website that has the Web Agent Bridge script installed,
+ * discovers available actions, and executes them.
+ *
+ * Prerequisites:
+ *   npm install puppeteer
+ *
+ * Usage:
+ *   node examples/puppeteer-agent.js <url>
+ */
+
+const puppeteer = require('puppeteer');
+
+const TARGET_URL = process.argv[2] || 'http://localhost:3000';
+
+async function main() {
+  console.log(`\n🤖 WAB Puppeteer Agent`);
+  console.log(`   Target: ${TARGET_URL}\n`);
+
+  const browser = await puppeteer.launch({ headless: true });
+  const page = await browser.newPage();
+
+  // Navigate to the target site
+  await page.goto(TARGET_URL, { waitUntil: 'networkidle2' });
+  console.log(`✓ Page loaded: ${await page.title()}`);
+
+  // Wait for WAB bridge to be ready
+  const hasBridge = await page.evaluate(() => {
+    return new Promise((resolve) => {
+      if (window.AICommands && window.AICommands._ready) {
+        resolve(true);
+      } else {
+        // Wait up to 5 seconds for bridge
+        const timeout = setTimeout(() => resolve(false), 5000);
+        document.addEventListener('wab:ready', () => {
+          clearTimeout(timeout);
+          resolve(true);
+        });
+      }
+    });
+  });
+
+  if (!hasBridge) {
+    console.log('✗ Web Agent Bridge not found on this page.');
+    await browser.close();
+    return;
+  }
+
+  console.log('✓ Web Agent Bridge detected\n');
+
+  // Step 1: Get page info
+  const pageInfo = await page.evaluate(() => window.AICommands.getPageInfo());
+  console.log('📄 Page Info:');
+  console.log(`   Title: ${pageInfo.title}`);
+  console.log(`   URL: ${pageInfo.url}`);
+  console.log(`   Bridge Version: ${pageInfo.bridgeVersion}`);
+  console.log(`   Tier: ${pageInfo.tier}`);
+  console.log(`   Actions Available: ${pageInfo.actionsCount}`);
+  console.log(`   Rate Limit Remaining: ${pageInfo.rateLimitRemaining}\n`);
+
+  // Step 2: Discover all available actions
+  const actions = await page.evaluate(() => window.AICommands.getActions());
+  console.log(`🔍 Discovered ${actions.length} actions:`);
+  actions.forEach((action) => {
+    console.log(`   • ${action.name} (${action.trigger}) — ${action.description}`);
+    if (action.fields) {
+      action.fields.forEach((f) => {
+        console.log(`     └─ ${f.name}: ${f.type}${f.required ? ' (required)' : ''}`);
+      });
+    }
+  });
+
+  // Step 3: Read content from the page
+  const content = await page.evaluate(() => {
+    return window.AICommands.readContent('h1') || window.AICommands.readContent('title');
+  });
+  if (content && content.success) {
+    console.log(`\n📖 Page heading: "${content.text}"`);
+  }
+
+  // Step 4: Execute a click action (first available)
+  const clickAction = actions.find((a) => a.trigger === 'click');
+  if (clickAction) {
+    console.log(`\n▶ Executing action: "${clickAction.name}"`);
+    const result = await page.evaluate(
+      (name) => window.AICommands.execute(name),
+      clickAction.name
+    );
+    console.log(`   Result: ${result.success ? '✓ Success' : '✗ ' + result.error}`);
+  }
+
+  // Step 5: List permissions
+  const permissions = pageInfo.permissions;
+  console.log('\n🔐 Permissions:');
+  Object.entries(permissions).forEach(([key, value]) => {
+    console.log(`   ${value ? '✓' : '✗'} ${key}`);
+  });
+
+  console.log('\n✓ Agent session complete.');
+  await browser.close();
+}
+
+main().catch((err) => {
+  console.error('Agent error:', err.message);
+  process.exit(1);
+});

package/examples/saas-dashboard/README.md

@@ -0,0 +1,55 @@
+# SaaS Dashboard Example (Notion-style)
+
+A practical setup for internal dashboards where agents read KPIs and trigger safe workflows.
+
+## Embed
+
+```html
+<script src="https://webagentbridge.com/script/wab.min.js"></script>
+<script>
+window.WAB.init({
+  name: 'Acme SaaS Dashboard',
+  actions: {
+    getKpiCards: {
+      description: 'Return KPI card values from dashboard widgets',
+      run: function () {
+        var cards = Array.from(document.querySelectorAll('[data-kpi-card]')).map(function (card) {
+          return {
+            key: card.getAttribute('data-kpi-card'),
+            label: (card.querySelector('[data-kpi-label]') || {}).textContent || null,
+            value: (card.querySelector('[data-kpi-value]') || {}).textContent || null
+          };
+        });
+        return { success: true, cards: cards };
+      }
+    },
+    openCustomerById: {
+      description: 'Open customer panel using data-customer-id selector',
+      params: [{ name: 'customerId', type: 'string', required: true }],
+      run: function (params) {
+        var id = String(params.customerId || '').trim();
+        if (!id) return { success: false, error: 'customerId is required' };
+        var row = document.querySelector('[data-customer-id="' + CSS.escape(id) + '"]');
+        if (!row) return { success: false, error: 'Customer not found' };
+        row.click();
+        return { success: true, customerId: id };
+      }
+    },
+    triggerInvoiceReminder: {
+      description: 'Trigger existing invoice reminder button from dashboard row',
+      params: [{ name: 'invoiceId', type: 'string', required: true }],
+      run: function (params) {
+        var id = String(params.invoiceId || '').trim();
+        if (!id) return { success: false, error: 'invoiceId is required' };
+        var btn = document.querySelector('[data-invoice-id="' + CSS.escape(id) + '"] [data-action="send-reminder"]');
+        if (!btn) return { success: false, error: 'Reminder action not found for invoice' };
+        btn.click();
+        return { success: true, invoiceId: id };
+      }
+    }
+  }
+});
+</script>
+```
+
+The selectors use data attributes so actions stay stable across UI redesigns.

package/examples/shopify-hydrogen/README.md

@@ -0,0 +1,74 @@
+# Shopify Hydrogen + WAB
+
+This example wires WAB into a Hydrogen storefront client component and exposes practical commerce actions.
+
+## Install
+
+```bash
+npm install @web-agent-bridge/react
+```
+
+## Component
+
+Create `app/components/WabHydrogenBridge.tsx`:
+
+```tsx
+'use client';
+
+import { useEffect } from 'react';
+import { WABProvider, useWAB, useWABAction } from '@web-agent-bridge/react';
+
+function BridgeInner() {
+  const { ready, discover, instance } = useWAB({
+    name: 'Hydrogen Storefront',
+    actions: {
+      getCartCount: {
+        description: 'Return cart item count from cart badge',
+        run: () => {
+          const badge = document.querySelector('[data-cart-count], .cart-count');
+          const value = Number((badge?.textContent || '0').trim()) || 0;
+          return { count: value };
+        }
+      },
+      addFirstVisibleProductToCart: {
+        description: 'Click the first visible add-to-cart button on the page',
+        run: () => {
+          const btn = Array.from(document.querySelectorAll('button, a')).find((el) =>
+            /add\s*to\s*cart/i.test((el.textContent || '').trim())
+          );
+          if (!btn) return { success: false, error: 'No add-to-cart button found' };
+          (btn as HTMLElement).click();
+          return { success: true };
+        }
+      }
+    }
+  });
+
+  const { run: runGetCartCount, result: cartCount } = useWABAction<{ count: number }>('getCartCount', {
+    instance
+  });
+
+  useEffect(() => {
+    if (!ready) return;
+    discover().then((doc) => console.log('WAB discover:', doc));
+    runGetCartCount().catch(() => {});
+  }, [ready, discover, runGetCartCount]);
+
+  return (
+    <div>
+      <p>WAB status: {ready ? 'ready' : 'loading'}</p>
+      <p>Cart count: {cartCount?.count ?? 0}</p>
+    </div>
+  );
+}
+
+export default function WabHydrogenBridge() {
+  return (
+    <WABProvider scriptSrc="https://webagentbridge.com/script/wab.min.js">
+      <BridgeInner />
+    </WABProvider>
+  );
+}
+```
+
+Import this component inside any Hydrogen page so WAB is available to agents.