-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathquickstart.html
More file actions
225 lines (213 loc) · 18.5 KB
/
quickstart.html
File metadata and controls
225 lines (213 loc) · 18.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quickstart — Observer Protocol</title>
<meta name="description" content="Get your agent a Lightning wallet and verified identity on Observer Protocol in 30 minutes.">
<link rel="stylesheet" href="shared-styles.css">
</head>
<body>
<nav class="nav">
<a href="index.html" class="nav-logo">Observer Protocol</a>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="architecture.html">Architecture</a></li>
<li><a href="spec.html">Spec</a></li>
<li><a href="registry.html">Registry</a></li>
<li><a href="demo.html">Demo</a></li>
<li><a href="sdk.html">SDK</a></li>
<li><a href="api.html">API</a></li>
<li><a href="quickstart.html" class="active">Quickstart</a></li>
</ul>
</nav>
<div class="page">
<section style="padding: 3rem 0 1rem;">
<div class="container">
<div class="section-label">Get Started</div>
<h1 style="font-size:clamp(1.6rem,4vw,2.4rem);font-weight:600;margin-bottom:1rem;">Add Your Agent in 30 Minutes</h1>
<p style="font-size:13px;color:var(--text-secondary);max-width:560px;font-family:var(--font-sans);line-height:1.8;">
Choose your path. Both give your agent a cryptographically verified identity and payment history on Observer Protocol.
</p>
</div>
</section>
<section style="padding: 2rem 0 4rem;">
<div class="container">
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:800px;">
<!-- Lightning card -->
<a href="quickstart-lightning.html" style="text-decoration:none;display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:2rem;transition:border-color 0.2s;" onmouseover="this.style.borderColor='var(--orange)'" onmouseout="this.style.borderColor='var(--border)'">
<div style="font-size:2.5rem;margin-bottom:1.25rem;">⚡</div>
<div style="font-size:11px;color:var(--orange);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.5rem;">Lightning Quickstart</div>
<h2 style="font-size:17px;color:var(--text-primary);margin-bottom:0.75rem;font-weight:600;">Your Agent Needs Money. And an Identity.</h2>
<p style="font-size:13px;color:var(--text-secondary);font-family:var(--font-sans);margin-bottom:1.5rem;line-height:1.7;">
Deploy a self-custodial Lightning wallet via MDK-Cloudflare and register to Observer Protocol. No server required. ~30 minutes.
</p>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem;">
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">MDK-Cloudflare</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">~30 min</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">No server</span>
</div>
<span style="font-size:13px;color:var(--orange);font-weight:500;">Read the guide →</span>
</a>
<!-- Tether WDK card -->
<a href="quickstart-tether.html" style="text-decoration:none;display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:2rem;transition:border-color 0.2s;" onmouseover="this.style.borderColor='#26A17B'" onmouseout="this.style.borderColor='var(--border)'">
<div style="font-size:2.5rem;margin-bottom:1.25rem;">₮</div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
<span style="font-size:11px;color:#26A17B;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;">Tether WDK</span>
<span style="font-size:10px;background:#26A17B;color:#fff;border-radius:4px;padding:1px 6px;font-weight:600;">NEW</span>
</div>
<h2 style="font-size:17px;color:var(--text-primary);margin-bottom:0.75rem;font-weight:600;">Self-Custodial USDT + BTC Wallets</h2>
<p style="font-size:13px;color:var(--text-secondary);font-family:var(--font-sans);margin-bottom:1.5rem;line-height:1.7;">
Add Tether WDK for self-custodial USDT on Ethereum/Polygon and Bitcoin. Full Observer Protocol bilateral verification included.
</p>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem;">
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">USDT/BTC</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">~25 min</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">BIP-39</span>
</div>
<span style="font-size:13px;color:#26A17B;font-weight:500;">Read the guide →</span>
</a>
<!-- OWS card -->
<a href="quickstart-ows.html" style="text-decoration:none;display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:2rem;transition:border-color 0.2s;" onmouseover="this.style.borderColor='#667eea'" onmouseout="this.style.borderColor='var(--border)'">
<div style="font-size:2.5rem;margin-bottom:1.25rem;">🔐</div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
<span style="font-size:11px;color:#667eea;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;">OWS Quickstart</span>
<span style="font-size:10px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:#fff;border-radius:4px;padding:1px 6px;font-weight:600;">NEW</span>
</div>
<h2 style="font-size:17px;color:var(--text-primary);margin-bottom:0.75rem;font-weight:600;">One Vault, All Chains</h2>
<p style="font-size:13px;color:var(--text-secondary);font-family:var(--font-sans);margin-bottom:1.5rem;line-height:1.7;">
Already using OWS? Register your OWS-provisioned agent on Observer Protocol in under 5 minutes. BIP-44 derivation paths for EVM, Solana, and Bitcoin.
</p>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem;">
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">OWS</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">~5 min</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">Multi-chain</span>
</div>
<span style="font-size:13px;color:#667eea;font-weight:500;">Read the guide →</span>
</a>
<!-- Solana card -->
<a href="quickstart-solana.html" style="text-decoration:none;display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:2rem;transition:border-color 0.2s;" onmouseover="this.style.borderColor='#9945ff'" onmouseout="this.style.borderColor='var(--border)'">
<div style="font-size:2.5rem;margin-bottom:1.25rem;">☀</div>
<div style="font-size:11px;color:#9945ff;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;margin-bottom:0.5rem;">Solana Quickstart</div>
<h2 style="font-size:17px;color:var(--text-primary);margin-bottom:0.75rem;font-weight:600;">Ed25519 Identity + x402 Payments</h2>
<p style="font-size:13px;color:var(--text-secondary);font-family:var(--font-sans);margin-bottom:1.5rem;line-height:1.7;">
Build Solana-native agents with Ed25519 keypairs. Register on Observer Protocol and build portable reputation across rails. Fast finality, sub-cent fees.
</p>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem;">
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">Ed25519</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">~25 min</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">x402 ready</span>
</div>
<span style="font-size:13px;color:#9945ff;font-weight:500;">Read the guide →</span>
</a>
<!-- x402 card -->
<a href="quickstart-x402.html" style="text-decoration:none;display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:2rem;transition:border-color 0.2s;" onmouseover="this.style.borderColor='var(--orange)'" onmouseout="this.style.borderColor='var(--border)'">
<div style="font-size:2.5rem;margin-bottom:1.25rem;">◈</div>
<div style="font-size:11px;color:var(--orange);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.5rem;">x402 / L402 Quickstart</div>
<h2 style="font-size:17px;color:var(--text-primary);margin-bottom:0.75rem;font-weight:600;">HTTP-Native Machine Payments</h2>
<p style="font-size:13px;color:var(--text-secondary);font-family:var(--font-sans);margin-bottom:1.5rem;line-height:1.7;">
Make your agent pay for data over HTTP/402 and attest every transaction to Observer Protocol. Any Lightning wallet works. ~20 minutes.
</p>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem;">
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">x402 + L402</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">~20 min</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">Live demo included</span>
</div>
<span style="font-size:13px;color:var(--orange);font-weight:500;">Read the guide →</span>
</a>
<!-- lnget card -->
<a href="quickstart-lnget.html" style="text-decoration:none;display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:2rem;transition:border-color 0.2s;opacity:0.7;" onmouseover="this.style.borderColor='var(--orange)';this.style.opacity='1'" onmouseout="this.style.borderColor='var(--border)';this.style.opacity='0.7'">
<div style="font-size:2.5rem;margin-bottom:1.25rem;">🔗</div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
<span style="font-size:11px;color:var(--orange);letter-spacing:0.08em;text-transform:uppercase;">lnget + Observer Protocol</span>
<span style="font-size:10px;background:var(--orange);color:#000;border-radius:4px;padding:1px 6px;font-weight:600;">NEW</span>
</div>
<h2 style="font-size:17px;color:var(--text-primary);margin-bottom:0.75rem;font-weight:600;">Claim Your Existing L402 History</h2>
<p style="font-size:13px;color:var(--text-secondary);font-family:var(--font-sans);margin-bottom:1.5rem;line-height:1.7;">
Already using lnget? Sync your existing L402 payment history to Observer Protocol automatically. Your reputation is already built — just claim it.
</p>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem;">
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">lnget users</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">~5 min</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">Retroactive</span>
</div>
<span style="font-size:13px;color:var(--orange);font-weight:500;">Read the guide →</span>
</a>
<!-- Stripe x402 card -->
<a href="quickstart-stripe.html" style="text-decoration:none;display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:2rem;transition:border-color 0.2s;" onmouseover="this.style.borderColor='#635bff'" onmouseout="this.style.borderColor='var(--border)'">
<div style="font-size:2.5rem;margin-bottom:1.25rem;">💳</div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
<span style="font-size:11px;color:#635bff;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;">Stripe x402</span>
<span style="font-size:10px;background:#635bff;color:#fff;border-radius:4px;padding:1px 6px;font-weight:600;">NEW</span>
</div>
<h2 style="font-size:17px;color:var(--text-primary);margin-bottom:0.75rem;font-weight:600;">Add Trust to Machine Payments</h2>
<p style="font-size:13px;color:var(--text-secondary);font-family:var(--font-sans);margin-bottom:1.5rem;line-height:1.7;">
Using Stripe machine payments or x402? Add OP reputation checks to your seller in one middleware line. EVM wallet lookup included.
</p>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem;">
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">Node.js / Python</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">< 2 min</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">1 line middleware</span>
</div>
<span style="font-size:13px;color:#635bff;font-weight:500;">Read the guide →</span>
</a>
<!-- Already have L402 card -->
<a href="quickstart-l402.html" style="text-decoration:none;display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:2rem;transition:border-color 0.2s;" onmouseover="this.style.borderColor='var(--orange)'" onmouseout="this.style.borderColor='var(--border)'">
<div style="font-size:2.5rem;margin-bottom:1.25rem;">⚡</div>
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
<span style="font-size:11px;color:var(--orange);letter-spacing:0.08em;text-transform:uppercase;">Already Have L402</span>
<span style="font-size:10px;background:var(--orange);color:#000;border-radius:4px;padding:1px 6px;font-weight:600;">FASTEST</span>
</div>
<h2 style="font-size:17px;color:var(--text-primary);margin-bottom:0.75rem;font-weight:600;">Add Reputation in 2 Minutes</h2>
<p style="font-size:13px;color:var(--text-secondary);font-family:var(--font-sans);margin-bottom:1.5rem;line-height:1.7;">
L402 already working? One POST after each payment is all it takes. The preimage is the proof — no new keys, no new wallet, no registration required to start.
</p>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem;">
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">Python / JS / Go</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">< 2 min</span>
<span style="font-size:10px;background:var(--bg-2);border:1px solid var(--border);border-radius:9999px;padding:3px 10px;color:var(--text-secondary);">3 lines of code</span>
</div>
<span style="font-size:13px;color:var(--orange);font-weight:500;">Read the guide →</span>
</a>
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div>
<div class="footer-brand">Observer Protocol</div>
<p style="font-size:12px;color:var(--text-dim);margin-top:0.5rem;font-family:var(--font-sans);">The trust layer for the agentic economy.</p>
</div>
<div>
<div style="font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem;">Quickstart</div>
<ul style="list-style:none;">
<li><a href="quickstart-lightning.html" class="footer-link">⚡ Lightning Wallet</a></li>
<li><a href="quickstart-ows.html" class="footer-link">🔐 OWS</a></li>
<li><a href="quickstart-tether.html" class="footer-link">₮ Tether WDK</a></li>
<li><a href="quickstart-x402.html" class="footer-link">◈ x402 / L402</a></li>
<li><a href="quickstart-stripe.html" class="footer-link">💳 Stripe / MPP</a></li>
</ul>
</div>
<div>
<div style="font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem;">Docs</div>
<ul style="list-style:none;">
<li><a href="api.html" class="footer-link">API Reference</a></li>
<li><a href="sdk.html" class="footer-link">SDK</a></li>
<li><a href="architecture.html" class="footer-link">Architecture</a></li>
</ul>
</div>
<div>
<div style="font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.75rem;">Community</div>
<ul style="list-style:none;">
<li><a href="https://github.com/observer-protocol" target="_blank" class="footer-link">GitHub</a></li>
<li><a href="registry.html" class="footer-link">Registry</a></li>
<li><a href="demo.html" class="footer-link">Live Demo</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>