web-agent-bridge 1.2.0 → 2.0.0

package/examples/mcp-agent.js

@@ -1,94 +1,94 @@
-/**
- * Example: Using WAB sites via the MCP adapter
- *
- * The WAB-MCP adapter exposes every WAB site action as an MCP tool,
- * so any MCP-compatible AI agent (Claude, GPT, etc.) can interact
- * with WAB-enabled websites through a uniform tool interface.
- *
- * Usage:
- *   node examples/mcp-agent.js <site-url>
- */
-
-const { WABMCPAdapter } = require('../wab-mcp-adapter');
-
-const TARGET = process.argv[2] || 'http://localhost:3000';
-
-async function main() {
-  console.log('\n  WAB → MCP Adapter Demo');
-  console.log(`  Target: ${TARGET}\n`);
-
-  const adapter = new WABMCPAdapter({
-    siteUrl: TARGET,
-    transport: 'http'
-  });
-
-  // Step 1: Discover site capabilities
-  console.log('1. Discovering WAB capabilities...');
-  const discovery = await adapter.discover();
-  if (discovery) {
-    console.log(`   Provider: ${discovery.provider?.name || 'unknown'}`);
-    console.log(`   Domain:   ${discovery.provider?.domain || 'unknown'}`);
-    console.log(`   Tier:     ${discovery.capabilities?.tier || 'free'}`);
-    console.log(`   Features: ${(discovery.capabilities?.features || []).join(', ')}`);
-    if (discovery.fairness) {
-      console.log(`   Fairness: score=${discovery.fairness.neutrality_score}, independent=${discovery.fairness.is_independent}`);
-    }
-  } else {
-    console.log('   No discovery document found (site may not have WAB configured)');
-  }
-
-  // Step 2: List MCP tools
-  console.log('\n2. Available MCP tools:');
-  const tools = await adapter.getTools();
-  tools.forEach(tool => {
-    const params = tool.input_schema?.properties
-      ? Object.keys(tool.input_schema.properties).join(', ')
-      : 'none';
-    console.log(`   - ${tool.name}: ${tool.description} (params: ${params})`);
-  });
-
-  // Step 3: Execute built-in tools
-  console.log('\n3. Executing wab_get_page_info...');
-  try {
-    const infoResult = await adapter.executeTool('wab_get_page_info', {});
-    const info = infoResult.content;
-    if (infoResult.is_error) {
-      console.log(`   Error: ${info.error}`);
-    } else {
-      console.log(`   Title:   ${info.title || 'N/A'}`);
-      console.log(`   Version: ${info.bridgeVersion || 'N/A'}`);
-      console.log(`   Domain:  ${info.domain || 'N/A'}`);
-    }
-  } catch (err) {
-    console.log(`   Error: ${err.message}`);
-  }
-
-  // Step 4: Search the fairness registry
-  console.log('\n4. Fairness-weighted search (demo):');
-  try {
-    const searchResult = await adapter.executeTool('wab_fairness_search', {
-      query: 'e-commerce',
-      limit: 5
-    });
-    const search = searchResult.content;
-    if (searchResult.is_error) {
-      console.log(`   Error: ${search.error}`);
-    } else if (search.results?.length) {
-      search.results.forEach(r => {
-        console.log(`   - ${r.name} (${r.domain}) — score: ${r.final_score}`);
-      });
-    } else {
-      console.log('   No sites registered in directory yet.');
-    }
-  } catch (err) {
-    console.log(`   Registry not available: ${err.message}`);
-  }
-
-  console.log('\nDone. In a real MCP integration, these tools would be');
-  console.log('exposed to Claude/GPT via the MCP tool-use protocol.\n');
-}
-
-main().catch(err => {
-  console.error('Error:', err.message);
-  process.exit(1);
-});
+/**
+ * Example: Using WAB sites via the MCP adapter
+ *
+ * The WAB-MCP adapter exposes every WAB site action as an MCP tool,
+ * so any MCP-compatible AI agent (Claude, GPT, etc.) can interact
+ * with WAB-enabled websites through a uniform tool interface.
+ *
+ * Usage:
+ *   node examples/mcp-agent.js <site-url>
+ */
+
+const { WABMCPAdapter } = require('../wab-mcp-adapter');
+
+const TARGET = process.argv[2] || 'http://localhost:3000';
+
+async function main() {
+  console.log('\n  WAB → MCP Adapter Demo');
+  console.log(`  Target: ${TARGET}\n`);
+
+  const adapter = new WABMCPAdapter({
+    siteUrl: TARGET,
+    transport: 'http'
+  });
+
+  // Step 1: Discover site capabilities
+  console.log('1. Discovering WAB capabilities...');
+  const discovery = await adapter.discover();
+  if (discovery) {
+    console.log(`   Provider: ${discovery.provider?.name || 'unknown'}`);
+    console.log(`   Domain:   ${discovery.provider?.domain || 'unknown'}`);
+    console.log(`   Tier:     ${discovery.capabilities?.tier || 'free'}`);
+    console.log(`   Features: ${(discovery.capabilities?.features || []).join(', ')}`);
+    if (discovery.fairness) {
+      console.log(`   Fairness: score=${discovery.fairness.neutrality_score}, independent=${discovery.fairness.is_independent}`);
+    }
+  } else {
+    console.log('   No discovery document found (site may not have WAB configured)');
+  }
+
+  // Step 2: List MCP tools
+  console.log('\n2. Available MCP tools:');
+  const tools = await adapter.getTools();
+  tools.forEach(tool => {
+    const params = tool.input_schema?.properties
+      ? Object.keys(tool.input_schema.properties).join(', ')
+      : 'none';
+    console.log(`   - ${tool.name}: ${tool.description} (params: ${params})`);
+  });
+
+  // Step 3: Execute built-in tools
+  console.log('\n3. Executing wab_get_page_info...');
+  try {
+    const infoResult = await adapter.executeTool('wab_get_page_info', {});
+    const info = infoResult.content;
+    if (infoResult.is_error) {
+      console.log(`   Error: ${info.error}`);
+    } else {
+      console.log(`   Title:   ${info.title || 'N/A'}`);
+      console.log(`   Version: ${info.bridgeVersion || 'N/A'}`);
+      console.log(`   Domain:  ${info.domain || 'N/A'}`);
+    }
+  } catch (err) {
+    console.log(`   Error: ${err.message}`);
+  }
+
+  // Step 4: Search the fairness registry
+  console.log('\n4. Fairness-weighted search (demo):');
+  try {
+    const searchResult = await adapter.executeTool('wab_fairness_search', {
+      query: 'e-commerce',
+      limit: 5
+    });
+    const search = searchResult.content;
+    if (searchResult.is_error) {
+      console.log(`   Error: ${search.error}`);
+    } else if (search.results?.length) {
+      search.results.forEach(r => {
+        console.log(`   - ${r.name} (${r.domain}) — score: ${r.final_score}`);
+      });
+    } else {
+      console.log('   No sites registered in directory yet.');
+    }
+  } catch (err) {
+    console.log(`   Registry not available: ${err.message}`);
+  }
+
+  console.log('\nDone. In a real MCP integration, these tools would be');
+  console.log('exposed to Claude/GPT via the MCP tool-use protocol.\n');
+}
+
+main().catch(err => {
+  console.error('Error:', err.message);
+  process.exit(1);
+});

