web-agent-bridge 1.2.0 → 2.1.0

package/bin/wab.js

@@ -1,80 +1,80 @@
-#!/usr/bin/env node
-
-/**
- * Web Agent Bridge CLI
- * Usage: npx web-agent-bridge [command]
- */
-
-const path = require('path');
-const fs = require('fs');
-
-const args = process.argv.slice(2);
-const command = args[0] || 'start';
-
-function printHelp() {
-  console.log(`
-  Web Agent Bridge CLI
-
-  Usage:
-    npx web-agent-bridge <command> [options]
-
-  Commands:
-    start       Start the WAB server (default)
-    init        Create .env file from template
-    help        Show this help message
-
-  Options:
-    --port, -p  Set server port (default: 3000)
-
-  Examples:
-    npx web-agent-bridge start
-    npx web-agent-bridge start --port 4000
-    npx web-agent-bridge init
-  `);
-}
-
-switch (command) {
-  case 'start': {
-    const portIdx = args.indexOf('--port') !== -1 ? args.indexOf('--port') : args.indexOf('-p');
-    if (portIdx !== -1 && args[portIdx + 1]) {
-      process.env.PORT = args[portIdx + 1];
-    }
-
-    const envPath = path.join(process.cwd(), '.env');
-    if (fs.existsSync(envPath)) {
-      require('dotenv').config({ path: envPath });
-    }
-
-    require('../server/index.js');
-    break;
-  }
-
-  case 'init': {
-    const envExample = path.join(__dirname, '..', '.env.example');
-    const envTarget = path.join(process.cwd(), '.env');
-
-    if (fs.existsSync(envTarget)) {
-      console.log('  .env file already exists. Skipping.');
-    } else if (fs.existsSync(envExample)) {
-      fs.copyFileSync(envExample, envTarget);
-      console.log('  Created .env file from template.');
-      console.log('  Edit .env to set your JWT_SECRET before starting.');
-    } else {
-      const defaultEnv = 'PORT=3000\nJWT_SECRET=change-this-to-a-strong-random-secret-in-production\nNODE_ENV=development\n';
-      fs.writeFileSync(envTarget, defaultEnv);
-      console.log('  Created default .env file.');
-    }
-    break;
-  }
-
-  case 'help':
-  case '--help':
-  case '-h':
-    printHelp();
-    break;
-
-  default:
-    console.error(`  Unknown command: ${command}`);
-    printHelp();
-    process.exit(1);
-}
+#!/usr/bin/env node
+
+/**
+ * Web Agent Bridge CLI
+ * Usage: npx web-agent-bridge [command]
+ */
+
+const path = require('path');
+const fs = require('fs');
+
+const args = process.argv.slice(2);
+const command = args[0] || 'start';
+
+function printHelp() {
+  console.log(`
+  Web Agent Bridge CLI
+
+  Usage:
+    npx web-agent-bridge <command> [options]
+
+  Commands:
+    start       Start the WAB server (default)
+    init        Create .env file from template
+    help        Show this help message
+
+  Options:
+    --port, -p  Set server port (default: 3000)
+
+  Examples:
+    npx web-agent-bridge start
+    npx web-agent-bridge start --port 4000
+    npx web-agent-bridge init
+  `);
+}
+
+switch (command) {
+  case 'start': {
+    const portIdx = args.indexOf('--port') !== -1 ? args.indexOf('--port') : args.indexOf('-p');
+    if (portIdx !== -1 && args[portIdx + 1]) {
+      process.env.PORT = args[portIdx + 1];
+    }
+
+    const envPath = path.join(process.cwd(), '.env');
+    if (fs.existsSync(envPath)) {
+      require('dotenv').config({ path: envPath });
+    }
+
+    require('../server/index.js');
+    break;
+  }
+
+  case 'init': {
+    const envExample = path.join(__dirname, '..', '.env.example');
+    const envTarget = path.join(process.cwd(), '.env');
+
+    if (fs.existsSync(envTarget)) {
+      console.log('  .env file already exists. Skipping.');
+    } else if (fs.existsSync(envExample)) {
+      fs.copyFileSync(envExample, envTarget);
+      console.log('  Created .env file from template.');
+      console.log('  Edit .env to set your JWT_SECRET before starting.');
+    } else {
+      const defaultEnv = 'PORT=3000\nJWT_SECRET=change-this-to-a-strong-random-secret-in-production\nNODE_ENV=development\n';
+      fs.writeFileSync(envTarget, defaultEnv);
+      console.log('  Created default .env file.');
+    }
+    break;
+  }
+
+  case 'help':
+  case '--help':
+  case '-h':
+    printHelp();
+    break;
+
+  default:
+    console.error(`  Unknown command: ${command}`);
+    printHelp();
+    process.exit(1);
+}

