web-agent-bridge 3.4.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (315) hide show
  1. package/LICENSE +84 -84
  2. package/README.ar.md +1565 -1304
  3. package/README.md +171 -298
  4. package/bin/agent-runner.js +474 -474
  5. package/bin/cli.js +237 -237
  6. package/bin/wab-init.js +244 -223
  7. package/bin/wab.js +80 -80
  8. package/examples/azure-dns-wab.js +83 -83
  9. package/examples/bidi-agent.js +119 -119
  10. package/examples/cloudflare-wab-dns.js +121 -121
  11. package/examples/cpanel-wab-dns.js +114 -114
  12. package/examples/cross-site-agent.js +91 -91
  13. package/examples/dns-discovery-agent.js +166 -166
  14. package/examples/gcp-dns-wab.js +76 -76
  15. package/examples/governance-agent.js +169 -169
  16. package/examples/mcp-agent.js +94 -94
  17. package/examples/next-app-router/README.md +44 -44
  18. package/examples/plesk-wab-dns.js +103 -103
  19. package/examples/puppeteer-agent.js +108 -108
  20. package/examples/route53-wab-dns.js +144 -144
  21. package/examples/saas-dashboard/README.md +55 -55
  22. package/examples/safe-mode-agent.js +96 -96
  23. package/examples/self-discovery.js +106 -0
  24. package/examples/shopify-hydrogen/README.md +74 -74
  25. package/examples/vision-agent.js +171 -171
  26. package/examples/wab-sign.js +74 -74
  27. package/examples/wab-verify.js +60 -60
  28. package/examples/wordpress-elementor/README.md +77 -77
  29. package/package.json +93 -93
  30. package/public/.well-known/agent-tools.json +180 -180
  31. package/public/.well-known/ai-assets.json +59 -59
  32. package/public/.well-known/security.txt +8 -8
  33. package/public/.well-known/wab.json +28 -28
  34. package/public/activate.html +448 -368
  35. package/public/adopt.html +236 -0
  36. package/public/adoption-metrics.html +188 -188
  37. package/public/agent-workspace.html +359 -349
  38. package/public/ai.html +198 -198
  39. package/public/api.html +397 -413
  40. package/public/atp.html +171 -0
  41. package/public/azure-dns-integration.html +289 -289
  42. package/public/browser.html +486 -486
  43. package/public/cloudflare-integration.html +380 -380
  44. package/public/commander-dashboard.html +243 -243
  45. package/public/cookies.html +210 -210
  46. package/public/cpanel-integration.html +398 -398
  47. package/public/css/agent-workspace.css +1713 -1713
  48. package/public/css/premium.css +317 -317
  49. package/public/css/styles.css +1401 -1263
  50. package/public/dashboard-shieldlink.html +295 -0
  51. package/public/dashboard.html +711 -707
  52. package/public/dns.html +436 -436
  53. package/public/docs.html +588 -588
  54. package/public/enterprise-mesh.ar.html +80 -0
  55. package/public/enterprise-mesh.html +81 -0
  56. package/public/feed.xml +89 -89
  57. package/public/gcp-dns-integration.html +318 -318
  58. package/public/governance.ar.html +70 -0
  59. package/public/governance.html +69 -0
  60. package/public/growth.html +465 -465
  61. package/public/index.html +1372 -1266
  62. package/public/integrations.html +556 -556
  63. package/public/js/activate.js +449 -145
  64. package/public/js/agent-workspace.js +1740 -1740
  65. package/public/js/auth-nav.js +117 -65
  66. package/public/js/auth-redirect.js +12 -12
  67. package/public/js/cookie-consent.js +56 -56
  68. package/public/js/dns.js +438 -438
  69. package/public/js/wab-demo-page.js +721 -721
  70. package/public/js/ws-client.js +74 -74
  71. package/public/l-preview.html +242 -0
  72. package/public/llms-full.txt +360 -360
  73. package/public/llms.txt +125 -125
  74. package/public/login.html +85 -85
  75. package/public/mesh-dashboard.html +328 -328
  76. package/public/milestones.html +346 -0
  77. package/public/one-click.html +779 -0
  78. package/public/openapi.json +669 -669
  79. package/public/partners.ar.html +145 -0
  80. package/public/partners.html +143 -0
  81. package/public/phone-shield.html +281 -281
  82. package/public/plesk-integration.html +375 -375
  83. package/public/premium-dashboard.html +2489 -2489
  84. package/public/premium.html +793 -793
  85. package/public/privacy.html +297 -297
  86. package/public/provider-onboarding.html +172 -172
  87. package/public/provider-sandbox.html +134 -134
  88. package/public/providers.html +359 -359
  89. package/public/refusals.html +172 -0
  90. package/public/register.html +105 -105
  91. package/public/registrar-integrations.html +141 -141
  92. package/public/ring4.html +292 -0
  93. package/public/robots.txt +99 -99
  94. package/public/route53-integration.html +531 -531
  95. package/public/score.html +263 -0
  96. package/public/script/wab-consent.d.ts +36 -36
  97. package/public/script/wab-consent.js +104 -104
  98. package/public/script/wab-schema.js +131 -131
  99. package/public/script/wab.d.ts +108 -108
  100. package/public/script/wab.min.js +580 -580
  101. package/public/security.txt +8 -8
  102. package/public/shieldlink.html +244 -0
  103. package/public/shieldqr.html +231 -231
  104. package/public/sitemap.xml +13 -1
  105. package/public/terms.html +256 -256
  106. package/public/trust-graph-api.ar.html +92 -0
  107. package/public/trust-graph-api.html +91 -0
  108. package/public/wab-features.html +560 -0
  109. package/public/wab-trust.html +200 -200
  110. package/public/wab-truth.html +375 -0
  111. package/public/wab-vs-protocols.html +210 -210
  112. package/public/whitepaper.html +449 -449
  113. package/script/ai-agent-bridge.js +1754 -1754
  114. package/sdk/README.md +99 -99
  115. package/sdk/agent-mesh.js +449 -449
  116. package/sdk/atp.js +103 -0
  117. package/sdk/auto-discovery.js +301 -288
  118. package/sdk/commander.js +262 -262
  119. package/sdk/governance.js +262 -262
  120. package/sdk/index.d.ts +464 -464
  121. package/sdk/index.js +653 -649
  122. package/sdk/multi-agent.js +318 -318
  123. package/sdk/safe-mode.js +221 -221
  124. package/sdk/safety-shield.js +219 -219
  125. package/sdk/schema-discovery.js +83 -83
  126. package/server/adapters/index.js +520 -520
  127. package/server/config/plans.js +412 -367
  128. package/server/config/secrets.js +102 -102
  129. package/server/control-plane/index.js +301 -301
  130. package/server/data-plane/index.js +354 -354
  131. package/server/index.js +793 -670
  132. package/server/llm/index.js +404 -404
  133. package/server/middleware/adminAuth.js +35 -35
  134. package/server/middleware/api-tier.js +170 -0
  135. package/server/middleware/auth.js +50 -50
  136. package/server/middleware/featureGate.js +88 -88
  137. package/server/middleware/rateLimits.js +100 -100
  138. package/server/middleware/sensitiveAction.js +157 -157
  139. package/server/middleware/wab-trust.js +141 -0
  140. package/server/migrations/001_add_analytics_indexes.sql +7 -7
  141. package/server/migrations/002_premium_features.sql +418 -418
  142. package/server/migrations/003_ads_integer_cents.sql +33 -33
  143. package/server/migrations/004_agent_os.sql +158 -158
  144. package/server/migrations/005_marketplace_metering.sql +126 -126
  145. package/server/migrations/006_growth_suite.sql +138 -0
  146. package/server/migrations/007_governance.sql +106 -106
  147. package/server/migrations/008_plans.sql +144 -144
  148. package/server/migrations/009_shieldqr.sql +30 -30
  149. package/server/migrations/010_extended_trust.sql +33 -33
  150. package/server/migrations/011_outreach.sql +47 -0
  151. package/server/migrations/012_shieldlink.sql +116 -0
  152. package/server/migrations/013_ct_monitor.sql +13 -0
  153. package/server/migrations/014_wab_advanced_features.sql +128 -0
  154. package/server/migrations/015_wab_truth_layer.sql +101 -0
  155. package/server/migrations/016_ring4_external_trust.sql +84 -0
  156. package/server/migrations/017_ring4_extensions.sql +69 -0
  157. package/server/migrations/018_commercial_foundations.sql +167 -0
  158. package/server/migrations/019_unify_tier_constraints.sql +133 -0
  159. package/server/migrations/020_agent_transaction_primitive.sql +119 -0
  160. package/server/models/adapters/index.js +33 -33
  161. package/server/models/adapters/mysql.js +183 -183
  162. package/server/models/adapters/postgresql.js +172 -172
  163. package/server/models/adapters/sqlite.js +7 -7
  164. package/server/models/db.js +740 -740
  165. package/server/observability/failure-analysis.js +337 -337
  166. package/server/observability/index.js +394 -394
  167. package/server/protocol/capabilities.js +223 -223
  168. package/server/protocol/index.js +243 -243
  169. package/server/protocol/schema.js +584 -584
  170. package/server/registry/certification.js +271 -271
  171. package/server/registry/index.js +326 -326
  172. package/server/routes/activate.js +478 -0
  173. package/server/routes/admin-outreach.js +239 -0
  174. package/server/routes/admin-plans.js +76 -76
  175. package/server/routes/admin-premium.js +674 -673
  176. package/server/routes/admin-shieldlink.js +137 -0
  177. package/server/routes/admin-shieldqr.js +90 -90
  178. package/server/routes/admin-trust-monitor.js +139 -83
  179. package/server/routes/admin.js +550 -549
  180. package/server/routes/adopt.js +61 -0
  181. package/server/routes/ads.js +130 -130
  182. package/server/routes/agent-workspace.js +540 -540
  183. package/server/routes/api-keys.js +127 -0
  184. package/server/routes/api.js +150 -150
  185. package/server/routes/auth.js +71 -71
  186. package/server/routes/billing.js +57 -57
  187. package/server/routes/commander.js +316 -316
  188. package/server/routes/customer-shieldlink.js +133 -0
  189. package/server/routes/demo-showcase.js +332 -332
  190. package/server/routes/demo-store.js +154 -154
  191. package/server/routes/diagnose.js +373 -0
  192. package/server/routes/discovery.js +2348 -2348
  193. package/server/routes/enterprise-mesh.js +170 -0
  194. package/server/routes/gateway.js +173 -173
  195. package/server/routes/governance-saas.js +203 -0
  196. package/server/routes/governance.js +208 -208
  197. package/server/routes/growth.js +1048 -0
  198. package/server/routes/intent.js +328 -0
  199. package/server/routes/license.js +251 -251
  200. package/server/routes/mesh.js +469 -469
  201. package/server/routes/noscript.js +543 -543
  202. package/server/routes/partners.js +201 -0
  203. package/server/routes/plans.js +33 -33
  204. package/server/routes/premium-v2.js +686 -686
  205. package/server/routes/premium.js +724 -724
  206. package/server/routes/providers.js +650 -650
  207. package/server/routes/reputation.js +411 -0
  208. package/server/routes/ring4.js +885 -0
  209. package/server/routes/runtime.js +2148 -2148
  210. package/server/routes/shieldlink.js +70 -0
  211. package/server/routes/shieldqr.js +88 -88
  212. package/server/routes/sovereign.js +465 -465
  213. package/server/routes/transactions.js +233 -0
  214. package/server/routes/truth-layer.js +670 -0
  215. package/server/routes/universal.js +200 -200
  216. package/server/routes/unsubscribe.js +51 -0
  217. package/server/routes/wab-api.js +850 -850
  218. package/server/routes/wab-cache.js +282 -0
  219. package/server/runtime/container-worker.js +111 -111
  220. package/server/runtime/container.js +448 -448
  221. package/server/runtime/distributed-worker.js +362 -362
  222. package/server/runtime/event-bus.js +210 -210
  223. package/server/runtime/index.js +253 -253
  224. package/server/runtime/queue.js +599 -599
  225. package/server/runtime/replay.js +666 -666
  226. package/server/runtime/sandbox.js +266 -266
  227. package/server/runtime/scheduler.js +534 -534
  228. package/server/runtime/session-engine.js +293 -293
  229. package/server/runtime/state-manager.js +188 -188
  230. package/server/secrets/wab-signing-key.pem +3 -0
  231. package/server/secrets/wab-signing-pub.pem +3 -0
  232. package/server/security/cross-site-redactor.js +196 -196
  233. package/server/security/dry-run.js +180 -180
  234. package/server/security/human-gate-rate-limit.js +147 -147
  235. package/server/security/human-gate-transports.js +178 -178
  236. package/server/security/human-gate.js +281 -281
  237. package/server/security/index.js +368 -368
  238. package/server/security/intent-engine.js +245 -245
  239. package/server/security/reward-guard.js +171 -171
  240. package/server/security/rollback-store.js +239 -239
  241. package/server/security/token-scope.js +404 -404
  242. package/server/security/url-policy.js +139 -139
  243. package/server/services/adoption-agent.js +182 -0
  244. package/server/services/agent-chat.js +506 -506
  245. package/server/services/agent-learning.js +601 -601
  246. package/server/services/agent-memory.js +625 -625
  247. package/server/services/agent-mesh.js +555 -555
  248. package/server/services/agent-symphony.js +717 -717
  249. package/server/services/agent-tasks.js +1807 -1807
  250. package/server/services/api-key-engine.js +292 -292
  251. package/server/services/cluster.js +894 -894
  252. package/server/services/commander.js +738 -738
  253. package/server/services/edge-compute.js +440 -440
  254. package/server/services/email.js +233 -233
  255. package/server/services/fairness-engine.js +409 -0
  256. package/server/services/fairness.js +420 -0
  257. package/server/services/governance.js +466 -466
  258. package/server/services/hosted-runtime.js +205 -205
  259. package/server/services/lfd.js +635 -635
  260. package/server/services/local-ai.js +389 -389
  261. package/server/services/marketplace.js +270 -270
  262. package/server/services/metering.js +182 -182
  263. package/server/services/modules/affiliate-intelligence.js +93 -93
  264. package/server/services/modules/agent-firewall.js +90 -90
  265. package/server/services/modules/bounty.js +89 -89
  266. package/server/services/modules/collective-bargaining.js +92 -92
  267. package/server/services/modules/dark-pattern.js +66 -66
  268. package/server/services/modules/gov-intelligence.js +45 -45
  269. package/server/services/modules/neural.js +55 -55
  270. package/server/services/modules/notary.js +49 -49
  271. package/server/services/modules/price-time-machine.js +86 -86
  272. package/server/services/modules/protocol.js +104 -104
  273. package/server/services/negotiation.js +439 -439
  274. package/server/services/outreach-agent.js +312 -0
  275. package/server/services/plans.js +214 -214
  276. package/server/services/plugins.js +771 -771
  277. package/server/services/price-intelligence.js +566 -566
  278. package/server/services/price-shield.js +1137 -1137
  279. package/server/services/provider-clients.js +740 -740
  280. package/server/services/reputation.js +465 -465
  281. package/server/services/search-engine.js +357 -357
  282. package/server/services/security.js +513 -513
  283. package/server/services/self-healing.js +843 -843
  284. package/server/services/shieldlink.js +492 -0
  285. package/server/services/shieldqr.js +322 -322
  286. package/server/services/sovereign-shield.js +542 -542
  287. package/server/services/ssl-ct-monitor.js +224 -0
  288. package/server/services/ssl-inspector.js +42 -42
  289. package/server/services/ssl-monitor.js +167 -167
  290. package/server/services/stripe.js +206 -205
  291. package/server/services/swarm.js +788 -788
  292. package/server/services/transactions.js +525 -0
  293. package/server/services/universal-scraper.js +662 -662
  294. package/server/services/verification.js +481 -481
  295. package/server/services/vision.js +1163 -1163
  296. package/server/services/wab-crypto.js +178 -178
  297. package/server/utils/cache.js +125 -125
  298. package/server/utils/migrate.js +81 -81
  299. package/server/utils/safe-fetch.js +228 -228
  300. package/server/utils/secureFields.js +50 -50
  301. package/server/ws.js +161 -161
  302. package/templates/artisan-marketplace.yaml +104 -104
  303. package/templates/book-price-scout.yaml +98 -98
  304. package/templates/electronics-price-tracker.yaml +108 -108
  305. package/templates/flight-deal-hunter.yaml +113 -113
  306. package/templates/freelancer-direct.yaml +116 -116
  307. package/templates/grocery-price-compare.yaml +93 -93
  308. package/templates/hotel-direct-booking.yaml +113 -113
  309. package/templates/local-services.yaml +98 -98
  310. package/templates/olive-oil-tunisia.yaml +88 -88
  311. package/templates/organic-farm-fresh.yaml +101 -101
  312. package/templates/restaurant-direct.yaml +97 -97
  313. package/templates/ring4/banking-sovereign.yaml +55 -0
  314. package/templates/ring4/ecommerce-sovereign.yaml +58 -0
  315. package/templates/ring4/healthcare-sovereign.yaml +60 -0