package/examples/next-app-router/README.md

@@ -0,0 +1,44 @@
+# Next.js App Router + WAB
+
+1. Install the React helpers (from repo root after publish, or `file:` link):
+
+```bash
+npm install @web-agent-bridge/react
+```
+
+2. Add a client component `components/WabShop.tsx`:
+
+```tsx
+'use client';
+
+import { WABProvider, useWAB } from '@web-agent-bridge/react';
+import { useEffect } from 'react';
+
+function WabInner() {
+  const { ready, discover, execute } = useWAB({
+    name: 'My App',
+    actions: {
+      ping: { description: 'Health check', run: () => ({ ok: true }) },
+    },
+  });
+
+  useEffect(() => {
+    if (!ready) return;
+    discover().then(console.log);
+  }, [ready, discover]);
+
+  return <p>WAB {ready ? 'ready' : 'loading…'}</p>;
+}
+
+export default function WabShop() {
+  return (
+    <WABProvider scriptSrc="https://webagentbridge.com/script/wab.min.js">
+      <WabInner />
+    </WABProvider>
+  );
+}
+```
+
+3. Import `WabShop` from any `app/.../page.tsx` (server component can import client components).
+
+Use `next/script` with `strategy="beforeInteractive"` if you prefer loading `wab.min.js` in `layout.tsx` instead of `WABProvider`.

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.