web-agent-bridge 1.2.0 → 2.1.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.
- package/LICENSE +21 -21
- package/README.ar.md +572 -446
- package/README.md +968 -933
- package/bin/agent-runner.js +465 -0
- package/bin/cli.js +138 -80
- package/bin/wab.js +80 -80
- package/examples/bidi-agent.js +119 -119
- package/examples/mcp-agent.js +94 -94
- package/examples/next-app-router/README.md +44 -0
- package/examples/puppeteer-agent.js +108 -108
- package/examples/saas-dashboard/README.md +55 -0
- package/examples/shopify-hydrogen/README.md +74 -0
- package/examples/vision-agent.js +171 -171
- package/examples/wordpress-elementor/README.md +77 -0
- package/package.json +71 -78
- package/public/.well-known/ai-assets.json +59 -0
- package/public/admin/login.html +84 -84
- package/public/ai.html +196 -0
- package/public/cookies.html +208 -208
- package/public/css/premium.css +317 -0
- package/public/css/styles.css +1235 -1235
- package/public/dashboard.html +704 -704
- package/public/demo.html +259 -0
- package/public/docs.html +585 -585
- package/public/feed.xml +89 -0
- package/public/index.html +581 -332
- package/public/js/auth-nav.js +31 -31
- package/public/js/auth-redirect.js +12 -12
- package/public/js/cookie-consent.js +56 -56
- package/public/js/wab-demo-page.js +721 -0
- package/public/js/ws-client.js +74 -74
- package/public/llms-full.txt +309 -0
- package/public/llms.txt +85 -0
- package/public/login.html +83 -83
- package/public/openapi.json +580 -0
- package/public/premium-dashboard.html +2487 -0
- package/public/premium.html +791 -0
- package/public/privacy.html +295 -295
- package/public/register.html +103 -103
- package/public/robots.txt +87 -0
- package/public/script/wab-consent.d.ts +36 -0
- package/public/script/wab-consent.js +104 -0
- package/public/script/wab-schema.js +131 -0
- package/public/script/wab.d.ts +108 -0
- package/public/script/wab.min.js +405 -0
- package/public/sitemap.xml +93 -0
- package/public/sovereign.html +660 -0
- package/public/terms.html +254 -254
- package/public/video/tutorial.mp4 +0 -0
- package/script/ai-agent-bridge.js +1558 -1513
- package/sdk/README.md +55 -55
- package/sdk/index.d.ts +118 -0
- package/sdk/index.js +257 -203
- package/sdk/package.json +14 -14
- package/sdk/schema-discovery.js +83 -0
- package/server/config/secrets.js +94 -92
- package/server/index.js +2 -9
- package/server/middleware/adminAuth.js +30 -30
- package/server/middleware/auth.js +41 -41
- package/server/middleware/rateLimits.js +24 -24
- package/server/migrations/001_add_analytics_indexes.sql +7 -7
- package/server/migrations/002_premium_features.sql +418 -0
- package/server/models/adapters/index.js +33 -33
- package/server/models/adapters/mysql.js +183 -183
- package/server/models/adapters/postgresql.js +172 -172
- package/server/models/adapters/sqlite.js +7 -7
- package/server/models/db.js +561 -561
- package/server/routes/admin-premium.js +671 -0
- package/server/routes/admin.js +247 -247
- package/server/routes/api.js +131 -138
- package/server/routes/auth.js +51 -51
- package/server/routes/billing.js +45 -45
- package/server/routes/discovery.js +406 -329
- package/server/routes/license.js +240 -240
- package/server/routes/noscript.js +543 -543
- package/server/routes/premium-v2.js +686 -0
- package/server/routes/premium.js +724 -0
- package/server/routes/sovereign.js +307 -0
- package/server/routes/wab-api.js +476 -476
- package/server/services/agent-memory.js +625 -0
- package/server/services/email.js +204 -204
- package/server/services/fairness.js +420 -420
- package/server/services/negotiation.js +439 -0
- package/server/services/plugins.js +747 -0
- package/server/services/premium.js +1883 -0
- package/server/services/reputation.js +465 -0
- package/server/services/self-healing.js +843 -0
- package/server/services/stripe.js +192 -192
- package/server/services/swarm.js +788 -0
- package/server/services/verification.js +481 -0
- package/server/services/vision.js +871 -0
- package/server/utils/cache.js +125 -125
- package/server/utils/migrate.js +81 -81
- package/server/utils/secureFields.js +50 -50
- package/server/ws.js +101 -101
- package/templates/artisan-marketplace.yaml +104 -0
- package/templates/book-price-scout.yaml +98 -0
- package/templates/electronics-price-tracker.yaml +108 -0
- package/templates/flight-deal-hunter.yaml +113 -0
- package/templates/freelancer-direct.yaml +116 -0
- package/templates/grocery-price-compare.yaml +93 -0
- package/templates/hotel-direct-booking.yaml +113 -0
- package/templates/local-services.yaml +98 -0
- package/templates/olive-oil-tunisia.yaml +88 -0
- package/templates/organic-farm-fresh.yaml +101 -0
- package/templates/restaurant-direct.yaml +97 -0
- package/docs/DEPLOY.md +0 -118
- package/docs/SPEC.md +0 -1540
- package/wab-mcp-adapter/README.md +0 -136
- package/wab-mcp-adapter/index.js +0 -555
- package/wab-mcp-adapter/package.json +0 -17
package/public/index.html
CHANGED
|
@@ -1,332 +1,581 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en" dir="ltr">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Web Agent Bridge —
|
|
7
|
-
<meta name="description" content="Open
|
|
8
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
11
|
-
<link rel="stylesheet" href="/css/styles.css">
|
|
12
|
-
</head>
|
|
13
|
-
<body>
|
|
14
|
-
|
|
15
|
-
<!-- ═══════════ NAVBAR ═══════════ -->
|
|
16
|
-
<nav class="navbar" id="navbar">
|
|
17
|
-
<div class="container">
|
|
18
|
-
<a href="/" class="navbar-brand">
|
|
19
|
-
<div class="brand-icon">⚡</div>
|
|
20
|
-
<span>WAB</span>
|
|
21
|
-
</a>
|
|
22
|
-
<ul class="navbar-links">
|
|
23
|
-
<li><a href="#features">Features</a></li>
|
|
24
|
-
<li><a href="#
|
|
25
|
-
<li><a href="#
|
|
26
|
-
<li><a href="
|
|
27
|
-
<li><a href="
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<a href="/
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
&
|
|
64
|
-
 