package/public/docs.html CHANGED
@@ -1,588 +1,588 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Documentation — Web Agent Bridge</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}</style>
10
- <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
11
- <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"></noscript>
12
- <link rel="stylesheet" href="/css/styles.css?v=3.0.1">
13
- </head>
14
- <body>
15
-
16
- <!-- NAVBAR -->
17
- <nav class="navbar">
18
- <div class="container">
19
- <a href="/" class="navbar-brand">
20
- <div class="brand-icon">⚡</div>
21
- <span>WAB</span>
22
- </a>
23
- <ul class="navbar-links">
24
- <li><a href="/#features">Features</a></li>
25
- <li><a href="/#pricing">Pricing</a></li>
26
- <li><a href="/docs" style="color:var(--text-primary);">Docs</a></li>
27
- <li><a href="/whitepaper">Whitepaper</a></li>
28
- </ul>
29
- <div class="navbar-actions">
30
- <a href="/login" class="btn btn-ghost" data-wab-auth="guest">Sign In</a>
31
- <a href="/dashboard" class="btn btn-primary btn-sm" data-wab-auth="signed-in" style="display:none">Dashboard</a>
32
- <a href="/register" class="btn btn-primary btn-sm" data-wab-auth="guest">Get Started</a>
33
- </div>
34
- </div>
35
- </nav>
36
-
37
- <!-- DOCS LAYOUT -->
38
- <div class="container">
39
- <div class="docs-layout">
40
-
41
- <!-- Sidebar -->
42
- <aside class="docs-sidebar">
43
- <ul>
44
- <li><a href="#overview" class="active">Overview</a></li>
45
- <li><a href="#quick-start">Quick Start</a></li>
46
- <li><a href="#configuration">Configuration</a></li>
47
- <li><a href="#permissions">Permissions</a></li>
48
- <li><a href="#api-reference">API Reference</a></li>
49
- <li><a href="#actions">Actions</a></li>
50
- <li><a href="#events">Events</a></li>
51
- <li><a href="#agent-guide">Agent Integration Guide</a></li>
52
- <li><a href="#security">Security</a></li>
53
- <li><a href="#examples">Examples</a></li>
54
- <li><a href="#rest-api">REST API</a></li>
55
- <li><a href="#faq">FAQ</a></li>
56
- </ul>
57
- </aside>
58
-
59
- <!-- Content -->
60
- <div class="docs-content">
61
-
62
- <h2 id="overview">Overview</h2>
63
- <p>
64
- <strong>Web Agent Bridge (WAB)</strong> is an open-source middleware script that creates a standardized
65
- interface between AI agents and websites. Instead of forcing AI agents to parse and guess DOM structures,
66
- WAB provides a clean, documented command layer that agents can read and execute.
67
- </p>
68
- <p>
69
- When a website includes the WAB script, it exposes a <code>window.AICommands</code> object that describes
70
- all available actions, their parameters, and how to execute them. AI agents can discover these commands
71
- instantly and interact with the site accurately and securely.
72
- </p>
73
-
74
- <h3>Key Concepts</h3>
75
- <ul>
76
- <li><strong>Bridge Script</strong> — The client-side JavaScript file added to websites</li>
77
- <li><strong>Actions</strong> — Defined operations that AI agents can execute (click, fill, scroll, API call)</li>
78
- <li><strong>Permissions</strong> — Granular controls over what agents are allowed to do</li>
79
- <li><strong>License Key</strong> — Unique identifier that links a site to its WAB account</li>
80
- <li><strong>Auto-Discovery</strong> — Automatic detection of interactive elements on the page</li>
81
- </ul>
82
-
83
- <h2 id="quick-start">Quick Start</h2>
84
- <p>Get your website AI-ready in under 5 minutes.</p>
85
-
86
- <h3>Step 1: Create an Account</h3>
87
- <p>Sign up at <a href="/register">/register</a> and add your site from the dashboard. You'll receive a license key.</p>
88
-
89
- <h3>Step 2: Add the Script</h3>
90
- <p>Include this in your website's HTML:</p>
91
- <div class="code-block">
92
- <div class="code-header">
93
- <div class="code-dots"><span></span><span></span><span></span></div>
94
- <span class="code-lang">HTML</span>
95
- </div>
96
- <div class="code-body">
97
- <pre><code><span class="cm">&lt;!-- Web Agent Bridge Configuration --&gt;</span>
98
- &lt;script&gt;
99
- window.AIBridgeConfig = {
100
- <span class="prop">licenseKey</span>: <span class="str">"WAB-XXXXX-XXXXX-XXXXX-XXXXX"</span>,
101
- <span class="prop">agentPermissions</span>: {
102
- <span class="prop">readContent</span>: <span class="bool">true</span>,
103
- <span class="prop">click</span>: <span class="bool">true</span>,
104
- <span class="prop">fillForms</span>: <span class="bool">true</span>,
105
- <span class="prop">scroll</span>: <span class="bool">true</span>
106
- }
107
- };
108
- &lt;/script&gt;
109
- &lt;script src=<span class="str">"https://yourserver.com/script/ai-agent-bridge.js"</span>&gt;&lt;/script&gt;</code></pre>
110
- </div>
111
- </div>
112
-
113
- <h3>Step 3: Verify</h3>
114
- <p>Open your browser console and type <code>window.AICommands</code>. You should see the bridge object with discovered actions.</p>
115
-
116
- <h2 id="configuration">Configuration</h2>
117
- <p>The bridge is configured through the <code>window.AIBridgeConfig</code> object, which must be set before loading the script.</p>
118
-
119
- <div class="code-block">
120
- <div class="code-header">
121
- <div class="code-dots"><span></span><span></span><span></span></div>
122
- <span class="code-lang">JavaScript — Full Configuration</span>
123
- </div>
124
- <div class="code-body">
125
- <pre><code>window.AIBridgeConfig = {
126
- <span class="cm">// License key from your dashboard</span>
127
- <span class="prop">licenseKey</span>: <span class="str">"WAB-XXXXX-XXXXX-XXXXX-XXXXX"</span>,
128
-
129
- <span class="cm">// Subscription tier (verified server-side)</span>
130
- <span class="prop">subscriptionTier</span>: <span class="str">"free"</span>,
131
-
132
- <span class="cm">// What AI agents are allowed to do</span>
133
- <span class="prop">agentPermissions</span>: {
134
- <span class="prop">readContent</span>: <span class="bool">true</span>, <span class="cm">// Read page text</span>
135
- <span class="prop">click</span>: <span class="bool">true</span>, <span class="cm">// Click elements</span>
136
- <span class="prop">fillForms</span>: <span class="bool">false</span>, <span class="cm">// Fill and submit forms</span>
137
- <span class="prop">scroll</span>: <span class="bool">true</span>, <span class="cm">// Scroll the page</span>
138
- <span class="prop">navigate</span>: <span class="bool">false</span>, <span class="cm">// Navigate between pages</span>
139
- <span class="prop">apiAccess</span>: <span class="bool">false</span>, <span class="cm">// Call internal APIs (Pro+)</span>
140
- <span class="prop">automatedLogin</span>: <span class="bool">false</span>, <span class="cm">// Automated login (Starter+)</span>
141
- <span class="prop">extractData</span>: <span class="bool">false</span> <span class="cm">// Extract structured data (Pro+)</span>
142
- },
143
-
144
- <span class="cm">// Access restrictions</span>
145
- <span class="prop">restrictions</span>: {
146
- <span class="prop">allowedSelectors</span>: [], <span class="cm">// Empty = allow all</span>
147
- <span class="prop">blockedSelectors</span>: [<span class="str">".private"</span>, <span class="str">"[data-private]"</span>],
148
- <span class="prop">requireLoginForActions</span>: [<span class="str">"apiAccess"</span>],
149
- <span class="prop">rateLimit</span>: { <span class="prop">maxCallsPerMinute</span>: <span class="num">60</span> }
150
- },
151
-
152
- <span class="cm">// Activity logging</span>
153
- <span class="prop">logging</span>: {
154
- <span class="prop">enabled</span>: <span class="bool">false</span>,
155
- <span class="prop">level</span>: <span class="str">"basic"</span> <span class="cm">// "basic" or "detailed"</span>
156
- }
157
- };</code></pre>
158
- </div>
159
- </div>
160
-
161
- <h2 id="permissions">Permissions</h2>
162
- <p>Permissions control what AI agents can do on your site. Each permission can be independently toggled.</p>
163
-
164
- <table style="margin-bottom:24px;">
165
- <thead>
166
- <tr><th>Permission</th><th>Description</th><th>Min Tier</th></tr>
167
- </thead>
168
- <tbody>
169
- <tr><td><code>readContent</code></td><td>Read text content from page elements</td><td>Free</td></tr>
170
- <tr><td><code>click</code></td><td>Click buttons, links, and interactive elements</td><td>Free</td></tr>
171
- <tr><td><code>scroll</code></td><td>Scroll the page or to specific elements</td><td>Free</td></tr>
172
- <tr><td><code>fillForms</code></td><td>Fill form fields and submit forms</td><td>Free</td></tr>
173
- <tr><td><code>navigate</code></td><td>Navigate to different pages</td><td>Free</td></tr>
174
- <tr><td><code>automatedLogin</code></td><td>Perform automated login flows</td><td>Starter</td></tr>
175
- <tr><td><code>apiAccess</code></td><td>Call internal REST API endpoints</td><td>Pro</td></tr>
176
- <tr><td><code>extractData</code></td><td>Extract structured data from the page</td><td>Pro</td></tr>
177
- </tbody>
178
- </table>
179
-
180
- <h2 id="api-reference">API Reference</h2>
181
- <p>The <code>window.AICommands</code> object provides the following methods:</p>
182
-
183
- <h3><code>getActions(category?)</code></h3>
184
- <p>Returns an array of all available actions. Optionally filter by category.</p>
185
- <div class="code-block">
186
- <div class="code-header">
187
- <div class="code-dots"><span></span><span></span><span></span></div>
188
- <span class="code-lang">JavaScript</span>
189
- </div>
190
- <div class="code-body">
191
- <pre><code><span class="kw">const</span> allActions = window.AICommands.<span class="fn">getActions</span>();
192
- <span class="kw">const</span> navActions = window.AICommands.<span class="fn">getActions</span>(<span class="str">"navigation"</span>);
193
-
194
- <span class="cm">// Returns: [{ name, description, trigger, category, requiresAuth, params, fields }]</span></code></pre>
195
- </div>
196
- </div>
197
-
198
- <h3><code>execute(actionName, params?)</code></h3>
199
- <p>Execute a registered action. Returns a Promise with the result.</p>
200
- <div class="code-block">
201
- <div class="code-header">
202
- <div class="code-dots"><span></span><span></span><span></span></div>
203
- <span class="code-lang">JavaScript</span>
204
- </div>
205
- <div class="code-body">
206
- <pre><code><span class="kw">const</span> result = <span class="kw">await</span> window.AICommands.<span class="fn">execute</span>(<span class="str">"signup"</span>);
207
- <span class="cm">// → { success: true, action: "click", selector: "#signup-button" }</span>
208
-
209
- <span class="kw">const</span> formResult = <span class="kw">await</span> window.AICommands.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
210
- <span class="prop">name</span>: <span class="str">"Alice"</span>,
211
- <span class="prop">email</span>: <span class="str">"alice@example.com"</span>
212
- });
213
- <span class="cm">// → { success: true, results: [...] }</span></code></pre>
214
- </div>
215
- </div>
216
-
217
- <h3><code>readContent(selector)</code></h3>
218
- <p>Read text content from a DOM element.</p>
219
- <div class="code-block">
220
- <div class="code-header">
221
- <div class="code-dots"><span></span><span></span><span></span></div>
222
- <span class="code-lang">JavaScript</span>
223
- </div>
224
- <div class="code-body">
225
- <pre><code><span class="kw">const</span> content = window.AICommands.<span class="fn">readContent</span>(<span class="str">"h1.title"</span>);
226
- <span class="cm">// → { success: true, text: "Welcome!", html: "Welcome!", attributes: {...} }</span></code></pre>
227
- </div>
228
- </div>
229
-
230
- <h3><code>getPageInfo()</code></h3>
231
- <p>Get metadata about the current page and bridge state.</p>
232
- <div class="code-block">
233
- <div class="code-header">
234
- <div class="code-dots"><span></span><span></span><span></span></div>
235
- <span class="code-lang">JavaScript</span>
236
- </div>
237
- <div class="code-body">
238
- <pre><code><span class="kw">const</span> info = window.AICommands.<span class="fn">getPageInfo</span>();
239
- <span class="cm">// → { title, url, domain, lang, bridgeVersion, tier, permissions, actionsCount, rateLimitRemaining }</span></code></pre>
240
- </div>
241
- </div>
242
-
243
- <h3><code>waitForElement(selector, timeout?)</code></h3>
244
- <p>Wait for a DOM element to appear. Useful for SPAs and dynamically loaded content.</p>
245
- <div class="code-block">
246
- <div class="code-header">
247
- <div class="code-dots"><span></span><span></span><span></span></div>
248
- <span class="code-lang">JavaScript</span>
249
- </div>
250
- <div class="code-body">
251
- <pre><code><span class="kw">await</span> window.AICommands.<span class="fn">waitForElement</span>(<span class="str">".results-loaded"</span>, <span class="num">15000</span>);
252
- <span class="cm">// Resolves when the element appears, rejects on timeout</span></code></pre>
253
- </div>
254
- </div>
255
-
256
- <h3><code>registerAction(actionDef)</code></h3>
257
- <p>Register a custom action that AI agents can discover and execute.</p>
258
- <div class="code-block">
259
- <div class="code-header">
260
- <div class="code-dots"><span></span><span></span><span></span></div>
261
- <span class="code-lang">JavaScript</span>
262
- </div>
263
- <div class="code-body">
264
- <pre><code>window.AICommands.<span class="fn">registerAction</span>({
265
- <span class="prop">name</span>: <span class="str">"addToCart"</span>,
266
- <span class="prop">description</span>: <span class="str">"Add the current product to cart"</span>,
267
- <span class="prop">trigger</span>: <span class="str">"click"</span>,
268
- <span class="prop">selector</span>: <span class="str">"#add-to-cart-btn"</span>,
269
- <span class="prop">category</span>: <span class="str">"e-commerce"</span>,
270
- <span class="prop">metadata</span>: { <span class="prop">requiresProduct</span>: <span class="bool">true</span> }
271
- });</code></pre>
272
- </div>
273
- </div>
274
-
275
- <h3><code>authenticate(agentKey, agentMeta?)</code></h3>
276
- <p>Authenticate an AI agent to access restricted actions.</p>
277
-
278
- <h3><code>refresh()</code></h3>
279
- <p>Re-scan the page and rebuild the action registry. Call this after significant DOM changes.</p>
280
-
281
- <h3><code>onReady(callback)</code></h3>
282
- <p>Register a callback for when the bridge finishes initialization.</p>
283
-
284
- <h2 id="actions">Actions</h2>
285
- <p>Actions are the core building blocks of WAB. Each action has:</p>
286
- <ul>
287
- <li><code>name</code> — Unique identifier</li>
288
- <li><code>description</code> — Human/AI readable description</li>
289
- <li><code>trigger</code> — Type of action: <code>click</code>, <code>fill_and_submit</code>, <code>scroll</code>, <code>api</code></li>
290
- <li><code>selector</code> — CSS selector of the target element</li>
291
- <li><code>fields</code> — Array of form fields (for fill_and_submit actions)</li>
292
- <li><code>category</code> — Grouping label</li>
293
- <li><code>requiresAuth</code> — Whether agent authentication is needed</li>
294
- </ul>
295
-
296
- <h3>Action Types</h3>
297
- <table style="margin-bottom:24px;">
298
- <thead>
299
- <tr><th>Trigger</th><th>Description</th><th>Permission</th></tr>
300
- </thead>
301
- <tbody>
302
- <tr><td><code>click</code></td><td>Click on an element</td><td>click</td></tr>
303
- <tr><td><code>fill_and_submit</code></td><td>Fill form fields and submit</td><td>fillForms</td></tr>
304
- <tr><td><code>scroll</code></td><td>Scroll to an element or direction</td><td>scroll</td></tr>
305
- <tr><td><code>api</code></td><td>Call an internal API endpoint</td><td>apiAccess</td></tr>
306
- </tbody>
307
- </table>
308
-
309
- <h2 id="events">Events</h2>
310
- <p>Subscribe to bridge events for monitoring and integration:</p>
311
- <div class="code-block">
312
- <div class="code-header">
313
- <div class="code-dots"><span></span><span></span><span></span></div>
314
- <span class="code-lang">JavaScript</span>
315
- </div>
316
- <div class="code-body">
317
- <pre><code><span class="kw">const</span> bridge = window.AICommands;
318
-
319
- bridge.events.<span class="fn">on</span>(<span class="str">'ready'</span>, (data) =&gt; {
320
- console.<span class="fn">log</span>(<span class="str">'Bridge ready'</span>, data.version);
321
- });
322
-
323
- bridge.events.<span class="fn">on</span>(<span class="str">'action:before'</span>, ({ action, params }) =&gt; {
324
- console.<span class="fn">log</span>(<span class="str">`Executing: ${action}`</span>);
325
- });
326
-
327
- bridge.events.<span class="fn">on</span>(<span class="str">'action:after'</span>, ({ action, result }) =&gt; {
328
- console.<span class="fn">log</span>(<span class="str">`Result: ${result.success}`</span>);
329
- });
330
-
331
- bridge.events.<span class="fn">on</span>(<span class="str">'error'</span>, (err) =&gt; {
332
- console.<span class="fn">error</span>(<span class="str">'Bridge error'</span>, err);
333
- });</code></pre>
334
- </div>
335
- </div>
336
-
337
- <p>Available events: <code>ready</code>, <code>action:before</code>, <code>action:after</code>, <code>action:registered</code>, <code>action:unregistered</code>, <code>agent:authenticate</code>, <code>error</code>, <code>refresh</code>, <code>destroy</code></p>
338
-
339
- <h2 id="agent-guide">Agent Integration Guide</h2>
340
- <p>If you're building an AI agent that interacts with websites, here's how to use WAB.</p>
341
-
342
- <h3>Detecting WAB</h3>
343
- <div class="code-block">
344
- <div class="code-header">
345
- <div class="code-dots"><span></span><span></span><span></span></div>
346
- <span class="code-lang">JavaScript — Agent Side</span>
347
- </div>
348
- <div class="code-body">
349
- <pre><code><span class="cm">// Check if the site supports WAB</span>
350
- <span class="kw">if</span> (window.AICommands) {
351
- <span class="kw">const</span> info = window.AICommands.<span class="fn">getPageInfo</span>();
352
- console.<span class="fn">log</span>(<span class="str">`WAB v${info.bridgeVersion} detected`</span>);
353
- console.<span class="fn">log</span>(<span class="str">`${info.actionsCount} actions available`</span>);
354
- console.<span class="fn">log</span>(<span class="str">`Tier: ${info.tier}`</span>);
355
- } <span class="kw">else</span> {
356
- console.<span class="fn">log</span>(<span class="str">'No WAB support — fall back to DOM parsing'</span>);
357
- }</code></pre>
358
- </div>
359
- </div>
360
-
361
- <h3>Discovering and Executing Actions</h3>
362
- <div class="code-block">
363
- <div class="code-header">
364
- <div class="code-dots"><span></span><span></span><span></span></div>
365
- <span class="code-lang">JavaScript — Full Agent Workflow</span>
366
- </div>
367
- <div class="code-body">
368
- <pre><code><span class="kw">async function</span> <span class="fn">agentWorkflow</span>() {
369
- <span class="kw">const</span> bridge = window.AICommands;
370
-
371
- <span class="cm">// 1. Authenticate (if needed)</span>
372
- bridge.<span class="fn">authenticate</span>(<span class="str">"agent-key-123"</span>, {
373
- <span class="prop">name</span>: <span class="str">"MyAssistant"</span>,
374
- <span class="prop">version</span>: <span class="str">"2.0"</span>
375
- });
376
-
377
- <span class="cm">// 2. Discover available actions</span>
378
- <span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
379
-
380
- <span class="cm">// 3. Find the action we need</span>
381
- <span class="kw">const</span> loginAction = actions.<span class="fn">find</span>(a =&gt; a.name.<span class="fn">includes</span>(<span class="str">'login'</span>));
382
-
383
- <span class="cm">// 4. Execute it</span>
384
- <span class="kw">if</span> (loginAction) {
385
- <span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(loginAction.name, {
386
- <span class="prop">email</span>: <span class="str">"user@example.com"</span>,
387
- <span class="prop">password</span>: <span class="str">"secure-password"</span>
388
- });
389
- console.<span class="fn">log</span>(result);
390
- }
391
-
392
- <span class="cm">// 5. Wait for navigation</span>
393
- <span class="kw">await</span> bridge.<span class="fn">waitForNavigation</span>();
394
-
395
- <span class="cm">// 6. Refresh actions for new page</span>
396
- bridge.<span class="fn">refresh</span>();
397
- }</code></pre>
398
- </div>
399
- </div>
400
-
401
- <h2 id="security">Security</h2>
402
- <p>WAB is built with security as a first-class concern:</p>
403
- <ul>
404
- <li><strong>Permission-based access</strong> — Site owners control exactly what agents can do</li>
405
- <li><strong>Selector restrictions</strong> — Block sensitive areas of the page from agent interaction</li>
406
- <li><strong>Rate limiting</strong> — Built-in protection against abuse</li>
407
- <li><strong>Server-side license verification</strong> — Tier permissions are verified by the licensing server</li>
408
- <li><strong>Agent authentication</strong> — Optional agent identity verification</li>
409
- <li><strong>Opt-in only</strong> — Sites must explicitly add the script; users can disable via extensions</li>
410
- </ul>
411
-
412
- <h3>Best Practices</h3>
413
- <ol>
414
- <li>Always use <code>blockedSelectors</code> to protect sensitive areas (forms with credit cards, admin panels)</li>
415
- <li>Start with minimal permissions and expand as needed</li>
416
- <li>Enable logging to monitor agent behavior</li>
417
- <li>Use the <code>requireLoginForActions</code> restriction for sensitive operations</li>
418
- <li>Keep your license key confidential</li>
419
- </ol>
420
-
421
- <h2 id="examples">Examples</h2>
422
-
423
- <h3>E-commerce Site</h3>
424
- <div class="code-block">
425
- <div class="code-header">
426
- <div class="code-dots"><span></span><span></span><span></span></div>
427
- <span class="code-lang">JavaScript</span>
428
- </div>
429
- <div class="code-body">
430
- <pre><code>window.AIBridgeConfig = {
431
- <span class="prop">licenseKey</span>: <span class="str">"WAB-SHOP-XXXXX-XXXXX"</span>,
432
- <span class="prop">agentPermissions</span>: {
433
- <span class="prop">readContent</span>: <span class="bool">true</span>,
434
- <span class="prop">click</span>: <span class="bool">true</span>,
435
- <span class="prop">fillForms</span>: <span class="bool">true</span>,
436
- <span class="prop">scroll</span>: <span class="bool">true</span>
437
- },
438
- <span class="prop">restrictions</span>: {
439
- <span class="prop">blockedSelectors</span>: [<span class="str">"#checkout-payment"</span>, <span class="str">".credit-card-form"</span>],
440
- <span class="prop">rateLimit</span>: { <span class="prop">maxCallsPerMinute</span>: <span class="num">30</span> }
441
- }
442
- };
443
-
444
- <span class="cm">// After the bridge loads, add custom actions</span>
445
- document.<span class="fn">addEventListener</span>(<span class="str">'wab:ready'</span>, () =&gt; {
446
- window.AICommands.<span class="fn">registerAction</span>({
447
- <span class="prop">name</span>: <span class="str">"searchProducts"</span>,
448
- <span class="prop">description</span>: <span class="str">"Search for products by keyword"</span>,
449
- <span class="prop">trigger</span>: <span class="str">"fill_and_submit"</span>,
450
- <span class="prop">fields</span>: [{ <span class="prop">name</span>: <span class="str">"query"</span>, <span class="prop">selector</span>: <span class="str">"#search-input"</span>, <span class="prop">type</span>: <span class="str">"text"</span> }],
451
- <span class="prop">submitSelector</span>: <span class="str">"#search-btn"</span>,
452
- <span class="prop">category</span>: <span class="str">"search"</span>
453
- });
454
- });</code></pre>
455
- </div>
456
- </div>
457
-
458
- <h3>SaaS Dashboard</h3>
459
- <div class="code-block">
460
- <div class="code-header">
461
- <div class="code-dots"><span></span><span></span><span></span></div>
462
- <span class="code-lang">JavaScript</span>
463
- </div>
464
- <div class="code-body">
465
- <pre><code>window.AIBridgeConfig = {
466
- <span class="prop">licenseKey</span>: <span class="str">"WAB-SAAS-XXXXX-XXXXX"</span>,
467
- <span class="prop">subscriptionTier</span>: <span class="str">"pro"</span>,
468
- <span class="prop">agentPermissions</span>: {
469
- <span class="prop">readContent</span>: <span class="bool">true</span>,
470
- <span class="prop">click</span>: <span class="bool">true</span>,
471
- <span class="prop">fillForms</span>: <span class="bool">true</span>,
472
- <span class="prop">apiAccess</span>: <span class="bool">true</span>,
473
- <span class="prop">extractData</span>: <span class="bool">true</span>
474
- }
475
- };
476
-
477
- document.<span class="fn">addEventListener</span>(<span class="str">'wab:ready'</span>, () =&gt; {
478
- <span class="cm">// Custom API action</span>
479
- window.AICommands.<span class="fn">registerAction</span>({
480
- <span class="prop">name</span>: <span class="str">"getAnalytics"</span>,
481
- <span class="prop">description</span>: <span class="str">"Fetch analytics data for the current period"</span>,
482
- <span class="prop">trigger</span>: <span class="str">"api"</span>,
483
- <span class="prop">endpoint</span>: <span class="str">"/api/analytics/current"</span>,
484
- <span class="prop">method</span>: <span class="str">"GET"</span>,
485
- <span class="prop">requiresAuth</span>: <span class="bool">true</span>,
486
- <span class="prop">category</span>: <span class="str">"data"</span>
487
- });
488
-
489
- <span class="cm">// Custom handler action</span>
490
- window.AICommands.<span class="fn">registerAction</span>({
491
- <span class="prop">name</span>: <span class="str">"exportReport"</span>,
492
- <span class="prop">description</span>: <span class="str">"Generate and download a PDF report"</span>,
493
- <span class="prop">trigger</span>: <span class="str">"click"</span>,
494
- <span class="prop">category</span>: <span class="str">"export"</span>,
495
- <span class="prop">handler</span>: <span class="kw">async</span> () =&gt; {
496
- <span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="str">'/api/report/generate'</span>);
497
- <span class="kw">const</span> blob = <span class="kw">await</span> res.<span class="fn">blob</span>();
498
- <span class="cm">// trigger download...</span>
499
- <span class="kw">return</span> { <span class="prop">success</span>: <span class="bool">true</span>, <span class="prop">message</span>: <span class="str">"Report downloaded"</span> };
500
- }
501
- });
502
- });</code></pre>
503
- </div>
504
- </div>
505
-
506
- <h2 id="rest-api">REST API</h2>
507
- <p>The WAB server provides a REST API for managing sites, licenses, and analytics.</p>
508
-
509
- <h3>Authentication</h3>
510
- <table style="margin-bottom:16px;">
511
- <thead><tr><th>Endpoint</th><th>Method</th><th>Description</th></tr></thead>
512
- <tbody>
513
- <tr><td><code>POST /api/auth/register</code></td><td>POST</td><td>Create a new account</td></tr>
514
- <tr><td><code>POST /api/auth/login</code></td><td>POST</td><td>Sign in and receive JWT token</td></tr>
515
- <tr><td><code>GET /api/auth/me</code></td><td>GET</td><td>Get current user info</td></tr>
516
- </tbody>
517
- </table>
518
-
519
- <h3>Sites</h3>
520
- <table style="margin-bottom:16px;">
521
- <thead><tr><th>Endpoint</th><th>Method</th><th>Description</th></tr></thead>
522
- <tbody>
523
- <tr><td><code>GET /api/sites</code></td><td>GET</td><td>List all your sites</td></tr>
524
- <tr><td><code>POST /api/sites</code></td><td>POST</td><td>Add a new site</td></tr>
525
- <tr><td><code>GET /api/sites/:id</code></td><td>GET</td><td>Get site details</td></tr>
526
- <tr><td><code>PUT /api/sites/:id/config</code></td><td>PUT</td><td>Update site configuration</td></tr>
527
- <tr><td><code>PUT /api/sites/:id/tier</code></td><td>PUT</td><td>Change subscription tier</td></tr>
528
- <tr><td><code>DELETE /api/sites/:id</code></td><td>DELETE</td><td>Delete a site</td></tr>
529
- <tr><td><code>GET /api/sites/:id/snippet</code></td><td>GET</td><td>Get install snippet</td></tr>
530
- <tr><td><code>GET /api/sites/:id/analytics</code></td><td>GET</td><td>Get analytics data</td></tr>
531
- </tbody>
532
- </table>
533
-
534
- <h3>License</h3>
535
- <table style="margin-bottom:16px;">
536
- <thead><tr><th>Endpoint</th><th>Method</th><th>Description</th></tr></thead>
537
- <tbody>
538
- <tr><td><code>POST /api/license/verify</code></td><td>POST</td><td>Verify a license key for a domain</td></tr>
539
- <tr><td><code>POST /api/license/track</code></td><td>POST</td><td>Record an analytics event</td></tr>
540
- </tbody>
541
- </table>
542
-
543
- <h2 id="faq">FAQ</h2>
544
-
545
- <h3>Is WAB free to use?</h3>
546
- <p>The core script is open source and free forever. Advanced features like API access, detailed analytics, and automated login require a paid subscription.</p>
547
-
548
- <h3>Does WAB work with all AI agents?</h3>
549
- <p>WAB works with any agent that can execute JavaScript in a browser context — including Selenium, Puppeteer, Playwright, browser extensions, and AI tools like OpenAI's Operator or Anthropic's Computer Use.</p>
550
-
551
- <h3>What if my site is a SPA?</h3>
552
- <p>Call <code>bridge.refresh()</code> after navigation events to re-scan for new elements. The <code>waitForElement()</code> method helps agents wait for dynamically loaded content.</p>
553
-
554
- <h3>Can I use WAB without the licensing server?</h3>
555
- <p>Yes. Without a license key, WAB runs in free-tier mode with all basic permissions. The licensing server only validates premium features.</p>
556
-
557
- </div>
558
- </div>
559
- </div>
560
-
561
- <!-- FOOTER -->
562
- <footer class="footer" style="margin-top:48px;">
563
- <div class="container">
564
- <div class="footer-bottom" style="border-top:none; padding-top:0;">
565
- <span>&copy; 2026 Web Agent Bridge. MIT License.</span>
566
- <a href="/" class="btn btn-ghost btn-sm">Back to Home</a>
567
- </div>
568
- </div>
569
- </footer>
570
-
571
- <script src="/js/auth-nav.js?v=3.0.1"></script>
572
- <script>
573
- const links = document.querySelectorAll('.docs-sidebar a');
574
- const observer = new IntersectionObserver((entries) => {
575
- entries.forEach(entry => {
576
- if (entry.isIntersecting) {
577
- links.forEach(l => l.classList.remove('active'));
578
- const match = document.querySelector(`.docs-sidebar a[href="#${entry.target.id}"]`);
579
- if (match) match.classList.add('active');
580
- }
581
- });
582
- }, { rootMargin: '-80px 0px -70% 0px' });
583
-
584
- document.querySelectorAll('.docs-content h2[id]').forEach(h => observer.observe(h));
585
- </script>
586
- <script src="/js/cookie-consent.js?v=3.0.1"></script>
587
- </body>
588
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Documentation — Web Agent Bridge</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}</style>
10
+ <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
11
+ <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"></noscript>
12
+ <link rel="stylesheet" href="/css/styles.css?v=3.0.1">
13
+ </head>
14
+ <body>
15
+
16
+ <!-- NAVBAR -->
17
+ <nav class="navbar">
18
+ <div class="container">
19
+ <a href="/" class="navbar-brand">
20
+ <div class="brand-icon">⚡</div>
21
+ <span>WAB</span>
22
+ </a>
23
+ <ul class="navbar-links">
24
+ <li><a href="/#features">Features</a></li>
25
+ <li><a href="/#pricing">Pricing</a></li>
26
+ <li><a href="/docs" style="color:var(--text-primary);">Docs</a></li>
27
+ <li><a href="/whitepaper">Whitepaper</a></li>
28
+ </ul>
29
+ <div class="navbar-actions">
30
+ <a href="/login" class="btn btn-ghost" data-wab-auth="guest">Sign In</a>
31
+ <a href="/dashboard" class="btn btn-primary btn-sm" data-wab-auth="signed-in" style="display:none">Dashboard</a>
32
+ <a href="/register" class="btn btn-primary btn-sm" data-wab-auth="guest">Get Started</a>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <!-- DOCS LAYOUT -->
38
+ <div class="container">
39
+ <div class="docs-layout">
40
+
41
+ <!-- Sidebar -->
42
+ <aside class="docs-sidebar">
43
+ <ul>
44
+ <li><a href="#overview" class="active">Overview</a></li>
45
+ <li><a href="#quick-start">Quick Start</a></li>
46
+ <li><a href="#configuration">Configuration</a></li>
47
+ <li><a href="#permissions">Permissions</a></li>
48
+ <li><a href="#api-reference">API Reference</a></li>
49
+ <li><a href="#actions">Actions</a></li>
50
+ <li><a href="#events">Events</a></li>
51
+ <li><a href="#agent-guide">Agent Integration Guide</a></li>
52
+ <li><a href="#security">Security</a></li>
53
+ <li><a href="#examples">Examples</a></li>
54
+ <li><a href="#rest-api">REST API</a></li>
55
+ <li><a href="#faq">FAQ</a></li>
56
+ </ul>
57
+ </aside>
58
+
59
+ <!-- Content -->
60
+ <div class="docs-content">
61
+
62
+ <h2 id="overview">Overview</h2>
63
+ <p>
64
+ <strong>Web Agent Bridge (WAB)</strong> is an open-source middleware script that creates a standardized
65
+ interface between AI agents and websites. Instead of forcing AI agents to parse and guess DOM structures,
66
+ WAB provides a clean, documented command layer that agents can read and execute.
67
+ </p>
68
+ <p>
69
+ When a website includes the WAB script, it exposes a <code>window.AICommands</code> object that describes
70
+ all available actions, their parameters, and how to execute them. AI agents can discover these commands
71
+ instantly and interact with the site accurately and securely.
72
+ </p>
73
+
74
+ <h3>Key Concepts</h3>
75
+ <ul>
76
+ <li><strong>Bridge Script</strong> — The client-side JavaScript file added to websites</li>
77
+ <li><strong>Actions</strong> — Defined operations that AI agents can execute (click, fill, scroll, API call)</li>
78
+ <li><strong>Permissions</strong> — Granular controls over what agents are allowed to do</li>
79
+ <li><strong>License Key</strong> — Unique identifier that links a site to its WAB account</li>
80
+ <li><strong>Auto-Discovery</strong> — Automatic detection of interactive elements on the page</li>
81
+ </ul>
82
+
83
+ <h2 id="quick-start">Quick Start</h2>
84
+ <p>Get your website AI-ready in under 5 minutes.</p>
85
+
86
+ <h3>Step 1: Create an Account</h3>
87
+ <p>Sign up at <a href="/register">/register</a> and add your site from the dashboard. You'll receive a license key.</p>
88
+
89
+ <h3>Step 2: Add the Script</h3>
90
+ <p>Include this in your website's HTML:</p>
91
+ <div class="code-block">
92
+ <div class="code-header">
93
+ <div class="code-dots"><span></span><span></span><span></span></div>
94
+ <span class="code-lang">HTML</span>
95
+ </div>
96
+ <div class="code-body">
97
+ <pre><code><span class="cm">&lt;!-- Web Agent Bridge Configuration --&gt;</span>
98
+ &lt;script&gt;
99
+ window.AIBridgeConfig = {
100
+ <span class="prop">licenseKey</span>: <span class="str">"WAB-XXXXX-XXXXX-XXXXX-XXXXX"</span>,
101
+ <span class="prop">agentPermissions</span>: {
102
+ <span class="prop">readContent</span>: <span class="bool">true</span>,
103
+ <span class="prop">click</span>: <span class="bool">true</span>,
104
+ <span class="prop">fillForms</span>: <span class="bool">true</span>,
105
+ <span class="prop">scroll</span>: <span class="bool">true</span>
106
+ }
107
+ };
108
+ &lt;/script&gt;
109
+ &lt;script src=<span class="str">"https://yourserver.com/script/ai-agent-bridge.js"</span>&gt;&lt;/script&gt;</code></pre>
110
+ </div>
111
+ </div>
112
+
113
+ <h3>Step 3: Verify</h3>
114
+ <p>Open your browser console and type <code>window.AICommands</code>. You should see the bridge object with discovered actions.</p>
115
+
116
+ <h2 id="configuration">Configuration</h2>
117
+ <p>The bridge is configured through the <code>window.AIBridgeConfig</code> object, which must be set before loading the script.</p>
118
+
119
+ <div class="code-block">
120
+ <div class="code-header">
121
+ <div class="code-dots"><span></span><span></span><span></span></div>
122
+ <span class="code-lang">JavaScript — Full Configuration</span>
123
+ </div>
124
+ <div class="code-body">
125
+ <pre><code>window.AIBridgeConfig = {
126
+ <span class="cm">// License key from your dashboard</span>
127
+ <span class="prop">licenseKey</span>: <span class="str">"WAB-XXXXX-XXXXX-XXXXX-XXXXX"</span>,
128
+
129
+ <span class="cm">// Subscription tier (verified server-side)</span>
130
+ <span class="prop">subscriptionTier</span>: <span class="str">"free"</span>,
131
+
132
+ <span class="cm">// What AI agents are allowed to do</span>
133
+ <span class="prop">agentPermissions</span>: {
134
+ <span class="prop">readContent</span>: <span class="bool">true</span>, <span class="cm">// Read page text</span>
135
+ <span class="prop">click</span>: <span class="bool">true</span>, <span class="cm">// Click elements</span>
136
+ <span class="prop">fillForms</span>: <span class="bool">false</span>, <span class="cm">// Fill and submit forms</span>
137
+ <span class="prop">scroll</span>: <span class="bool">true</span>, <span class="cm">// Scroll the page</span>
138
+ <span class="prop">navigate</span>: <span class="bool">false</span>, <span class="cm">// Navigate between pages</span>
139
+ <span class="prop">apiAccess</span>: <span class="bool">false</span>, <span class="cm">// Call internal APIs (Pro+)</span>
140
+ <span class="prop">automatedLogin</span>: <span class="bool">false</span>, <span class="cm">// Automated login (Pro+)</span>
141
+ <span class="prop">extractData</span>: <span class="bool">false</span> <span class="cm">// Extract structured data (Pro+)</span>
142
+ },
143
+
144
+ <span class="cm">// Access restrictions</span>
145
+ <span class="prop">restrictions</span>: {
146
+ <span class="prop">allowedSelectors</span>: [], <span class="cm">// Empty = allow all</span>
147
+ <span class="prop">blockedSelectors</span>: [<span class="str">".private"</span>, <span class="str">"[data-private]"</span>],
148
+ <span class="prop">requireLoginForActions</span>: [<span class="str">"apiAccess"</span>],
149
+ <span class="prop">rateLimit</span>: { <span class="prop">maxCallsPerMinute</span>: <span class="num">60</span> }
150
+ },
151
+
152
+ <span class="cm">// Activity logging</span>
153
+ <span class="prop">logging</span>: {
154
+ <span class="prop">enabled</span>: <span class="bool">false</span>,
155
+ <span class="prop">level</span>: <span class="str">"basic"</span> <span class="cm">// "basic" or "detailed"</span>
156
+ }
157
+ };</code></pre>
158
+ </div>
159
+ </div>
160
+
161
+ <h2 id="permissions">Permissions</h2>
162
+ <p>Permissions control what AI agents can do on your site. Each permission can be independently toggled.</p>
163
+
164
+ <table style="margin-bottom:24px;">
165
+ <thead>
166
+ <tr><th>Permission</th><th>Description</th><th>Min Tier</th></tr>
167
+ </thead>
168
+ <tbody>
169
+ <tr><td><code>readContent</code></td><td>Read text content from page elements</td><td>Free</td></tr>
170
+ <tr><td><code>click</code></td><td>Click buttons, links, and interactive elements</td><td>Free</td></tr>
171
+ <tr><td><code>scroll</code></td><td>Scroll the page or to specific elements</td><td>Free</td></tr>
172
+ <tr><td><code>fillForms</code></td><td>Fill form fields and submit forms</td><td>Free</td></tr>
173
+ <tr><td><code>navigate</code></td><td>Navigate to different pages</td><td>Free</td></tr>
174
+ <tr><td><code>automatedLogin</code></td><td>Perform automated login flows</td><td>Pro</td></tr>
175
+ <tr><td><code>apiAccess</code></td><td>Call internal REST API endpoints</td><td>Pro</td></tr>
176
+ <tr><td><code>extractData</code></td><td>Extract structured data from the page</td><td>Pro</td></tr>
177
+ </tbody>
178
+ </table>
179
+
180
+ <h2 id="api-reference">API Reference</h2>
181
+ <p>The <code>window.AICommands</code> object provides the following methods:</p>
182
+
183
+ <h3><code>getActions(category?)</code></h3>
184
+ <p>Returns an array of all available actions. Optionally filter by category.</p>
185
+ <div class="code-block">
186
+ <div class="code-header">
187
+ <div class="code-dots"><span></span><span></span><span></span></div>
188
+ <span class="code-lang">JavaScript</span>
189
+ </div>
190
+ <div class="code-body">
191
+ <pre><code><span class="kw">const</span> allActions = window.AICommands.<span class="fn">getActions</span>();
192
+ <span class="kw">const</span> navActions = window.AICommands.<span class="fn">getActions</span>(<span class="str">"navigation"</span>);
193
+
194
+ <span class="cm">// Returns: [{ name, description, trigger, category, requiresAuth, params, fields }]</span></code></pre>
195
+ </div>
196
+ </div>
197
+
198
+ <h3><code>execute(actionName, params?)</code></h3>
199
+ <p>Execute a registered action. Returns a Promise with the result.</p>
200
+ <div class="code-block">
201
+ <div class="code-header">
202
+ <div class="code-dots"><span></span><span></span><span></span></div>
203
+ <span class="code-lang">JavaScript</span>
204
+ </div>
205
+ <div class="code-body">
206
+ <pre><code><span class="kw">const</span> result = <span class="kw">await</span> window.AICommands.<span class="fn">execute</span>(<span class="str">"signup"</span>);
207
+ <span class="cm">// → { success: true, action: "click", selector: "#signup-button" }</span>
208
+
209
+ <span class="kw">const</span> formResult = <span class="kw">await</span> window.AICommands.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
210
+ <span class="prop">name</span>: <span class="str">"Alice"</span>,
211
+ <span class="prop">email</span>: <span class="str">"alice@example.com"</span>
212
+ });
213
+ <span class="cm">// → { success: true, results: [...] }</span></code></pre>
214
+ </div>
215
+ </div>
216
+
217
+ <h3><code>readContent(selector)</code></h3>
218
+ <p>Read text content from a DOM element.</p>
219
+ <div class="code-block">
220
+ <div class="code-header">
221
+ <div class="code-dots"><span></span><span></span><span></span></div>
222
+ <span class="code-lang">JavaScript</span>
223
+ </div>
224
+ <div class="code-body">
225
+ <pre><code><span class="kw">const</span> content = window.AICommands.<span class="fn">readContent</span>(<span class="str">"h1.title"</span>);
226
+ <span class="cm">// → { success: true, text: "Welcome!", html: "Welcome!", attributes: {...} }</span></code></pre>
227
+ </div>
228
+ </div>
229
+
230
+ <h3><code>getPageInfo()</code></h3>
231
+ <p>Get metadata about the current page and bridge state.</p>
232
+ <div class="code-block">
233
+ <div class="code-header">
234
+ <div class="code-dots"><span></span><span></span><span></span></div>
235
+ <span class="code-lang">JavaScript</span>
236
+ </div>
237
+ <div class="code-body">
238
+ <pre><code><span class="kw">const</span> info = window.AICommands.<span class="fn">getPageInfo</span>();
239
+ <span class="cm">// → { title, url, domain, lang, bridgeVersion, tier, permissions, actionsCount, rateLimitRemaining }</span></code></pre>
240
+ </div>
241
+ </div>
242
+
243
+ <h3><code>waitForElement(selector, timeout?)</code></h3>
244
+ <p>Wait for a DOM element to appear. Useful for SPAs and dynamically loaded content.</p>
245
+ <div class="code-block">
246
+ <div class="code-header">
247
+ <div class="code-dots"><span></span><span></span><span></span></div>
248
+ <span class="code-lang">JavaScript</span>
249
+ </div>
250
+ <div class="code-body">
251
+ <pre><code><span class="kw">await</span> window.AICommands.<span class="fn">waitForElement</span>(<span class="str">".results-loaded"</span>, <span class="num">15000</span>);
252
+ <span class="cm">// Resolves when the element appears, rejects on timeout</span></code></pre>
253
+ </div>
254
+ </div>
255
+
256
+ <h3><code>registerAction(actionDef)</code></h3>
257
+ <p>Register a custom action that AI agents can discover and execute.</p>
258
+ <div class="code-block">
259
+ <div class="code-header">
260
+ <div class="code-dots"><span></span><span></span><span></span></div>
261
+ <span class="code-lang">JavaScript</span>
262
+ </div>
263
+ <div class="code-body">
264
+ <pre><code>window.AICommands.<span class="fn">registerAction</span>({
265
+ <span class="prop">name</span>: <span class="str">"addToCart"</span>,
266
+ <span class="prop">description</span>: <span class="str">"Add the current product to cart"</span>,
267
+ <span class="prop">trigger</span>: <span class="str">"click"</span>,
268
+ <span class="prop">selector</span>: <span class="str">"#add-to-cart-btn"</span>,
269
+ <span class="prop">category</span>: <span class="str">"e-commerce"</span>,
270
+ <span class="prop">metadata</span>: { <span class="prop">requiresProduct</span>: <span class="bool">true</span> }
271
+ });</code></pre>
272
+ </div>
273
+ </div>
274
+
275
+ <h3><code>authenticate(agentKey, agentMeta?)</code></h3>
276
+ <p>Authenticate an AI agent to access restricted actions.</p>
277
+
278
+ <h3><code>refresh()</code></h3>
279
+ <p>Re-scan the page and rebuild the action registry. Call this after significant DOM changes.</p>
280
+
281
+ <h3><code>onReady(callback)</code></h3>
282
+ <p>Register a callback for when the bridge finishes initialization.</p>
283
+
284
+ <h2 id="actions">Actions</h2>
285
+ <p>Actions are the core building blocks of WAB. Each action has:</p>
286
+ <ul>
287
+ <li><code>name</code> — Unique identifier</li>
288
+ <li><code>description</code> — Human/AI readable description</li>
289
+ <li><code>trigger</code> — Type of action: <code>click</code>, <code>fill_and_submit</code>, <code>scroll</code>, <code>api</code></li>
290
+ <li><code>selector</code> — CSS selector of the target element</li>
291
+ <li><code>fields</code> — Array of form fields (for fill_and_submit actions)</li>
292
+ <li><code>category</code> — Grouping label</li>
293
+ <li><code>requiresAuth</code> — Whether agent authentication is needed</li>
294
+ </ul>
295
+
296
+ <h3>Action Types</h3>
297
+ <table style="margin-bottom:24px;">
298
+ <thead>
299
+ <tr><th>Trigger</th><th>Description</th><th>Permission</th></tr>
300
+ </thead>
301
+ <tbody>
302
+ <tr><td><code>click</code></td><td>Click on an element</td><td>click</td></tr>
303
+ <tr><td><code>fill_and_submit</code></td><td>Fill form fields and submit</td><td>fillForms</td></tr>
304
+ <tr><td><code>scroll</code></td><td>Scroll to an element or direction</td><td>scroll</td></tr>
305
+ <tr><td><code>api</code></td><td>Call an internal API endpoint</td><td>apiAccess</td></tr>
306
+ </tbody>
307
+ </table>
308
+
309
+ <h2 id="events">Events</h2>
310
+ <p>Subscribe to bridge events for monitoring and integration:</p>
311
+ <div class="code-block">
312
+ <div class="code-header">
313
+ <div class="code-dots"><span></span><span></span><span></span></div>
314
+ <span class="code-lang">JavaScript</span>
315
+ </div>
316
+ <div class="code-body">
317
+ <pre><code><span class="kw">const</span> bridge = window.AICommands;
318
+
319
+ bridge.events.<span class="fn">on</span>(<span class="str">'ready'</span>, (data) =&gt; {
320
+ console.<span class="fn">log</span>(<span class="str">'Bridge ready'</span>, data.version);
321
+ });
322
+
323
+ bridge.events.<span class="fn">on</span>(<span class="str">'action:before'</span>, ({ action, params }) =&gt; {
324
+ console.<span class="fn">log</span>(<span class="str">`Executing: ${action}`</span>);
325
+ });
326
+
327
+ bridge.events.<span class="fn">on</span>(<span class="str">'action:after'</span>, ({ action, result }) =&gt; {
328
+ console.<span class="fn">log</span>(<span class="str">`Result: ${result.success}`</span>);
329
+ });
330
+
331
+ bridge.events.<span class="fn">on</span>(<span class="str">'error'</span>, (err) =&gt; {
332
+ console.<span class="fn">error</span>(<span class="str">'Bridge error'</span>, err);
333
+ });</code></pre>
334
+ </div>
335
+ </div>
336
+
337
+ <p>Available events: <code>ready</code>, <code>action:before</code>, <code>action:after</code>, <code>action:registered</code>, <code>action:unregistered</code>, <code>agent:authenticate</code>, <code>error</code>, <code>refresh</code>, <code>destroy</code></p>
338
+
339
+ <h2 id="agent-guide">Agent Integration Guide</h2>
340
+ <p>If you're building an AI agent that interacts with websites, here's how to use WAB.</p>
341
+
342
+ <h3>Detecting WAB</h3>
343
+ <div class="code-block">
344
+ <div class="code-header">
345
+ <div class="code-dots"><span></span><span></span><span></span></div>
346
+ <span class="code-lang">JavaScript — Agent Side</span>
347
+ </div>
348
+ <div class="code-body">
349
+ <pre><code><span class="cm">// Check if the site supports WAB</span>
350
+ <span class="kw">if</span> (window.AICommands) {
351
+ <span class="kw">const</span> info = window.AICommands.<span class="fn">getPageInfo</span>();
352
+ console.<span class="fn">log</span>(<span class="str">`WAB v${info.bridgeVersion} detected`</span>);
353
+ console.<span class="fn">log</span>(<span class="str">`${info.actionsCount} actions available`</span>);
354
+ console.<span class="fn">log</span>(<span class="str">`Tier: ${info.tier}`</span>);
355
+ } <span class="kw">else</span> {
356
+ console.<span class="fn">log</span>(<span class="str">'No WAB support — fall back to DOM parsing'</span>);
357
+ }</code></pre>
358
+ </div>
359
+ </div>
360
+
361
+ <h3>Discovering and Executing Actions</h3>
362
+ <div class="code-block">
363
+ <div class="code-header">
364
+ <div class="code-dots"><span></span><span></span><span></span></div>
365
+ <span class="code-lang">JavaScript — Full Agent Workflow</span>
366
+ </div>
367
+ <div class="code-body">
368
+ <pre><code><span class="kw">async function</span> <span class="fn">agentWorkflow</span>() {
369
+ <span class="kw">const</span> bridge = window.AICommands;
370
+
371
+ <span class="cm">// 1. Authenticate (if needed)</span>
372
+ bridge.<span class="fn">authenticate</span>(<span class="str">"agent-key-123"</span>, {
373
+ <span class="prop">name</span>: <span class="str">"MyAssistant"</span>,
374
+ <span class="prop">version</span>: <span class="str">"2.0"</span>
375
+ });
376
+
377
+ <span class="cm">// 2. Discover available actions</span>
378
+ <span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
379
+
380
+ <span class="cm">// 3. Find the action we need</span>
381
+ <span class="kw">const</span> loginAction = actions.<span class="fn">find</span>(a =&gt; a.name.<span class="fn">includes</span>(<span class="str">'login'</span>));
382
+
383
+ <span class="cm">// 4. Execute it</span>
384
+ <span class="kw">if</span> (loginAction) {
385
+ <span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(loginAction.name, {
386
+ <span class="prop">email</span>: <span class="str">"user@example.com"</span>,
387
+ <span class="prop">password</span>: <span class="str">"secure-password"</span>
388
+ });
389
+ console.<span class="fn">log</span>(result);
390
+ }
391
+
392
+ <span class="cm">// 5. Wait for navigation</span>
393
+ <span class="kw">await</span> bridge.<span class="fn">waitForNavigation</span>();
394
+
395
+ <span class="cm">// 6. Refresh actions for new page</span>
396
+ bridge.<span class="fn">refresh</span>();
397
+ }</code></pre>
398
+ </div>
399
+ </div>
400
+
401
+ <h2 id="security">Security</h2>
402
+ <p>WAB is built with security as a first-class concern:</p>
403
+ <ul>
404
+ <li><strong>Permission-based access</strong> — Site owners control exactly what agents can do</li>
405
+ <li><strong>Selector restrictions</strong> — Block sensitive areas of the page from agent interaction</li>
406
+ <li><strong>Rate limiting</strong> — Built-in protection against abuse</li>
407
+ <li><strong>Server-side license verification</strong> — Tier permissions are verified by the licensing server</li>
408
+ <li><strong>Agent authentication</strong> — Optional agent identity verification</li>
409
+ <li><strong>Opt-in only</strong> — Sites must explicitly add the script; users can disable via extensions</li>
410
+ </ul>
411
+
412
+ <h3>Best Practices</h3>
413
+ <ol>
414
+ <li>Always use <code>blockedSelectors</code> to protect sensitive areas (forms with credit cards, admin panels)</li>
415
+ <li>Start with minimal permissions and expand as needed</li>
416
+ <li>Enable logging to monitor agent behavior</li>
417
+ <li>Use the <code>requireLoginForActions</code> restriction for sensitive operations</li>
418
+ <li>Keep your license key confidential</li>
419
+ </ol>
420
+
421
+ <h2 id="examples">Examples</h2>
422
+
423
+ <h3>E-commerce Site</h3>
424
+ <div class="code-block">
425
+ <div class="code-header">
426
+ <div class="code-dots"><span></span><span></span><span></span></div>
427
+ <span class="code-lang">JavaScript</span>
428
+ </div>
429
+ <div class="code-body">
430
+ <pre><code>window.AIBridgeConfig = {
431
+ <span class="prop">licenseKey</span>: <span class="str">"WAB-SHOP-XXXXX-XXXXX"</span>,
432
+ <span class="prop">agentPermissions</span>: {
433
+ <span class="prop">readContent</span>: <span class="bool">true</span>,
434
+ <span class="prop">click</span>: <span class="bool">true</span>,
435
+ <span class="prop">fillForms</span>: <span class="bool">true</span>,
436
+ <span class="prop">scroll</span>: <span class="bool">true</span>
437
+ },
438
+ <span class="prop">restrictions</span>: {
439
+ <span class="prop">blockedSelectors</span>: [<span class="str">"#checkout-payment"</span>, <span class="str">".credit-card-form"</span>],
440
+ <span class="prop">rateLimit</span>: { <span class="prop">maxCallsPerMinute</span>: <span class="num">30</span> }
441
+ }
442
+ };
443
+
444
+ <span class="cm">// After the bridge loads, add custom actions</span>
445
+ document.<span class="fn">addEventListener</span>(<span class="str">'wab:ready'</span>, () =&gt; {
446
+ window.AICommands.<span class="fn">registerAction</span>({
447
+ <span class="prop">name</span>: <span class="str">"searchProducts"</span>,
448
+ <span class="prop">description</span>: <span class="str">"Search for products by keyword"</span>,
449
+ <span class="prop">trigger</span>: <span class="str">"fill_and_submit"</span>,
450
+ <span class="prop">fields</span>: [{ <span class="prop">name</span>: <span class="str">"query"</span>, <span class="prop">selector</span>: <span class="str">"#search-input"</span>, <span class="prop">type</span>: <span class="str">"text"</span> }],
451
+ <span class="prop">submitSelector</span>: <span class="str">"#search-btn"</span>,
452
+ <span class="prop">category</span>: <span class="str">"search"</span>
453
+ });
454
+ });</code></pre>
455
+ </div>
456
+ </div>
457
+
458
+ <h3>SaaS Dashboard</h3>
459
+ <div class="code-block">
460
+ <div class="code-header">
461
+ <div class="code-dots"><span></span><span></span><span></span></div>
462
+ <span class="code-lang">JavaScript</span>
463
+ </div>
464
+ <div class="code-body">
465
+ <pre><code>window.AIBridgeConfig = {
466
+ <span class="prop">licenseKey</span>: <span class="str">"WAB-SAAS-XXXXX-XXXXX"</span>,
467
+ <span class="prop">subscriptionTier</span>: <span class="str">"pro"</span>,
468
+ <span class="prop">agentPermissions</span>: {
469
+ <span class="prop">readContent</span>: <span class="bool">true</span>,
470
+ <span class="prop">click</span>: <span class="bool">true</span>,
471
+ <span class="prop">fillForms</span>: <span class="bool">true</span>,
472
+ <span class="prop">apiAccess</span>: <span class="bool">true</span>,
473
+ <span class="prop">extractData</span>: <span class="bool">true</span>
474
+ }
475
+ };
476
+
477
+ document.<span class="fn">addEventListener</span>(<span class="str">'wab:ready'</span>, () =&gt; {
478
+ <span class="cm">// Custom API action</span>
479
+ window.AICommands.<span class="fn">registerAction</span>({
480
+ <span class="prop">name</span>: <span class="str">"getAnalytics"</span>,
481
+ <span class="prop">description</span>: <span class="str">"Fetch analytics data for the current period"</span>,
482
+ <span class="prop">trigger</span>: <span class="str">"api"</span>,
483
+ <span class="prop">endpoint</span>: <span class="str">"/api/analytics/current"</span>,
484
+ <span class="prop">method</span>: <span class="str">"GET"</span>,
485
+ <span class="prop">requiresAuth</span>: <span class="bool">true</span>,
486
+ <span class="prop">category</span>: <span class="str">"data"</span>
487
+ });
488
+
489
+ <span class="cm">// Custom handler action</span>
490
+ window.AICommands.<span class="fn">registerAction</span>({
491
+ <span class="prop">name</span>: <span class="str">"exportReport"</span>,
492
+ <span class="prop">description</span>: <span class="str">"Generate and download a PDF report"</span>,
493
+ <span class="prop">trigger</span>: <span class="str">"click"</span>,
494
+ <span class="prop">category</span>: <span class="str">"export"</span>,
495
+ <span class="prop">handler</span>: <span class="kw">async</span> () =&gt; {
496
+ <span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="str">'/api/report/generate'</span>);
497
+ <span class="kw">const</span> blob = <span class="kw">await</span> res.<span class="fn">blob</span>();
498
+ <span class="cm">// trigger download...</span>
499
+ <span class="kw">return</span> { <span class="prop">success</span>: <span class="bool">true</span>, <span class="prop">message</span>: <span class="str">"Report downloaded"</span> };
500
+ }
501
+ });
502
+ });</code></pre>
503
+ </div>
504
+ </div>
505
+
506
+ <h2 id="rest-api">REST API</h2>
507
+ <p>The WAB server provides a REST API for managing sites, licenses, and analytics.</p>
508
+
509
+ <h3>Authentication</h3>
510
+ <table style="margin-bottom:16px;">
511
+ <thead><tr><th>Endpoint</th><th>Method</th><th>Description</th></tr></thead>
512
+ <tbody>
513
+ <tr><td><code>POST /api/auth/register</code></td><td>POST</td><td>Create a new account</td></tr>
514
+ <tr><td><code>POST /api/auth/login</code></td><td>POST</td><td>Sign in and receive JWT token</td></tr>
515
+ <tr><td><code>GET /api/auth/me</code></td><td>GET</td><td>Get current user info</td></tr>
516
+ </tbody>
517
+ </table>
518
+
519
+ <h3>Sites</h3>
520
+ <table style="margin-bottom:16px;">
521
+ <thead><tr><th>Endpoint</th><th>Method</th><th>Description</th></tr></thead>
522
+ <tbody>
523
+ <tr><td><code>GET /api/sites</code></td><td>GET</td><td>List all your sites</td></tr>
524
+ <tr><td><code>POST /api/sites</code></td><td>POST</td><td>Add a new site</td></tr>
525
+ <tr><td><code>GET /api/sites/:id</code></td><td>GET</td><td>Get site details</td></tr>
526
+ <tr><td><code>PUT /api/sites/:id/config</code></td><td>PUT</td><td>Update site configuration</td></tr>
527
+ <tr><td><code>PUT /api/sites/:id/tier</code></td><td>PUT</td><td>Change subscription tier</td></tr>
528
+ <tr><td><code>DELETE /api/sites/:id</code></td><td>DELETE</td><td>Delete a site</td></tr>
529
+ <tr><td><code>GET /api/sites/:id/snippet</code></td><td>GET</td><td>Get install snippet</td></tr>
530
+ <tr><td><code>GET /api/sites/:id/analytics</code></td><td>GET</td><td>Get analytics data</td></tr>
531
+ </tbody>
532
+ </table>
533
+
534
+ <h3>License</h3>
535
+ <table style="margin-bottom:16px;">
536
+ <thead><tr><th>Endpoint</th><th>Method</th><th>Description</th></tr></thead>
537
+ <tbody>
538
+ <tr><td><code>POST /api/license/verify</code></td><td>POST</td><td>Verify a license key for a domain</td></tr>
539
+ <tr><td><code>POST /api/license/track</code></td><td>POST</td><td>Record an analytics event</td></tr>
540
+ </tbody>
541
+ </table>
542
+
543
+ <h2 id="faq">FAQ</h2>
544
+
545
+ <h3>Is WAB free to use?</h3>
546
+ <p>The core script is open source and free forever. Advanced features like API access, detailed analytics, and automated login require a paid subscription.</p>
547
+
548
+ <h3>Does WAB work with all AI agents?</h3>
549
+ <p>WAB works with any agent that can execute JavaScript in a browser context — including Selenium, Puppeteer, Playwright, browser extensions, and AI tools like OpenAI's Operator or Anthropic's Computer Use.</p>
550
+
551
+ <h3>What if my site is a SPA?</h3>
552
+ <p>Call <code>bridge.refresh()</code> after navigation events to re-scan for new elements. The <code>waitForElement()</code> method helps agents wait for dynamically loaded content.</p>
553
+
554
+ <h3>Can I use WAB without the licensing server?</h3>
555
+ <p>Yes. Without a license key, WAB runs in free-tier mode with all basic permissions. The licensing server only validates premium features.</p>
556
+
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <!-- FOOTER -->
562
+ <footer class="footer" style="margin-top:48px;">
563
+ <div class="container">
564
+ <div class="footer-bottom" style="border-top:none; padding-top:0;">
565
+ <span>&copy; 2026 Web Agent Bridge. MIT License.</span>
566
+ <a href="/" class="btn btn-ghost btn-sm">Back to Home</a>
567
+ </div>
568
+ </div>
569
+ </footer>
570
+
571
+ <script src="/js/auth-nav.js?v=3.0.1"></script>
572
+ <script>
573
+ const links = document.querySelectorAll('.docs-sidebar a');
574
+ const observer = new IntersectionObserver((entries) => {
575
+ entries.forEach(entry => {
576
+ if (entry.isIntersecting) {
577
+ links.forEach(l => l.classList.remove('active'));
578
+ const match = document.querySelector(`.docs-sidebar a[href="#${entry.target.id}"]`);
579
+ if (match) match.classList.add('active');
580
+ }
581
+ });
582
+ }, { rootMargin: '-80px 0px -70% 0px' });
583
+
584
+ document.querySelectorAll('.docs-content h2[id]').forEach(h => observer.observe(h));
585
+ </script>
586
+ <script src="/js/cookie-consent.js?v=3.0.1"></script>
587
+ </body>
588
+ </html>