package/examples/bidi-agent.js

@@ -1,119 +1,119 @@
-/**
- * Example: AI Agent using WebDriver BiDi Protocol via WAB
- *
- * This agent connects to a website using the __wab_bidi interface,
- * which follows WebDriver BiDi conventions for standardized communication.
- *
- * Prerequisites:
- *   npm install puppeteer
- *
- * Usage:
- *   node examples/bidi-agent.js <url>
- */
-
-const puppeteer = require('puppeteer');
-
-const TARGET_URL = process.argv[2] || 'http://localhost:3000';
-
-let commandId = 0;
-
-function bidiCommand(method, params = {}) {
-  return { id: ++commandId, method, params };
-}
-
-async function main() {
-  console.log(`\n🔗 WAB BiDi Agent`);
-  console.log(`   Target: ${TARGET_URL}\n`);
-
-  const browser = await puppeteer.launch({ headless: true });
-  const page = await browser.newPage();
-
-  await page.goto(TARGET_URL, { waitUntil: 'networkidle2' });
-  console.log(`✓ Page loaded: ${await page.title()}`);
-
-  // Check for BiDi interface
-  const hasBiDi = await page.evaluate(() => {
-    return typeof window.__wab_bidi !== 'undefined' && typeof window.__wab_bidi.send === 'function';
-  });
-
-  if (!hasBiDi) {
-    console.log('✗ WAB BiDi interface not found on this page.');
-    await browser.close();
-    return;
-  }
-
-  console.log('✓ WAB BiDi interface detected\n');
-
-  // Step 1: Get BiDi context
-  const context = await page.evaluate(() => window.__wab_bidi.getContext());
-  console.log('📋 BiDi Context:');
-  console.log(`   URL: ${context.context.url}`);
-  console.log(`   Title: ${context.context.title}`);
-  console.log(`   Version: ${context.version}`);
-  console.log(`   Tier: ${context.capabilities.tier}`);
-  console.log(`   Capabilities: ${context.capabilities.actions.length} actions\n`);
-
-  // Step 2: Get actions via BiDi command
-  const actionsResult = await page.evaluate((cmd) => {
-    return window.__wab_bidi.send(cmd);
-  }, bidiCommand('wab.getActions'));
-
-  console.log(`🔍 Actions (via BiDi):`);
-  if (actionsResult.result) {
-    actionsResult.result.forEach((action) => {
-      console.log(`   • ${action.name} [${action.trigger}] — ${action.description}`);
-    });
-  }
-
-  // Step 3: Get page info via BiDi
-  const infoResult = await page.evaluate((cmd) => {
-    return window.__wab_bidi.send(cmd);
-  }, bidiCommand('wab.getPageInfo'));
-
-  console.log('\n📄 Page Info (via BiDi):');
-  if (infoResult.result) {
-    console.log(`   Title: ${infoResult.result.title}`);
-    console.log(`   Domain: ${infoResult.result.domain}`);
-    console.log(`   Bridge: v${infoResult.result.bridgeVersion}`);
-  }
-
-  // Step 4: Read content via BiDi command
-  const readResult = await page.evaluate((cmd) => {
-    return window.__wab_bidi.send(cmd);
-  }, bidiCommand('wab.readContent', { selector: 'h1' }));
-
-  if (readResult.result && readResult.result.success) {
-    console.log(`\n📖 Content: "${readResult.result.text}"`);
-  }
-
-  // Step 5: Execute an action via BiDi
-  const actions = actionsResult.result || [];
-  const firstAction = actions.find((a) => a.trigger === 'click');
-  if (firstAction) {
-    console.log(`\n▶ Executing via BiDi: "${firstAction.name}"`);
-    const execResult = await page.evaluate((cmd) => {
-      return window.__wab_bidi.send(cmd);
-    }, bidiCommand('wab.executeAction', { name: firstAction.name }));
-
-    const r = execResult.result;
-    console.log(`   Result: ${r && r.success ? '✓ Success' : '✗ ' + (r?.error || 'Unknown error')}`);
-  }
-
-  // Step 6: Test error handling
-  console.log('\n🧪 Testing error handling:');
-  const errorResult = await page.evaluate((cmd) => {
-    return window.__wab_bidi.send(cmd);
-  }, bidiCommand('wab.unknownMethod'));
-
-  if (errorResult.error) {
-    console.log(`   ✓ Unknown command handled: ${errorResult.error.code} — ${errorResult.error.message}`);
-  }
-
-  console.log('\n✓ BiDi agent session complete.');
-  await browser.close();
-}
-
-main().catch((err) => {
-  console.error('Agent error:', err.message);
-  process.exit(1);
-});
+/**
+ * Example: AI Agent using WebDriver BiDi Protocol via WAB
+ *
+ * This agent connects to a website using the __wab_bidi interface,
+ * which follows WebDriver BiDi conventions for standardized communication.
+ *
+ * Prerequisites:
+ *   npm install puppeteer
+ *
+ * Usage:
+ *   node examples/bidi-agent.js <url>
+ */
+
+const puppeteer = require('puppeteer');
+
+const TARGET_URL = process.argv[2] || 'http://localhost:3000';
+
+let commandId = 0;
+
+function bidiCommand(method, params = {}) {
+  return { id: ++commandId, method, params };
+}
+
+async function main() {
+  console.log(`\n🔗 WAB BiDi Agent`);
+  console.log(`   Target: ${TARGET_URL}\n`);
+
+  const browser = await puppeteer.launch({ headless: true });
+  const page = await browser.newPage();
+
+  await page.goto(TARGET_URL, { waitUntil: 'networkidle2' });
+  console.log(`✓ Page loaded: ${await page.title()}`);
+
+  // Check for BiDi interface
+  const hasBiDi = await page.evaluate(() => {
+    return typeof window.__wab_bidi !== 'undefined' && typeof window.__wab_bidi.send === 'function';
+  });
+
+  if (!hasBiDi) {
+    console.log('✗ WAB BiDi interface not found on this page.');
+    await browser.close();
+    return;
+  }
+
+  console.log('✓ WAB BiDi interface detected\n');
+
+  // Step 1: Get BiDi context
+  const context = await page.evaluate(() => window.__wab_bidi.getContext());
+  console.log('📋 BiDi Context:');
+  console.log(`   URL: ${context.context.url}`);
+  console.log(`   Title: ${context.context.title}`);
+  console.log(`   Version: ${context.version}`);
+  console.log(`   Tier: ${context.capabilities.tier}`);
+  console.log(`   Capabilities: ${context.capabilities.actions.length} actions\n`);
+
+  // Step 2: Get actions via BiDi command
+  const actionsResult = await page.evaluate((cmd) => {
+    return window.__wab_bidi.send(cmd);
+  }, bidiCommand('wab.getActions'));
+
+  console.log(`🔍 Actions (via BiDi):`);
+  if (actionsResult.result) {
+    actionsResult.result.forEach((action) => {
+      console.log(`   • ${action.name} [${action.trigger}] — ${action.description}`);
+    });
+  }
+
+  // Step 3: Get page info via BiDi
+  const infoResult = await page.evaluate((cmd) => {
+    return window.__wab_bidi.send(cmd);
+  }, bidiCommand('wab.getPageInfo'));
+
+  console.log('\n📄 Page Info (via BiDi):');
+  if (infoResult.result) {
+    console.log(`   Title: ${infoResult.result.title}`);
+    console.log(`   Domain: ${infoResult.result.domain}`);
+    console.log(`   Bridge: v${infoResult.result.bridgeVersion}`);
+  }
+
+  // Step 4: Read content via BiDi command
+  const readResult = await page.evaluate((cmd) => {
+    return window.__wab_bidi.send(cmd);
+  }, bidiCommand('wab.readContent', { selector: 'h1' }));
+
+  if (readResult.result && readResult.result.success) {
+    console.log(`\n📖 Content: "${readResult.result.text}"`);
+  }
+
+  // Step 5: Execute an action via BiDi
+  const actions = actionsResult.result || [];
+  const firstAction = actions.find((a) => a.trigger === 'click');
+  if (firstAction) {
+    console.log(`\n▶ Executing via BiDi: "${firstAction.name}"`);
+    const execResult = await page.evaluate((cmd) => {
+      return window.__wab_bidi.send(cmd);
+    }, bidiCommand('wab.executeAction', { name: firstAction.name }));
+
+    const r = execResult.result;
+    console.log(`   Result: ${r && r.success ? '✓ Success' : '✗ ' + (r?.error || 'Unknown error')}`);
+  }
+
+  // Step 6: Test error handling
+  console.log('\n🧪 Testing error handling:');
+  const errorResult = await page.evaluate((cmd) => {
+    return window.__wab_bidi.send(cmd);
+  }, bidiCommand('wab.unknownMethod'));
+
+  if (errorResult.error) {
+    console.log(`   ✓ Unknown command handled: ${errorResult.error.code} — ${errorResult.error.message}`);
+  }
+
+  console.log('\n✓ BiDi agent session complete.');
+  await browser.close();
+}
+
+main().catch((err) => {
+  console.error('Agent error:', err.message);
+  process.exit(1);
+});

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`.