|
|
65
|
-
 
|
|
66
|
-
&
|
|
67
|
-
&
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
<
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
<
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
<
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
<
|
|
156
|
-
<
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
<
|
|
161
|
-
<
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<
|
|
168
|
-
<
|
|
169
|
-
</
|
|
170
|
-
</div>
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
<
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
<li>
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
<div class="
|
|
206
|
-
<
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
<li>
|
|
210
|
-
<li>
|
|
211
|
-
<li>
|
|
212
|
-
<li>
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
<
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
<
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
</div>
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
</
|
|
297
|
-
<
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
<li
|
|
310
|
-
<li
|
|
311
|
-
<li
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
</
|
|
332
|
-
</
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" dir="ltr">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Web Agent Bridge — AI Agent Middleware for the Web</title>
|
|
7
|
+
<meta name="description" content="Open-source middleware that bridges AI agents and websites. Standardized commands, permissions, and analytics for intelligent automation.">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
10
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
11
|
+
<link rel="stylesheet" href="/css/styles.css">
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
|
|
15
|
+
<!-- ═══════════ NAVBAR ═══════════ -->
|
|
16
|
+
<nav class="navbar" id="navbar">
|
|
17
|
+
<div class="container">
|
|
18
|
+
<a href="/" class="navbar-brand">
|
|
19
|
+
<div class="brand-icon">⚡</div>
|
|
20
|
+
<span>WAB</span>
|
|
21
|
+
</a>
|
|
22
|
+
<ul class="navbar-links">
|
|
23
|
+
<li><a href="#features">Features</a></li>
|
|
24
|
+
<li><a href="#packages">Packages</a></li>
|
|
25
|
+
<li><a href="#integrations">Integrations</a></li>
|
|
26
|
+
<li><a href="#how-it-works">How It Works</a></li>
|
|
27
|
+
<li><a href="#pricing">Pricing</a></li>
|
|
28
|
+
<li><a href="#v2-features">v2.0</a></li>
|
|
29
|
+
<li><a href="/docs">Docs</a></li>
|
|
30
|
+
</ul>
|
|
31
|
+
<div class="navbar-actions">
|
|
32
|
+
<a href="/login" class="btn btn-ghost" data-wab-auth="guest">Sign In</a>
|
|
33
|
+
<a href="/dashboard" class="btn btn-ghost" data-wab-auth="signed-in" style="display:none">Dashboard</a>
|
|
34
|
+
<a href="/register" class="btn btn-primary btn-sm" data-wab-auth="guest">Get Started</a>
|
|
35
|
+
</div>
|
|
36
|
+
<button class="mobile-menu-btn" onclick="document.querySelector('.navbar-links').classList.toggle('active')">☰</button>
|
|
37
|
+
</div>
|
|
38
|
+
</nav>
|
|
39
|
+
|
|
40
|
+
<!-- ═══════════ HERO ═══════════ -->
|
|
41
|
+
<section class="hero">
|
|
42
|
+
<div class="container">
|
|
43
|
+
<div class="hero-content fade-in">
|
|
44
|
+
<div class="hero-badge">
|
|
45
|
+
🚀 Open Source · React · Vue · Svelte · LangChain
|
|
46
|
+
</div>
|
|
47
|
+
<h1>
|
|
48
|
+
Bridge the Gap Between<br>
|
|
49
|
+
<span class="gradient-text">AI Agents</span> & <span class="gradient-text-accent">Websites</span>
|
|
50
|
+
</h1>
|
|
51
|
+
<p>
|
|
52
|
+
An open-source middleware script that gives AI agents a standardized command interface
|
|
53
|
+
to interact with any website — with permissions, rate limiting, and full control for site owners.
|
|
54
|
+
</p>
|
|
55
|
+
<div class="hero-actions">
|
|
56
|
+
<a href="/register" class="btn btn-primary btn-lg">Start Free</a>
|
|
57
|
+
<a href="/docs" class="btn btn-secondary btn-lg">Read the Docs</a>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div class="hero-code fade-in fade-in-delay-2">
|
|
61
|
+
<code>
|
|
62
|
+
<span class="comment">// Add the bridge to your website</span><br>
|
|
63
|
+
<<span class="keyword">script</span>><br>
|
|
64
|
+
window.<span class="property">AIBridgeConfig</span> = {<br>
|
|
65
|
+
<span class="property">licenseKey</span>: <span class="string">"WAB-XXXXX-XXXXX"</span>,<br>
|
|
66
|
+
<span class="property">agentPermissions</span>: { <span class="property">click</span>: <span class="boolean">true</span>, <span class="property">fillForms</span>: <span class="boolean">true</span> }<br>
|
|
67
|
+
};<br>
|
|
68
|
+
</<span class="keyword">script</span>><br>
|
|
69
|
+
<<span class="keyword">script</span> <span class="property">src</span>=<span class="string">"/script/ai-agent-bridge.js"</span>></<span class="keyword">script</span>>
|
|
70
|
+
</code>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</section>
|
|
75
|
+
|
|
76
|
+
<!-- ═══════════ FEATURES ═══════════ -->
|
|
77
|
+
<section class="section" id="features">
|
|
78
|
+
<div class="container">
|
|
79
|
+
<div class="section-header">
|
|
80
|
+
<span class="label">Features</span>
|
|
81
|
+
<h2>Everything AI Agents Need</h2>
|
|
82
|
+
<p>A complete interface layer that makes websites AI-ready with security and control built in.</p>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div class="grid-3">
|
|
86
|
+
<div class="card fade-in">
|
|
87
|
+
<div class="card-icon blue">🎯</div>
|
|
88
|
+
<h3>Auto-Discovery</h3>
|
|
89
|
+
<p>Automatically detects buttons, forms, and navigation elements — generating precise CSS selectors and action descriptions for AI agents.</p>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="card fade-in fade-in-delay-1">
|
|
92
|
+
<div class="card-icon purple">🔐</div>
|
|
93
|
+
<h3>Permission System</h3>
|
|
94
|
+
<p>Granular control over what AI agents can do. Enable clicking, form filling, API access, and more — each toggled independently.</p>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="card fade-in fade-in-delay-2">
|
|
97
|
+
<div class="card-icon cyan">⚡</div>
|
|
98
|
+
<h3>Standardized Commands</h3>
|
|
99
|
+
<p>Unified <code>window.AICommands</code> interface that any AI agent can read and execute — no more DOM guessing.</p>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="card fade-in fade-in-delay-1">
|
|
102
|
+
<div class="card-icon green">🛡️</div>
|
|
103
|
+
<h3>Rate Limiting</h3>
|
|
104
|
+
<p>Built-in rate limiting prevents abuse. Configure max calls per minute to protect your site from aggressive automation.</p>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="card fade-in fade-in-delay-2">
|
|
107
|
+
<div class="card-icon orange">📊</div>
|
|
108
|
+
<h3>Analytics Dashboard</h3>
|
|
109
|
+
<p>Track how AI agents interact with your site. See which actions are used most, success rates, and usage patterns.</p>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="card fade-in fade-in-delay-3">
|
|
112
|
+
<div class="card-icon pink">🔌</div>
|
|
113
|
+
<h3>Custom Actions</h3>
|
|
114
|
+
<p>Register your own actions with custom handlers. Create complex workflows that AI agents can trigger with a single command.</p>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="card fade-in">
|
|
117
|
+
<div class="card-icon cyan">🛒</div>
|
|
118
|
+
<h3>Commerce & Booking Intents</h3>
|
|
119
|
+
<p>Automatically detects add-to-cart, checkout, booking, and reservation flows — mapping them to named actions agents can call directly.</p>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="card fade-in fade-in-delay-1">
|
|
122
|
+
<div class="card-icon blue">📦</div>
|
|
123
|
+
<h3>Structured Data Scanning</h3>
|
|
124
|
+
<p>Reads schema.org JSON-LD and microdata (Products, Offers, Prices) and exposes them as queryable actions — zero manual setup.</p>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="card fade-in fade-in-delay-2">
|
|
127
|
+
<div class="card-icon green">🩹</div>
|
|
128
|
+
<h3>Self-Healing Selectors</h3>
|
|
129
|
+
<p>7-strategy resilient element resolution. When the DOM changes, selectors auto-heal via ARIA, text similarity, and position heuristics.</p>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="card fade-in">
|
|
132
|
+
<div class="card-icon purple">🔏</div>
|
|
133
|
+
<h3>GDPR / CCPA Consent</h3>
|
|
134
|
+
<p>Optional consent banner gates agent actions behind user approval. SDK agents can check <code>hasConsent()</code> or <code>waitForConsent()</code> programmatically.</p>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="card fade-in fade-in-delay-1">
|
|
137
|
+
<div class="card-icon orange">🤖</div>
|
|
138
|
+
<h3>Agent SDK</h3>
|
|
139
|
+
<p>Built-in SDK for Puppeteer and Playwright: <code>runPipeline()</code>, <code>executeParallel()</code>, <code>screenshot()</code>, and consent-aware workflows.</p>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="card fade-in fade-in-delay-2">
|
|
142
|
+
<div class="card-icon pink">🌐</div>
|
|
143
|
+
<h3>WebDriver BiDi</h3>
|
|
144
|
+
<p>Standard WebDriver BiDi protocol support via <code>window.__wab_bidi</code> — compatible with any automation framework that speaks the standard.</p>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</section>
|
|
149
|
+
|
|
150
|
+
<!-- ═══════════ V2 FEATURES ═══════════ -->
|
|
151
|
+
<section class="section" id="v2-features" style="background: var(--bg-secondary);">
|
|
152
|
+
<div class="container">
|
|
153
|
+
<div class="section-header">
|
|
154
|
+
<span class="label">v2.0 — Digital Fortress</span>
|
|
155
|
+
<h2>Internet Sovereignty Features</h2>
|
|
156
|
+
<p>WAB v2.0 goes beyond bridging — it protects users with negotiation, verification, and decentralized trust.</p>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<div class="grid-3">
|
|
160
|
+
<div class="card fade-in" style="border-left: 3px solid #f59e0b;">
|
|
161
|
+
<div class="card-icon orange">💰</div>
|
|
162
|
+
<h3>Real-time Negotiation Engine</h3>
|
|
163
|
+
<p>AI agents negotiate prices directly with WAB-enabled sites. Site owners define negotiation rules (bulk discounts, loyalty rewards, time-based offers). Agents submit counter-offers in multi-round sessions — no middleman, no hidden fees.</p>
|
|
164
|
+
<ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
|
|
165
|
+
<li>8 condition types (bulk, loyalty, time, first-buy...)</li>
|
|
166
|
+
<li>4 discount types (percentage, fixed, free shipping, bundle)</li>
|
|
167
|
+
<li>Multi-round negotiation with counter-offers</li>
|
|
168
|
+
<li>Savings tracking per agent</li>
|
|
169
|
+
</ul>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
|
|
172
|
+
<div class="card-icon pink">🛡️</div>
|
|
173
|
+
<h3>Anti-Hallucination Shield</h3>
|
|
174
|
+
<p>Cross-verification engine that catches AI lies before they reach users. Compares DOM values against vision screenshots, validates prices against market benchmarks, and checks temporal consistency across sessions.</p>
|
|
175
|
+
<ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
|
|
176
|
+
<li>DOM vs Vision verification</li>
|
|
177
|
+
<li>Market benchmark price validation</li>
|
|
178
|
+
<li>Temporal consistency checks</li>
|
|
179
|
+
<li>Text similarity scoring (Levenshtein)</li>
|
|
180
|
+
</ul>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #10b981;">
|
|
183
|
+
<div class="card-icon green">⭐</div>
|
|
184
|
+
<h3>Decentralized Reputation</h3>
|
|
185
|
+
<p>Agents and sites build trust through cryptographic attestations. Every interaction gets scored — purchase success, data accuracy, delivery fulfillment. Scores are aggregated into transparent reputation profiles visible to all agents.</p>
|
|
186
|
+
<ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
|
|
187
|
+
<li>Trust attestations from agent network</li>
|
|
188
|
+
<li>Weighted scoring by interaction type</li>
|
|
189
|
+
<li>Trust levels: emerging → verified → exemplary</li>
|
|
190
|
+
<li>Global leaderboard</li>
|
|
191
|
+
</ul>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="card fade-in" style="border-left: 3px solid #3b82f6;">
|
|
194
|
+
<div class="card-icon blue">🏰</div>
|
|
195
|
+
<h3>Sovereign Dashboard</h3>
|
|
196
|
+
<p>A real-time command center showing your digital fortress status — protected sites, fairness radar, privacy shield, negotiation logs, and verification checks all in one beautiful dark-mode dashboard.</p>
|
|
197
|
+
<ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
|
|
198
|
+
<li>Live fairness radar with safety scoring</li>
|
|
199
|
+
<li>Privacy shield metrics</li>
|
|
200
|
+
<li>AI model switcher (Llama, GPT-4, Claude...)</li>
|
|
201
|
+
<li>Protected sites table with trust levels</li>
|
|
202
|
+
</ul>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #8b5cf6;">
|
|
205
|
+
<div class="card-icon purple">📦</div>
|
|
206
|
+
<h3>Community Agent Hub</h3>
|
|
207
|
+
<p>Pre-built YAML agent templates for common use cases — hotel booking, grocery comparison, artisan marketplace, flight deals. Run any template with a single CLI command: <code>npx wab-agent run template.yaml</code>.</p>
|
|
208
|
+
<ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
|
|
209
|
+
<li>11 production-ready templates</li>
|
|
210
|
+
<li>CLI runner with variable substitution</li>
|
|
211
|
+
<li>Fairness rules built into every template</li>
|
|
212
|
+
<li>Supports negotiation + verification</li>
|
|
213
|
+
</ul>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #06b6d4;">
|
|
216
|
+
<div class="card-icon cyan">🔄</div>
|
|
217
|
+
<h3>AI Brain Swapping</h3>
|
|
218
|
+
<p>WAB is the bridge — the AI model is your choice. Switch between Llama 3, GPT-4, Claude, Gemini, Mistral, or run fully local with Ollama. Your data, your model, your sovereignty.</p>
|
|
219
|
+
<ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
|
|
220
|
+
<li>6 supported AI engines</li>
|
|
221
|
+
<li>Local-first with Ollama support</li>
|
|
222
|
+
<li>Hot-swap without reconfiguration</li>
|
|
223
|
+
<li>Your data never leaves your machine</li>
|
|
224
|
+
</ul>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div style="text-align:center; margin-top:32px;">
|
|
229
|
+
<a href="/sovereign" class="btn btn-primary btn-lg">Open Sovereign Dashboard</a>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</section>
|
|
233
|
+
|
|
234
|
+
<!-- ═══════════ HOW IT WORKS ═══════════ -->
|
|
235
|
+
<section class="section" id="how-it-works" style="background: var(--bg-secondary);">
|
|
236
|
+
<div class="container">
|
|
237
|
+
<div class="section-header">
|
|
238
|
+
<span class="label">How It Works</span>
|
|
239
|
+
<h2>Three Steps to AI-Ready</h2>
|
|
240
|
+
<p>Get your website ready for AI agents in minutes, not days.</p>
|
|
241
|
+
</div>
|
|
242
|
+
|
|
243
|
+
<div class="grid-3">
|
|
244
|
+
<div class="card" style="text-align:center;">
|
|
245
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">1️⃣</div>
|
|
246
|
+
<h3>Add the Script</h3>
|
|
247
|
+
<p>Include the bridge script in your HTML with your configuration. Set permissions, restrictions, and your license key.</p>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="card" style="text-align:center;">
|
|
250
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">2️⃣</div>
|
|
251
|
+
<h3>Configure Permissions</h3>
|
|
252
|
+
<p>Use the dashboard to fine-tune which actions AI agents can perform. Block sensitive areas and set rate limits.</p>
|
|
253
|
+
</div>
|
|
254
|
+
<div class="card" style="text-align:center;">
|
|
255
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">3️⃣</div>
|
|
256
|
+
<h3>AI Agents Connect</h3>
|
|
257
|
+
<p>AI agents read <code>window.AICommands</code>, discover available actions, and execute them precisely — no DOM scraping needed.</p>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
|
|
261
|
+
<div style="margin-top:48px;">
|
|
262
|
+
<div class="code-block">
|
|
263
|
+
<div class="code-header">
|
|
264
|
+
<div class="code-dots"><span></span><span></span><span></span></div>
|
|
265
|
+
<span class="code-lang">JavaScript — AI Agent Side</span>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="code-body">
|
|
268
|
+
<pre><span class="cm">// AI Agent reads available commands</span>
|
|
269
|
+
<span class="kw">const</span> bridge = window.<span class="prop">AICommands</span>;
|
|
270
|
+
|
|
271
|
+
<span class="cm">// Discover all available actions</span>
|
|
272
|
+
<span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
|
|
273
|
+
console.<span class="fn">log</span>(actions);
|
|
274
|
+
<span class="cm">// → [{ name: "signup", trigger: "click", ... }, ...]</span>
|
|
275
|
+
|
|
276
|
+
<span class="cm">// Execute a form fill action</span>
|
|
277
|
+
<span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
|
|
278
|
+
<span class="prop">name</span>: <span class="str">"John Doe"</span>,
|
|
279
|
+
<span class="prop">email</span>: <span class="str">"john@example.com"</span>,
|
|
280
|
+
<span class="prop">message</span>: <span class="str">"Hello from AI!"</span>
|
|
281
|
+
});
|
|
282
|
+
|
|
283
|
+
<span class="cm">// Wait for dynamic content</span>
|
|
284
|
+
<span class="kw">await</span> bridge.<span class="fn">waitForElement</span>(<span class="str">".success-message"</span>);</pre>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
</section>
|
|
290
|
+
|
|
291
|
+
<!-- ═══════════ PRICING ═══════════ -->
|
|
292
|
+
<section class="section" id="pricing">
|
|
293
|
+
<div class="container">
|
|
294
|
+
<div class="section-header">
|
|
295
|
+
<span class="label">Pricing</span>
|
|
296
|
+
<h2>Simple, Transparent Pricing</h2>
|
|
297
|
+
<p>Start free, upgrade when you need advanced features. Open source forever.</p>
|
|
298
|
+
</div>
|
|
299
|
+
|
|
300
|
+
<div class="grid-3">
|
|
301
|
+
<div class="pricing-card">
|
|
302
|
+
<div class="pricing-tier">Free</div>
|
|
303
|
+
<div class="pricing-price">$0 <span>/mo</span></div>
|
|
304
|
+
<div class="pricing-desc">Perfect for personal projects and experimentation.</div>
|
|
305
|
+
<ul class="pricing-features">
|
|
306
|
+
<li>Auto-discovery of actions</li>
|
|
307
|
+
<li>Click & scroll permissions</li>
|
|
308
|
+
<li>Rate limiting (60/min)</li>
|
|
309
|
+
<li>Basic logging</li>
|
|
310
|
+
<li>1 site</li>
|
|
311
|
+
<li class="disabled">Form filling</li>
|
|
312
|
+
<li class="disabled">API access</li>
|
|
313
|
+
<li class="disabled">Analytics dashboard</li>
|
|
314
|
+
</ul>
|
|
315
|
+
<a href="/register" class="btn btn-secondary" style="width:100%;">Get Started Free</a>
|
|
316
|
+
</div>
|
|
317
|
+
|
|
318
|
+
<div class="pricing-card featured">
|
|
319
|
+
<div class="pricing-tier">Pro</div>
|
|
320
|
+
<div class="pricing-price">$29 <span>/mo</span></div>
|
|
321
|
+
<div class="pricing-desc">For businesses that want full AI agent integration.</div>
|
|
322
|
+
<ul class="pricing-features">
|
|
323
|
+
<li>Everything in Free</li>
|
|
324
|
+
<li>Form filling & submission</li>
|
|
325
|
+
<li>Internal API access</li>
|
|
326
|
+
<li>Advanced analytics</li>
|
|
327
|
+
<li>Up to 10 sites</li>
|
|
328
|
+
<li>Automated login support</li>
|
|
329
|
+
<li>Data extraction</li>
|
|
330
|
+
<li>Priority support</li>
|
|
331
|
+
</ul>
|
|
332
|
+
<a href="/register" class="btn btn-primary" style="width:100%;">Start Pro Trial</a>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<div class="pricing-card">
|
|
336
|
+
<div class="pricing-tier">Enterprise</div>
|
|
337
|
+
<div class="pricing-price">Custom</div>
|
|
338
|
+
<div class="pricing-desc">Custom solutions for large-scale deployments.</div>
|
|
339
|
+
<ul class="pricing-features">
|
|
340
|
+
<li>Everything in Pro</li>
|
|
341
|
+
<li>Unlimited sites</li>
|
|
342
|
+
<li>Custom rate limits</li>
|
|
343
|
+
<li>Webhook integrations</li>
|
|
344
|
+
<li>SSO / SAML</li>
|
|
345
|
+
<li>Dedicated support</li>
|
|
346
|
+
<li>SLA guarantee</li>
|
|
347
|
+
<li>Custom development</li>
|
|
348
|
+
</ul>
|
|
349
|
+
<a href="mailto:sales@webagentbridge.com" class="btn btn-secondary" style="width:100%;">Contact Sales</a>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
</section>
|
|
354
|
+
|
|
355
|
+
<!-- ═══════════ FRAMEWORK PACKAGES ═══════════ -->
|
|
356
|
+
<section class="section" id="packages" style="background: var(--bg-secondary);">
|
|
357
|
+
<div class="container">
|
|
358
|
+
<div class="section-header">
|
|
359
|
+
<span class="label">Packages</span>
|
|
360
|
+
<h2>Use WAB with Your Favorite Framework</h2>
|
|
361
|
+
<p>Official packages for React, Vue, Svelte, and LangChain — with full TypeScript support.</p>
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<div class="grid-3">
|
|
365
|
+
<div class="card fade-in" style="text-align:center;">
|
|
366
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">⚛️</div>
|
|
367
|
+
<h3>React</h3>
|
|
368
|
+
<p><code>@web-agent-bridge/react</code></p>
|
|
369
|
+
<p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Hooks: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> + <code>WABProvider</code> for auto-loading the script.</p>
|
|
370
|
+
<div class="code-block" style="margin-top:16px; text-align:left;">
|
|
371
|
+
<div class="code-body" style="padding:12px; font-size:0.82rem;">
|
|
372
|
+
<pre><span class="kw">const</span> { run, result } = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
|
|
373
|
+
<span class="kw">await</span> <span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });</pre>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
</div>
|
|
377
|
+
<div class="card fade-in fade-in-delay-1" style="text-align:center;">
|
|
378
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">💚</div>
|
|
379
|
+
<h3>Vue 3</h3>
|
|
380
|
+
<p><code>@web-agent-bridge/vue</code></p>
|
|
381
|
+
<p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Composables: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> — reactive refs with loading/error/result state.</p>
|
|
382
|
+
<div class="code-block" style="margin-top:16px; text-align:left;">
|
|
383
|
+
<div class="code-body" style="padding:12px; font-size:0.82rem;">
|
|
384
|
+
<pre><span class="kw">const</span> cart = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
|
|
385
|
+
<span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
|
|
386
|
+
<span class="cm">// cart.result.value, cart.loading.value</span></pre>
|
|
387
|
+
</div>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
<div class="card fade-in fade-in-delay-2" style="text-align:center;">
|
|
391
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">🔥</div>
|
|
392
|
+
<h3>Svelte</h3>
|
|
393
|
+
<p><code>@web-agent-bridge/svelte</code></p>
|
|
394
|
+
<p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Stores: <code>createWAB</code>, <code>createWABAction</code> — subscribe to <code>$store</code> for reactive state.</p>
|
|
395
|
+
<div class="code-block" style="margin-top:16px; text-align:left;">
|
|
396
|
+
<div class="code-body" style="padding:12px; font-size:0.82rem;">
|
|
397
|
+
<pre><span class="kw">const</span> cart = <span class="fn">createWABAction</span>(<span class="str">'addToCart'</span>);
|
|
398
|
+
<span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
|
|
399
|
+
<span class="cm">// {#if $cart.loading}Adding...{/if}</span></pre>
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</section>
|
|
406
|
+
|
|
407
|
+
<!-- ═══════════ LLM / AGENT INTEGRATION ═══════════ -->
|
|
408
|
+
<section class="section" id="integrations">
|
|
409
|
+
<div class="container">
|
|
410
|
+
<div class="section-header">
|
|
411
|
+
<span class="label">Agent Integrations</span>
|
|
412
|
+
<h2>Connect Any AI Agent Framework</h2>
|
|
413
|
+
<p>Use WAB with LangChain, MCP, or build your own agent — every action becomes a tool the LLM can call.</p>
|
|
414
|
+
</div>
|
|
415
|
+
|
|
416
|
+
<div class="grid-3">
|
|
417
|
+
<div class="card fade-in" style="text-align:center;">
|
|
418
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">🦜</div>
|
|
419
|
+
<h3>LangChain / LangGraph</h3>
|
|
420
|
+
<p><code>@web-agent-bridge/langchain</code></p>
|
|
421
|
+
<p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">WABToolkit wraps every WAB action as a LangChain <code>StructuredTool</code>. Works in HTTP mode (server) or browser mode (Puppeteer).</p>
|
|
422
|
+
<div class="code-block" style="margin-top:16px; text-align:left;">
|
|
423
|
+
<div class="code-body" style="padding:12px; font-size:0.82rem;">
|
|
424
|
+
<pre><span class="kw">const</span> tk = <span class="kw">new</span> <span class="fn">WABToolkit</span>({ <span class="prop">siteUrl</span>: <span class="str">'https://shop.example.com'</span> });
|
|
425
|
+
<span class="kw">const</span> tools = <span class="kw">await</span> tk.<span class="fn">getTools</span>();
|
|
426
|
+
<span class="cm">// Pass tools to any LangChain agent</span></pre>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
<div class="card fade-in fade-in-delay-1" style="text-align:center;">
|
|
431
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">🔗</div>
|
|
432
|
+
<h3>MCP Adapter</h3>
|
|
433
|
+
<p><code>wab-mcp-adapter</code></p>
|
|
434
|
+
<p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Converts WAB actions into MCP tools so any MCP-compatible agent (Claude, etc.) can interact with WAB sites through MCP.</p>
|
|
435
|
+
<div class="code-block" style="margin-top:16px; text-align:left;">
|
|
436
|
+
<div class="code-body" style="padding:12px; font-size:0.82rem;">
|
|
437
|
+
<pre><span class="kw">const</span> adapter = <span class="kw">new</span> <span class="fn">WABMCPAdapter</span>({ <span class="prop">siteUrl</span>: <span class="str">'...'</span> });
|
|
438
|
+
<span class="kw">const</span> tools = adapter.<span class="fn">listTools</span>();
|
|
439
|
+
<span class="cm">// Built-in: discover, execute, read, search</span></pre>
|
|
440
|
+
</div>
|
|
441
|
+
</div>
|
|
442
|
+
</div>
|
|
443
|
+
<div class="card fade-in fade-in-delay-2" style="text-align:center;">
|
|
444
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">🧰</div>
|
|
445
|
+
<h3>Agent SDK</h3>
|
|
446
|
+
<p><code>web-agent-bridge/sdk</code></p>
|
|
447
|
+
<p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">First-class Puppeteer/Playwright SDK with pipeline execution, parallel actions, screenshot capture, and consent-aware workflows.</p>
|
|
448
|
+
<div class="code-block" style="margin-top:16px; text-align:left;">
|
|
449
|
+
<div class="code-body" style="padding:12px; font-size:0.82rem;">
|
|
450
|
+
<pre><span class="kw">const</span> agent = <span class="kw">new</span> <span class="fn">WABAgent</span>(page);
|
|
451
|
+
<span class="kw">await</span> agent.<span class="fn">waitForConsent</span>();
|
|
452
|
+
<span class="kw">await</span> agent.<span class="fn">runPipeline</span>([...steps]);</pre>
|
|
453
|
+
</div>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
</section>
|
|
459
|
+
|
|
460
|
+
<!-- ═══════════ EXAMPLES ═══════════ -->
|
|
461
|
+
<section class="section" id="examples" style="background: var(--bg-secondary);">
|
|
462
|
+
<div class="container">
|
|
463
|
+
<div class="section-header">
|
|
464
|
+
<span class="label">Examples</span>
|
|
465
|
+
<h2>Framework & CMS Integration Examples</h2>
|
|
466
|
+
<p>Ready-to-use examples for popular platforms — see how WAB fits into your stack.</p>
|
|
467
|
+
</div>
|
|
468
|
+
|
|
469
|
+
<div class="grid-3">
|
|
470
|
+
<div class="card fade-in" style="text-align:center;">
|
|
471
|
+
<div style="font-size:2.2rem; margin-bottom:12px;">▲</div>
|
|
472
|
+
<h3>Next.js App Router</h3>
|
|
473
|
+
<p style="color:var(--text-secondary); font-size:0.9rem;">React Server Components + WABProvider for client-side bridge with <code>useWABAction</code> hooks.</p>
|
|
474
|
+
</div>
|
|
475
|
+
<div class="card fade-in fade-in-delay-1" style="text-align:center;">
|
|
476
|
+
<div style="font-size:2.2rem; margin-bottom:12px;">🛍️</div>
|
|
477
|
+
<h3>Shopify Hydrogen</h3>
|
|
478
|
+
<p style="color:var(--text-secondary); font-size:0.9rem;">Hydrogen storefront with cart actions: <code>getCartCount</code>, <code>addFirstVisibleProductToCart</code>.</p>
|
|
479
|
+
</div>
|
|
480
|
+
<div class="card fade-in fade-in-delay-2" style="text-align:center;">
|
|
481
|
+
<div style="font-size:2.2rem; margin-bottom:12px;">📝</div>
|
|
482
|
+
<h3>WordPress + Elementor</h3>
|
|
483
|
+
<p style="color:var(--text-secondary); font-size:0.9rem;">Elementor page builder + WAB schema scanner for auto-discovered product and form actions.</p>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="card fade-in" style="text-align:center;">
|
|
486
|
+
<div style="font-size:2.2rem; margin-bottom:12px;">📊</div>
|
|
487
|
+
<h3>SaaS Dashboard</h3>
|
|
488
|
+
<p style="color:var(--text-secondary); font-size:0.9rem;">Notion-style SaaS with KPI reads, customer lookup, and invoice workflow triggers.</p>
|
|
489
|
+
</div>
|
|
490
|
+
<div class="card fade-in fade-in-delay-1" style="text-align:center;">
|
|
491
|
+
<div style="font-size:2.2rem; margin-bottom:12px;">🤖</div>
|
|
492
|
+
<h3>Puppeteer Agent</h3>
|
|
493
|
+
<p style="color:var(--text-secondary); font-size:0.9rem;">Headless browser agent that discovers and executes actions automatically via the SDK.</p>
|
|
494
|
+
</div>
|
|
495
|
+
<div class="card fade-in fade-in-delay-2" style="text-align:center;">
|
|
496
|
+
<div style="font-size:2.2rem; margin-bottom:12px;">👁️</div>
|
|
497
|
+
<h3>Vision Agent</h3>
|
|
498
|
+
<p style="color:var(--text-secondary); font-size:0.9rem;">Natural language intent resolution — "add product to cart" maps to the right WAB action.</p>
|
|
499
|
+
</div>
|
|
500
|
+
</div>
|
|
501
|
+
|
|
502
|
+
<div style="text-align:center; margin-top:32px;">
|
|
503
|
+
<a href="https://github.com/abokenan444/web-agent-bridge/tree/master/examples" class="btn btn-secondary" target="_blank" rel="noopener">View All Examples on GitHub →</a>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
</section>
|
|
507
|
+
|
|
508
|
+
<!-- ═══════════ CTA ═══════════ -->
|
|
509
|
+
<section class="section" style="text-align:center;">
|
|
510
|
+
<div class="container">
|
|
511
|
+
<h2 style="margin-bottom:16px;">Ready to Make Your Site <span class="gradient-text">AI-Ready</span>?</h2>
|
|
512
|
+
<p style="color:var(--text-secondary); max-width:540px; margin:0 auto 32px; font-size:1.1rem;">
|
|
513
|
+
Join the open-source movement that's bridging the gap between AI agents and the web.
|
|
514
|
+
</p>
|
|
515
|
+
<div style="display:flex; gap:16px; justify-content:center; flex-wrap:wrap;">
|
|
516
|
+
<a href="/register" class="btn btn-primary btn-lg">Create Free Account</a>
|
|
517
|
+
<a href="https://github.com/abokenan444/web-agent-bridge" class="btn btn-secondary btn-lg" target="_blank" rel="noopener">⭐ Star on GitHub</a>
|
|
518
|
+
<a href="/docs" class="btn btn-secondary btn-lg">View Documentation</a>
|
|
519
|
+
</div>
|
|
520
|
+
</div>
|
|
521
|
+
</section>
|
|
522
|
+
|
|
523
|
+
<!-- ═══════════ FOOTER ═══════════ -->
|
|
524
|
+
<footer class="footer">
|
|
525
|
+
<div class="container">
|
|
526
|
+
<div class="footer-grid">
|
|
527
|
+
<div class="footer-brand">
|
|
528
|
+
<a href="/" class="navbar-brand">
|
|
529
|
+
<div class="brand-icon">⚡</div>
|
|
530
|
+
<span>Web Agent Bridge</span>
|
|
531
|
+
</a>
|
|
532
|
+
<p>Open-source middleware for AI agent and website interaction. Built for the future of intelligent automation.</p>
|
|
533
|
+
</div>
|
|
534
|
+
<div class="footer-col">
|
|
535
|
+
<h4>Product</h4>
|
|
536
|
+
<ul>
|
|
537
|
+
<li><a href="#features">Features</a></li>
|
|
538
|
+
<li><a href="#packages">Framework Packages</a></li>
|
|
539
|
+
<li><a href="#integrations">Agent Integrations</a></li>
|
|
540
|
+
<li><a href="#pricing">Pricing</a></li>
|
|
541
|
+
<li><a href="/docs">Documentation</a></li>
|
|
542
|
+
<li><a href="/sovereign">Sovereign Dashboard</a></li>
|
|
543
|
+
<li data-wab-auth="signed-in" style="display:none"><a href="/dashboard">Dashboard</a></li>
|
|
544
|
+
</ul>
|
|
545
|
+
</div>
|
|
546
|
+
<div class="footer-col">
|
|
547
|
+
<h4>Developers</h4>
|
|
548
|
+
<ul>
|
|
549
|
+
<li><a href="/docs#quick-start">Quick Start</a></li>
|
|
550
|
+
<li><a href="/docs#api-reference">API Reference</a></li>
|
|
551
|
+
<li><a href="#examples">Examples</a></li>
|
|
552
|
+
<li><a href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a></li>
|
|
553
|
+
</ul>
|
|
554
|
+
</div>
|
|
555
|
+
<div class="footer-col">
|
|
556
|
+
<h4>Legal</h4>
|
|
557
|
+
<ul>
|
|
558
|
+
<li><a href="/privacy">Privacy Policy</a></li>
|
|
559
|
+
<li><a href="/terms">Terms of Service</a></li>
|
|
560
|
+
<li><a href="/cookies">Cookie Policy</a></li>
|
|
561
|
+
</ul>
|
|
562
|
+
</div>
|
|
563
|
+
</div>
|
|
564
|
+
<div class="footer-bottom">
|
|
565
|
+
<span>© 2026 Web Agent Bridge. MIT License. Operated from the Netherlands.</span>
|
|
566
|
+
</div>
|
|
567
|
+
</div>
|
|
568
|
+
</footer>
|
|
569
|
+
|
|
570
|
+
<script src="/js/auth-nav.js"></script>
|
|
571
|
+
<script>
|
|
572
|
+
const navbar = document.getElementById('navbar');
|
|
573
|
+
window.addEventListener('scroll', () => {
|
|
574
|
+
navbar.style.background = window.scrollY > 50
|
|
575
|
+
? 'rgba(10, 14, 26, 0.95)'
|
|
576
|
+
: 'rgba(10, 14, 26, 0.8)';
|
|
577
|
+
});
|
|
578
|
+
</script>
|
|
579
|
+
<script src="/js/cookie-consent.js"></script>
|
|
580
|
+
</body>
|
|
581
|
+
</html>
|