web-agent-bridge 1.1.1 → 1.1.2
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 +446 -446
- package/README.md +844 -844
- package/bin/cli.js +80 -80
- package/bin/wab.js +80 -80
- package/docs/DEPLOY.md +118 -118
- package/docs/SPEC.md +1540 -1540
- package/examples/bidi-agent.js +119 -119
- package/examples/mcp-agent.js +94 -94
- package/examples/puppeteer-agent.js +108 -108
- package/examples/vision-agent.js +171 -171
- package/package.json +78 -78
- package/public/admin/dashboard.html +848 -848
- package/public/admin/login.html +84 -84
- package/public/cookies.html +208 -208
- package/public/css/styles.css +1235 -1235
- package/public/dashboard.html +704 -704
- package/public/docs.html +585 -585
- package/public/index.html +332 -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/ws-client.js +74 -74
- package/public/login.html +83 -83
- package/public/privacy.html +295 -295
- package/public/register.html +103 -103
- package/public/terms.html +254 -254
- package/script/ai-agent-bridge.js +1513 -1513
- package/sdk/README.md +55 -55
- package/sdk/index.js +203 -203
- package/sdk/package.json +14 -14
- package/server/config/secrets.js +92 -92
- package/server/index.js +181 -181
- 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/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.js +247 -247
- package/server/routes/api.js +138 -138
- package/server/routes/auth.js +51 -51
- package/server/routes/billing.js +45 -45
- package/server/routes/discovery.js +329 -329
- package/server/routes/license.js +240 -240
- package/server/routes/noscript.js +543 -543
- package/server/routes/wab-api.js +476 -476
- package/server/services/email.js +204 -204
- package/server/services/fairness.js +420 -420
- package/server/services/stripe.js +192 -192
- 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/wab-mcp-adapter/README.md +136 -136
- package/wab-mcp-adapter/index.js +555 -555
- package/wab-mcp-adapter/package.json +17 -17
- package/public/css/premium.css +0 -317
- package/public/premium-dashboard.html +0 -2075
- package/public/premium.html +0 -791
- package/server/migrations/002_premium_features.sql +0 -418
- package/server/routes/premium.js +0 -724
- package/server/services/premium.js +0 -1680
package/public/index.html
CHANGED
|
@@ -1,332 +1,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
|
|
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="#how-it-works">How It Works</a></li>
|
|
25
|
-
<li><a href="#pricing">Pricing</a></li>
|
|
26
|
-
<li><a href="/premium">Premium</a></li>
|
|
27
|
-
<li><a href="/docs">Docs</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-ghost" 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
|
-
<button class="mobile-menu-btn" onclick="document.querySelector('.navbar-links').classList.toggle('active')">☰</button>
|
|
35
|
-
</div>
|
|
36
|
-
</nav>
|
|
37
|
-
|
|
38
|
-
<!-- ═══════════ HERO ═══════════ -->
|
|
39
|
-
<section class="hero">
|
|
40
|
-
<div class="container">
|
|
41
|
-
<div class="hero-content fade-in">
|
|
42
|
-
<div class="hero-badge">
|
|
43
|
-
🚀 Open
|
|
44
|
-
</div>
|
|
45
|
-
<h1>
|
|
46
|
-
|
|
47
|
-
<span class="gradient-text">AI Agents</span> & <span class="gradient-text-accent">
|
|
48
|
-
</h1>
|
|
49
|
-
<p>
|
|
50
|
-
An open
|
|
51
|
-
to interact with any website — with
|
|
52
|
-
</p>
|
|
53
|
-
<div class="hero-actions">
|
|
54
|
-
<a href="/register" class="btn btn-primary btn-lg">Start Free</a>
|
|
55
|
-
<a href="/docs" class="btn btn-secondary btn-lg">Read the Docs</a>
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
<div class="hero-code fade-in fade-in-delay-2">
|
|
59
|
-
<code>
|
|
60
|
-
<span class="comment">// Add the bridge to your website</span><br>
|
|
61
|
-
<<span class="keyword">script</span>><br>
|
|
62
|
-
window.<span class="property">AIBridgeConfig</span> = {<br>
|
|
63
|
-
<span class="property">siteId</span>: <span class="string">"your-site-id"</span>,<br>
|
|
64
|
-
<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>
|
|
65
|
-
};<br>
|
|
66
|
-
</<span class="keyword">script</span>><br>
|
|
67
|
-
<<span class="keyword">script</span> <span class="property">src</span>=<span class="string">"/script/ai-agent-bridge.js"</span>></<span class="keyword">script</span>>
|
|
68
|
-
</code>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
</section>
|
|
73
|
-
|
|
74
|
-
<!-- ═══════════ FEATURES ═══════════ -->
|
|
75
|
-
<section class="section" id="features">
|
|
76
|
-
<div class="container">
|
|
77
|
-
<div class="section-header">
|
|
78
|
-
<span class="label">Features</span>
|
|
79
|
-
<h2>Everything AI Agents Need</h2>
|
|
80
|
-
<p>A complete interface layer that makes websites AI-ready with security and control built in.</p>
|
|
81
|
-
</div>
|
|
82
|
-
|
|
83
|
-
<div class="grid-3">
|
|
84
|
-
<div class="card fade-in">
|
|
85
|
-
<div class="card-icon blue">🎯</div>
|
|
86
|
-
<h3>Auto-Discovery</h3>
|
|
87
|
-
<p>Automatically detects buttons, forms, and navigation elements — generating precise CSS selectors and action descriptions for AI agents.</p>
|
|
88
|
-
</div>
|
|
89
|
-
<div class="card fade-in fade-in-delay-1">
|
|
90
|
-
<div class="card-icon purple">🔐</div>
|
|
91
|
-
<h3>Permission System</h3>
|
|
92
|
-
<p>Granular control over what AI agents can do. Enable clicking, form filling, API access, and more — each toggled independently.</p>
|
|
93
|
-
</div>
|
|
94
|
-
<div class="card fade-in fade-in-delay-2">
|
|
95
|
-
<div class="card-icon cyan">⚡</div>
|
|
96
|
-
<h3>Standardized Commands</h3>
|
|
97
|
-
<p>Unified <code>window.AICommands</code> interface that any AI agent can read and execute — no more DOM guessing.</p>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="card fade-in fade-in-delay-1">
|
|
100
|
-
<div class="card-icon green">🛡️</div>
|
|
101
|
-
<h3>Rate Limiting</h3>
|
|
102
|
-
<p>Built-in rate limiting prevents abuse. Configure max calls per minute to protect your site from aggressive automation.</p>
|
|
103
|
-
</div>
|
|
104
|
-
<div class="card fade-in fade-in-delay-2">
|
|
105
|
-
<div class="card-icon orange">📊</div>
|
|
106
|
-
<h3>Analytics Dashboard</h3>
|
|
107
|
-
<p>Track how AI agents interact with your site. See which actions are used most, success rates, and usage patterns.</p>
|
|
108
|
-
</div>
|
|
109
|
-
<div class="card fade-in fade-in-delay-3">
|
|
110
|
-
<div class="card-icon pink">🔌</div>
|
|
111
|
-
<h3>Custom Actions</h3>
|
|
112
|
-
<p>Register your own actions with custom handlers. Create complex workflows that AI agents can trigger with a single command.</p>
|
|
113
|
-
</div>
|
|
114
|
-
</div>
|
|
115
|
-
</div>
|
|
116
|
-
</section>
|
|
117
|
-
|
|
118
|
-
<!-- ═══════════ HOW IT WORKS ═══════════ -->
|
|
119
|
-
<section class="section" id="how-it-works" style="background: var(--bg-secondary);">
|
|
120
|
-
<div class="container">
|
|
121
|
-
<div class="section-header">
|
|
122
|
-
<span class="label">How It Works</span>
|
|
123
|
-
<h2>Three Steps to AI-Ready</h2>
|
|
124
|
-
<p>Get your website ready for AI agents in minutes, not days.</p>
|
|
125
|
-
</div>
|
|
126
|
-
|
|
127
|
-
<div class="grid-3">
|
|
128
|
-
<div class="card" style="text-align:center;">
|
|
129
|
-
<div style="font-size:2.5rem; margin-bottom:16px;">1️⃣</div>
|
|
130
|
-
<h3>Add the Script</h3>
|
|
131
|
-
<p>Include the bridge script in your HTML with your configuration. Set permissions, restrictions, and your license key.</p>
|
|
132
|
-
</div>
|
|
133
|
-
<div class="card" style="text-align:center;">
|
|
134
|
-
<div style="font-size:2.5rem; margin-bottom:16px;">2️⃣</div>
|
|
135
|
-
<h3>Configure Permissions</h3>
|
|
136
|
-
<p>Use the dashboard to fine-tune which actions AI agents can perform. Block sensitive areas and set rate limits.</p>
|
|
137
|
-
</div>
|
|
138
|
-
<div class="card" style="text-align:center;">
|
|
139
|
-
<div style="font-size:2.5rem; margin-bottom:16px;">3️⃣</div>
|
|
140
|
-
<h3>AI Agents Connect</h3>
|
|
141
|
-
<p>AI agents read <code>window.AICommands</code>, discover available actions, and execute them precisely — no DOM scraping needed.</p>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
|
|
145
|
-
<div style="margin-top:48px;">
|
|
146
|
-
<div class="code-block">
|
|
147
|
-
<div class="code-header">
|
|
148
|
-
<div class="code-dots"><span></span><span></span><span></span></div>
|
|
149
|
-
<span class="code-lang">JavaScript — AI Agent Side</span>
|
|
150
|
-
</div>
|
|
151
|
-
<div class="code-body">
|
|
152
|
-
<pre><span class="cm">// AI Agent reads available commands</span>
|
|
153
|
-
<span class="kw">const</span> bridge = window.<span class="prop">AICommands</span>;
|
|
154
|
-
|
|
155
|
-
<span class="cm">// Discover all available actions</span>
|
|
156
|
-
<span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
|
|
157
|
-
console.<span class="fn">log</span>(actions);
|
|
158
|
-
<span class="cm">// → [{ name: "signup", trigger: "click", ... }, ...]</span>
|
|
159
|
-
|
|
160
|
-
<span class="cm">// Execute a form fill action</span>
|
|
161
|
-
<span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
|
|
162
|
-
<span class="prop">name</span>: <span class="str">"John Doe"</span>,
|
|
163
|
-
<span class="prop">email</span>: <span class="str">"john@example.com"</span>,
|
|
164
|
-
<span class="prop">message</span>: <span class="str">"Hello from AI!"</span>
|
|
165
|
-
});
|
|
166
|
-
|
|
167
|
-
<span class="cm">// Wait for dynamic content</span>
|
|
168
|
-
<span class="kw">await</span> bridge.<span class="fn">waitForElement</span>(<span class="str">".success-message"</span>);</pre>
|
|
169
|
-
</div>
|
|
170
|
-
</div>
|
|
171
|
-
</div>
|
|
172
|
-
</div>
|
|
173
|
-
</section>
|
|
174
|
-
|
|
175
|
-
<!-- ═══════════ PRICING ═══════════ -->
|
|
176
|
-
<section class="section" id="pricing">
|
|
177
|
-
<div class="container">
|
|
178
|
-
<div class="section-header">
|
|
179
|
-
<span class="label">Pricing</span>
|
|
180
|
-
<h2>Simple, Transparent Pricing</h2>
|
|
181
|
-
<p>Start free, upgrade when you need advanced features. Open source core forever.</p>
|
|
182
|
-
</div>
|
|
183
|
-
|
|
184
|
-
<div class="grid-4">
|
|
185
|
-
<div class="pricing-card">
|
|
186
|
-
<div class="pricing-tier">Free</div>
|
|
187
|
-
<div class="pricing-price">$0 <span>/mo</span></div>
|
|
188
|
-
<div class="pricing-desc">Personal projects and experimentation.</div>
|
|
189
|
-
<ul class="pricing-features">
|
|
190
|
-
<li>Auto-discovery of actions</li>
|
|
191
|
-
<li>Click & scroll permissions</li>
|
|
192
|
-
<li>Rate limiting (60/min)</li>
|
|
193
|
-
<li>Basic logging</li>
|
|
194
|
-
<li>1 site</li>
|
|
195
|
-
<li>Community support</li>
|
|
196
|
-
<li class="disabled">Form filling</li>
|
|
197
|
-
<li class="disabled">Analytics dashboard</li>
|
|
198
|
-
</ul>
|
|
199
|
-
<a href="/register" class="btn btn-secondary" style="width:100%;">Get Started Free</a>
|
|
200
|
-
</div>
|
|
201
|
-
|
|
202
|
-
<div class="pricing-card">
|
|
203
|
-
<div class="pricing-tier">Starter</div>
|
|
204
|
-
<div class="pricing-price">$9 <span>/mo</span></div>
|
|
205
|
-
<div class="pricing-desc">Small sites with basic analytics & protection.</div>
|
|
206
|
-
<ul class="pricing-features">
|
|
207
|
-
<li>Everything in Free</li>
|
|
208
|
-
<li>Form filling & submit</li>
|
|
209
|
-
<li>Agent Traffic Intelligence</li>
|
|
210
|
-
<li>Smart Actions (basic)</li>
|
|
211
|
-
<li>Up to 3 sites</li>
|
|
212
|
-
<li>Automated login support</li>
|
|
213
|
-
<li>Same-day email support</li>
|
|
214
|
-
<li class="disabled">API access</li>
|
|
215
|
-
</ul>
|
|
216
|
-
<a href="/register" class="btn btn-secondary" style="width:100%;">Start Starter</a>
|
|
217
|
-
</div>
|
|
218
|
-
|
|
219
|
-
<div class="pricing-card featured">
|
|
220
|
-
<div class="pricing-tier">Pro</div>
|
|
221
|
-
<div class="pricing-price">$29 <span>/mo</span></div>
|
|
222
|
-
<div class="pricing-desc">Full power for businesses and teams.</div>
|
|
223
|
-
<ul class="pricing-features">
|
|
224
|
-
<li>Everything in Starter</li>
|
|
225
|
-
<li>Internal API access</li>
|
|
226
|
-
<li>Advanced Exploit Shield</li>
|
|
227
|
-
<li>CRM & Cloud Integrations</li>
|
|
228
|
-
<li>Up to 10 sites</li>
|
|
229
|
-
<li>Custom Bridge Script</li>
|
|
230
|
-
<li>Stealth Mode Pro</li>
|
|
231
|
-
<li>Private CDN + 1h support</li>
|
|
232
|
-
</ul>
|
|
233
|
-
<a href="/register" class="btn btn-primary" style="width:100%;">Start Pro Trial</a>
|
|
234
|
-
</div>
|
|
235
|
-
|
|
236
|
-
<div class="pricing-card">
|
|
237
|
-
<div class="pricing-tier">Enterprise</div>
|
|
238
|
-
<div class="pricing-price">Custom</div>
|
|
239
|
-
<div class="pricing-desc">Unlimited scale with compliance & SLA.</div>
|
|
240
|
-
<ul class="pricing-features">
|
|
241
|
-
<li>Everything in Pro</li>
|
|
242
|
-
<li>Unlimited sites & agents</li>
|
|
243
|
-
<li>Multi-tenant management</li>
|
|
244
|
-
<li>Extended Audit & Compliance</li>
|
|
245
|
-
<li>Virtual Sandbox</li>
|
|
246
|
-
<li>SSO / SAML</li>
|
|
247
|
-
<li>15-min SLA guarantee</li>
|
|
248
|
-
<li>Custom development</li>
|
|
249
|
-
</ul>
|
|
250
|
-
<a href="mailto:sales@webagentbridge.com" class="btn btn-secondary" style="width:100%;">Contact Sales</a>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
|
|
254
|
-
<div style="text-align:center;margin-top:40px;">
|
|
255
|
-
<a href="/premium" class="btn btn-ghost" style="color:var(--accent-purple);">
|
|
256
|
-
View all 12 premium services in detail →
|
|
257
|
-
</a>
|
|
258
|
-
</div>
|
|
259
|
-
</div>
|
|
260
|
-
</section>
|
|
261
|
-
|
|
262
|
-
<!-- ═══════════ CTA ═══════════ -->
|
|
263
|
-
<section class="section" style="background: var(--bg-secondary); text-align:center;">
|
|
264
|
-
<div class="container">
|
|
265
|
-
<h2 style="margin-bottom:16px;">Ready to Make Your Site <span class="gradient-text">AI-Ready</span>?</h2>
|
|
266
|
-
<p style="color:var(--text-secondary); max-width:540px; margin:0 auto 32px; font-size:1.1rem;">
|
|
267
|
-
Join the open
|
|
268
|
-
</p>
|
|
269
|
-
<div style="display:flex; gap:16px; justify-content:center; flex-wrap:wrap;">
|
|
270
|
-
<a href="/register" class="btn btn-primary btn-lg">Create Free Account</a>
|
|
271
|
-
<a href="/docs" class="btn btn-secondary btn-lg">View Documentation</a>
|
|
272
|
-
</div>
|
|
273
|
-
</div>
|
|
274
|
-
</section>
|
|
275
|
-
|
|
276
|
-
<!-- ═══════════ FOOTER ═══════════ -->
|
|
277
|
-
<footer class="footer">
|
|
278
|
-
<div class="container">
|
|
279
|
-
<div class="footer-grid">
|
|
280
|
-
<div class="footer-brand">
|
|
281
|
-
<a href="/" class="navbar-brand">
|
|
282
|
-
<div class="brand-icon">⚡</div>
|
|
283
|
-
<span>Web Agent Bridge</span>
|
|
284
|
-
</a>
|
|
285
|
-
<p>Open
|
|
286
|
-
</div>
|
|
287
|
-
<div class="footer-col">
|
|
288
|
-
<h4>Product</h4>
|
|
289
|
-
<ul>
|
|
290
|
-
<li><a href="#features">Features</a></li>
|
|
291
|
-
<li><a href="/premium">Premium Services</a></li>
|
|
292
|
-
<li><a href="#pricing">Pricing</a></li>
|
|
293
|
-
<li><a href="/docs">Documentation</a></li>
|
|
294
|
-
<li data-wab-auth="signed-in" style="display:none"><a href="/dashboard">Dashboard</a></li>
|
|
295
|
-
</ul>
|
|
296
|
-
</div>
|
|
297
|
-
<div class="footer-col">
|
|
298
|
-
<h4>Developers</h4>
|
|
299
|
-
<ul>
|
|
300
|
-
<li><a href="/docs#quick-start">Quick Start</a></li>
|
|
301
|
-
<li><a href="/docs#api-reference">API Reference</a></li>
|
|
302
|
-
<li><a href="/docs#examples">Examples</a></li>
|
|
303
|
-
<li><a href="#">GitHub</a></li>
|
|
304
|
-
</ul>
|
|
305
|
-
</div>
|
|
306
|
-
<div class="footer-col">
|
|
307
|
-
<h4>Legal</h4>
|
|
308
|
-
<ul>
|
|
309
|
-
<li><a href="/privacy">Privacy Policy</a></li>
|
|
310
|
-
<li><a href="/terms">Terms of Service</a></li>
|
|
311
|
-
<li><a href="/cookies">Cookie Policy</a></li>
|
|
312
|
-
</ul>
|
|
313
|
-
</div>
|
|
314
|
-
</div>
|
|
315
|
-
<div class="footer-bottom">
|
|
316
|
-
<span>© 2026 Web Agent Bridge. MIT License. Operated from the Netherlands.</span>
|
|
317
|
-
</div>
|
|
318
|
-
</div>
|
|
319
|
-
</footer>
|
|
320
|
-
|
|
321
|
-
<script src="/js/auth-nav.js"></script>
|
|
322
|
-
<script>
|
|
323
|
-
const navbar = document.getElementById('navbar');
|
|
324
|
-
window.addEventListener('scroll', () => {
|
|
325
|
-
navbar.style.background = window.scrollY > 50
|
|
326
|
-
? 'rgba(10, 14, 26, 0.95)'
|
|
327
|
-
: 'rgba(10, 14, 26, 0.8)';
|
|
328
|
-
});
|
|
329
|
-
</script>
|
|
330
|
-
<script src="/js/cookie-consent.js"></script>
|
|
331
|
-
</body>
|
|
332
|
-
</html>
|
|
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 — Open Protocol for AI Agent ↔ Website Interaction</title>
|
|
7
|
+
<meta name="description" content="Open protocol and runtime for AI agent ↔ website interaction. Discovery protocol, fairness engine, MCP integration, and standardized commands for the Agentic Web.">
|
|
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="#how-it-works">How It Works</a></li>
|
|
25
|
+
<li><a href="#pricing">Pricing</a></li>
|
|
26
|
+
<li><a href="/premium">Premium</a></li>
|
|
27
|
+
<li><a href="/docs">Docs</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-ghost" 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
|
+
<button class="mobile-menu-btn" onclick="document.querySelector('.navbar-links').classList.toggle('active')">☰</button>
|
|
35
|
+
</div>
|
|
36
|
+
</nav>
|
|
37
|
+
|
|
38
|
+
<!-- ═══════════ HERO ═══════════ -->
|
|
39
|
+
<section class="hero">
|
|
40
|
+
<div class="container">
|
|
41
|
+
<div class="hero-content fade-in">
|
|
42
|
+
<div class="hero-badge">
|
|
43
|
+
🚀 Open Protocol · v1.1.2
|
|
44
|
+
</div>
|
|
45
|
+
<h1>
|
|
46
|
+
The Open Standard for<br>
|
|
47
|
+
<span class="gradient-text">AI Agents</span> & <span class="gradient-text-accent">The Web</span>
|
|
48
|
+
</h1>
|
|
49
|
+
<p>
|
|
50
|
+
An open protocol + runtime that gives AI agents a standardized interface
|
|
51
|
+
to discover, interact with, and transact on any website — with discovery protocol, fairness engine, MCP integration, and full control for site owners.
|
|
52
|
+
</p>
|
|
53
|
+
<div class="hero-actions">
|
|
54
|
+
<a href="/register" class="btn btn-primary btn-lg">Start Free</a>
|
|
55
|
+
<a href="/docs" class="btn btn-secondary btn-lg">Read the Docs</a>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div class="hero-code fade-in fade-in-delay-2">
|
|
59
|
+
<code>
|
|
60
|
+
<span class="comment">// Add the bridge to your website</span><br>
|
|
61
|
+
<<span class="keyword">script</span>><br>
|
|
62
|
+
window.<span class="property">AIBridgeConfig</span> = {<br>
|
|
63
|
+
<span class="property">siteId</span>: <span class="string">"your-site-id"</span>,<br>
|
|
64
|
+
<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>
|
|
65
|
+
};<br>
|
|
66
|
+
</<span class="keyword">script</span>><br>
|
|
67
|
+
<<span class="keyword">script</span> <span class="property">src</span>=<span class="string">"/script/ai-agent-bridge.js"</span>></<span class="keyword">script</span>>
|
|
68
|
+
</code>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</section>
|
|
73
|
+
|
|
74
|
+
<!-- ═══════════ FEATURES ═══════════ -->
|
|
75
|
+
<section class="section" id="features">
|
|
76
|
+
<div class="container">
|
|
77
|
+
<div class="section-header">
|
|
78
|
+
<span class="label">Features</span>
|
|
79
|
+
<h2>Everything AI Agents Need</h2>
|
|
80
|
+
<p>A complete interface layer that makes websites AI-ready with security and control built in.</p>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="grid-3">
|
|
84
|
+
<div class="card fade-in">
|
|
85
|
+
<div class="card-icon blue">🎯</div>
|
|
86
|
+
<h3>Auto-Discovery</h3>
|
|
87
|
+
<p>Automatically detects buttons, forms, and navigation elements — generating precise CSS selectors and action descriptions for AI agents.</p>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="card fade-in fade-in-delay-1">
|
|
90
|
+
<div class="card-icon purple">🔐</div>
|
|
91
|
+
<h3>Permission System</h3>
|
|
92
|
+
<p>Granular control over what AI agents can do. Enable clicking, form filling, API access, and more — each toggled independently.</p>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="card fade-in fade-in-delay-2">
|
|
95
|
+
<div class="card-icon cyan">⚡</div>
|
|
96
|
+
<h3>Standardized Commands</h3>
|
|
97
|
+
<p>Unified <code>window.AICommands</code> interface that any AI agent can read and execute — no more DOM guessing.</p>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="card fade-in fade-in-delay-1">
|
|
100
|
+
<div class="card-icon green">🛡️</div>
|
|
101
|
+
<h3>Rate Limiting</h3>
|
|
102
|
+
<p>Built-in rate limiting prevents abuse. Configure max calls per minute to protect your site from aggressive automation.</p>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="card fade-in fade-in-delay-2">
|
|
105
|
+
<div class="card-icon orange">📊</div>
|
|
106
|
+
<h3>Analytics Dashboard</h3>
|
|
107
|
+
<p>Track how AI agents interact with your site. See which actions are used most, success rates, and usage patterns.</p>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="card fade-in fade-in-delay-3">
|
|
110
|
+
<div class="card-icon pink">🔌</div>
|
|
111
|
+
<h3>Custom Actions</h3>
|
|
112
|
+
<p>Register your own actions with custom handlers. Create complex workflows that AI agents can trigger with a single command.</p>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</section>
|
|
117
|
+
|
|
118
|
+
<!-- ═══════════ HOW IT WORKS ═══════════ -->
|
|
119
|
+
<section class="section" id="how-it-works" style="background: var(--bg-secondary);">
|
|
120
|
+
<div class="container">
|
|
121
|
+
<div class="section-header">
|
|
122
|
+
<span class="label">How It Works</span>
|
|
123
|
+
<h2>Three Steps to AI-Ready</h2>
|
|
124
|
+
<p>Get your website ready for AI agents in minutes, not days.</p>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<div class="grid-3">
|
|
128
|
+
<div class="card" style="text-align:center;">
|
|
129
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">1️⃣</div>
|
|
130
|
+
<h3>Add the Script</h3>
|
|
131
|
+
<p>Include the bridge script in your HTML with your configuration. Set permissions, restrictions, and your license key.</p>
|
|
132
|
+
</div>
|
|
133
|
+
<div class="card" style="text-align:center;">
|
|
134
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">2️⃣</div>
|
|
135
|
+
<h3>Configure Permissions</h3>
|
|
136
|
+
<p>Use the dashboard to fine-tune which actions AI agents can perform. Block sensitive areas and set rate limits.</p>
|
|
137
|
+
</div>
|
|
138
|
+
<div class="card" style="text-align:center;">
|
|
139
|
+
<div style="font-size:2.5rem; margin-bottom:16px;">3️⃣</div>
|
|
140
|
+
<h3>AI Agents Connect</h3>
|
|
141
|
+
<p>AI agents read <code>window.AICommands</code>, discover available actions, and execute them precisely — no DOM scraping needed.</p>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<div style="margin-top:48px;">
|
|
146
|
+
<div class="code-block">
|
|
147
|
+
<div class="code-header">
|
|
148
|
+
<div class="code-dots"><span></span><span></span><span></span></div>
|
|
149
|
+
<span class="code-lang">JavaScript — AI Agent Side</span>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="code-body">
|
|
152
|
+
<pre><span class="cm">// AI Agent reads available commands</span>
|
|
153
|
+
<span class="kw">const</span> bridge = window.<span class="prop">AICommands</span>;
|
|
154
|
+
|
|
155
|
+
<span class="cm">// Discover all available actions</span>
|
|
156
|
+
<span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
|
|
157
|
+
console.<span class="fn">log</span>(actions);
|
|
158
|
+
<span class="cm">// → [{ name: "signup", trigger: "click", ... }, ...]</span>
|
|
159
|
+
|
|
160
|
+
<span class="cm">// Execute a form fill action</span>
|
|
161
|
+
<span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
|
|
162
|
+
<span class="prop">name</span>: <span class="str">"John Doe"</span>,
|
|
163
|
+
<span class="prop">email</span>: <span class="str">"john@example.com"</span>,
|
|
164
|
+
<span class="prop">message</span>: <span class="str">"Hello from AI!"</span>
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
<span class="cm">// Wait for dynamic content</span>
|
|
168
|
+
<span class="kw">await</span> bridge.<span class="fn">waitForElement</span>(<span class="str">".success-message"</span>);</pre>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</section>
|
|
174
|
+
|
|
175
|
+
<!-- ═══════════ PRICING ═══════════ -->
|
|
176
|
+
<section class="section" id="pricing">
|
|
177
|
+
<div class="container">
|
|
178
|
+
<div class="section-header">
|
|
179
|
+
<span class="label">Pricing</span>
|
|
180
|
+
<h2>Simple, Transparent Pricing</h2>
|
|
181
|
+
<p>Start free, upgrade when you need advanced features. Open source core forever.</p>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<div class="grid-4">
|
|
185
|
+
<div class="pricing-card">
|
|
186
|
+
<div class="pricing-tier">Free</div>
|
|
187
|
+
<div class="pricing-price">$0 <span>/mo</span></div>
|
|
188
|
+
<div class="pricing-desc">Personal projects and experimentation.</div>
|
|
189
|
+
<ul class="pricing-features">
|
|
190
|
+
<li>Auto-discovery of actions</li>
|
|
191
|
+
<li>Click & scroll permissions</li>
|
|
192
|
+
<li>Rate limiting (60/min)</li>
|
|
193
|
+
<li>Basic logging</li>
|
|
194
|
+
<li>1 site</li>
|
|
195
|
+
<li>Community support</li>
|
|
196
|
+
<li class="disabled">Form filling</li>
|
|
197
|
+
<li class="disabled">Analytics dashboard</li>
|
|
198
|
+
</ul>
|
|
199
|
+
<a href="/register" class="btn btn-secondary" style="width:100%;">Get Started Free</a>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<div class="pricing-card">
|
|
203
|
+
<div class="pricing-tier">Starter</div>
|
|
204
|
+
<div class="pricing-price">$9 <span>/mo</span></div>
|
|
205
|
+
<div class="pricing-desc">Small sites with basic analytics & protection.</div>
|
|
206
|
+
<ul class="pricing-features">
|
|
207
|
+
<li>Everything in Free</li>
|
|
208
|
+
<li>Form filling & submit</li>
|
|
209
|
+
<li>Agent Traffic Intelligence</li>
|
|
210
|
+
<li>Smart Actions (basic)</li>
|
|
211
|
+
<li>Up to 3 sites</li>
|
|
212
|
+
<li>Automated login support</li>
|
|
213
|
+
<li>Same-day email support</li>
|
|
214
|
+
<li class="disabled">API access</li>
|
|
215
|
+
</ul>
|
|
216
|
+
<a href="/register" class="btn btn-secondary" style="width:100%;">Start Starter</a>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<div class="pricing-card featured">
|
|
220
|
+
<div class="pricing-tier">Pro</div>
|
|
221
|
+
<div class="pricing-price">$29 <span>/mo</span></div>
|
|
222
|
+
<div class="pricing-desc">Full power for businesses and teams.</div>
|
|
223
|
+
<ul class="pricing-features">
|
|
224
|
+
<li>Everything in Starter</li>
|
|
225
|
+
<li>Internal API access</li>
|
|
226
|
+
<li>Advanced Exploit Shield</li>
|
|
227
|
+
<li>CRM & Cloud Integrations</li>
|
|
228
|
+
<li>Up to 10 sites</li>
|
|
229
|
+
<li>Custom Bridge Script</li>
|
|
230
|
+
<li>Stealth Mode Pro</li>
|
|
231
|
+
<li>Private CDN + 1h support</li>
|
|
232
|
+
</ul>
|
|
233
|
+
<a href="/register" class="btn btn-primary" style="width:100%;">Start Pro Trial</a>
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<div class="pricing-card">
|
|
237
|
+
<div class="pricing-tier">Enterprise</div>
|
|
238
|
+
<div class="pricing-price">Custom</div>
|
|
239
|
+
<div class="pricing-desc">Unlimited scale with compliance & SLA.</div>
|
|
240
|
+
<ul class="pricing-features">
|
|
241
|
+
<li>Everything in Pro</li>
|
|
242
|
+
<li>Unlimited sites & agents</li>
|
|
243
|
+
<li>Multi-tenant management</li>
|
|
244
|
+
<li>Extended Audit & Compliance</li>
|
|
245
|
+
<li>Virtual Sandbox</li>
|
|
246
|
+
<li>SSO / SAML</li>
|
|
247
|
+
<li>15-min SLA guarantee</li>
|
|
248
|
+
<li>Custom development</li>
|
|
249
|
+
</ul>
|
|
250
|
+
<a href="mailto:sales@webagentbridge.com" class="btn btn-secondary" style="width:100%;">Contact Sales</a>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<div style="text-align:center;margin-top:40px;">
|
|
255
|
+
<a href="/premium" class="btn btn-ghost" style="color:var(--accent-purple);">
|
|
256
|
+
View all 12 premium services in detail →
|
|
257
|
+
</a>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</section>
|
|
261
|
+
|
|
262
|
+
<!-- ═══════════ CTA ═══════════ -->
|
|
263
|
+
<section class="section" style="background: var(--bg-secondary); text-align:center;">
|
|
264
|
+
<div class="container">
|
|
265
|
+
<h2 style="margin-bottom:16px;">Ready to Make Your Site <span class="gradient-text">AI-Ready</span>?</h2>
|
|
266
|
+
<p style="color:var(--text-secondary); max-width:540px; margin:0 auto 32px; font-size:1.1rem;">
|
|
267
|
+
Join the open standard that's powering the next generation of AI agent ↔ website interaction.
|
|
268
|
+
</p>
|
|
269
|
+
<div style="display:flex; gap:16px; justify-content:center; flex-wrap:wrap;">
|
|
270
|
+
<a href="/register" class="btn btn-primary btn-lg">Create Free Account</a>
|
|
271
|
+
<a href="/docs" class="btn btn-secondary btn-lg">View Documentation</a>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
</section>
|
|
275
|
+
|
|
276
|
+
<!-- ═══════════ FOOTER ═══════════ -->
|
|
277
|
+
<footer class="footer">
|
|
278
|
+
<div class="container">
|
|
279
|
+
<div class="footer-grid">
|
|
280
|
+
<div class="footer-brand">
|
|
281
|
+
<a href="/" class="navbar-brand">
|
|
282
|
+
<div class="brand-icon">⚡</div>
|
|
283
|
+
<span>Web Agent Bridge</span>
|
|
284
|
+
</a>
|
|
285
|
+
<p>Open protocol + runtime for AI agent ↔ website interaction. Built for the Agentic Web.</p>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="footer-col">
|
|
288
|
+
<h4>Product</h4>
|
|
289
|
+
<ul>
|
|
290
|
+
<li><a href="#features">Features</a></li>
|
|
291
|
+
<li><a href="/premium">Premium Services</a></li>
|
|
292
|
+
<li><a href="#pricing">Pricing</a></li>
|
|
293
|
+
<li><a href="/docs">Documentation</a></li>
|
|
294
|
+
<li data-wab-auth="signed-in" style="display:none"><a href="/dashboard">Dashboard</a></li>
|
|
295
|
+
</ul>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="footer-col">
|
|
298
|
+
<h4>Developers</h4>
|
|
299
|
+
<ul>
|
|
300
|
+
<li><a href="/docs#quick-start">Quick Start</a></li>
|
|
301
|
+
<li><a href="/docs#api-reference">API Reference</a></li>
|
|
302
|
+
<li><a href="/docs#examples">Examples</a></li>
|
|
303
|
+
<li><a href="#">GitHub</a></li>
|
|
304
|
+
</ul>
|
|
305
|
+
</div>
|
|
306
|
+
<div class="footer-col">
|
|
307
|
+
<h4>Legal</h4>
|
|
308
|
+
<ul>
|
|
309
|
+
<li><a href="/privacy">Privacy Policy</a></li>
|
|
310
|
+
<li><a href="/terms">Terms of Service</a></li>
|
|
311
|
+
<li><a href="/cookies">Cookie Policy</a></li>
|
|
312
|
+
</ul>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
<div class="footer-bottom">
|
|
316
|
+
<span>© 2026 Web Agent Bridge. MIT License. Operated from the Netherlands.</span>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
</footer>
|
|
320
|
+
|
|
321
|
+
<script src="/js/auth-nav.js"></script>
|
|
322
|
+
<script>
|
|
323
|
+
const navbar = document.getElementById('navbar');
|
|
324
|
+
window.addEventListener('scroll', () => {
|
|
325
|
+
navbar.style.background = window.scrollY > 50
|
|
326
|
+
? 'rgba(10, 14, 26, 0.95)'
|
|
327
|
+
: 'rgba(10, 14, 26, 0.8)';
|
|
328
|
+
});
|
|
329
|
+
</script>
|
|
330
|
+
<script src="/js/cookie-consent.js"></script>
|
|
331
|
+
</body>
|
|
332
|
+
</html>
|