openclaw-mcp 1.2.0 → 1.3.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/README.md +1 -0
- package/dist/index.js +296 -45
- package/docs/CNAME +1 -0
- package/docs/assets/og-image.png +0 -0
- package/docs/configuration.md +63 -20
- package/docs/index.html +653 -0
- package/package.json +1 -1
package/docs/index.html
ADDED
|
@@ -0,0 +1,653 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>openclaw-mcp | Bridge Claude.ai to OpenClaw</title>
|
|
7
|
+
<meta name="description" content="Connect Claude.ai to your self-hosted OpenClaw AI agent via the Model Context Protocol." />
|
|
8
|
+
<!-- SEO -->
|
|
9
|
+
<meta name="keywords" content="openclaw, mcp, model context protocol, claude, ai agent, docker, oauth, async tasks" />
|
|
10
|
+
<meta name="author" content="Tomas Grasl" />
|
|
11
|
+
<link rel="canonical" href="https://openclaw-mcp.cloud/" />
|
|
12
|
+
<!-- Open Graph -->
|
|
13
|
+
<meta property="og:type" content="website" />
|
|
14
|
+
<meta property="og:title" content="openclaw-mcp | Bridge Claude.ai to OpenClaw" />
|
|
15
|
+
<meta property="og:description" content="AI orchestrating AI. Connect Claude.ai to your self-hosted OpenClaw AI agent via the Model Context Protocol." />
|
|
16
|
+
<meta property="og:url" content="https://openclaw-mcp.cloud/" />
|
|
17
|
+
<meta property="og:site_name" content="openclaw-mcp" />
|
|
18
|
+
<meta property="og:image" content="https://openclaw-mcp.cloud/assets/og-image.png" />
|
|
19
|
+
<!-- Twitter Card -->
|
|
20
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
21
|
+
<meta name="twitter:title" content="openclaw-mcp | Bridge Claude.ai to OpenClaw" />
|
|
22
|
+
<meta name="twitter:description" content="AI orchestrating AI. Connect Claude.ai to your self-hosted OpenClaw AI agent via MCP." />
|
|
23
|
+
<meta name="twitter:image" content="https://openclaw-mcp.cloud/assets/og-image.png" />
|
|
24
|
+
<!-- Favicon -->
|
|
25
|
+
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦞</text></svg>" />
|
|
26
|
+
<!-- Google Analytics -->
|
|
27
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LMDZT83LBK"></script>
|
|
28
|
+
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-LMDZT83LBK');</script>
|
|
29
|
+
<!-- Fonts -->
|
|
30
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
31
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
32
|
+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Syne:wght@800&display=swap" rel="stylesheet" />
|
|
33
|
+
<style>
|
|
34
|
+
/* === Reset & Base === */
|
|
35
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
36
|
+
html { scroll-behavior: smooth; }
|
|
37
|
+
body {
|
|
38
|
+
background-color: #080808;
|
|
39
|
+
color: #ffffff;
|
|
40
|
+
font-family: 'JetBrains Mono', monospace;
|
|
41
|
+
-webkit-font-smoothing: antialiased;
|
|
42
|
+
-moz-osx-font-smoothing: grayscale;
|
|
43
|
+
line-height: 1.6;
|
|
44
|
+
}
|
|
45
|
+
a { color: inherit; text-decoration: none; }
|
|
46
|
+
button { cursor: pointer; border: none; background: none; font-family: inherit; }
|
|
47
|
+
table { border-collapse: collapse; }
|
|
48
|
+
::selection { background-color: #e24b4a; color: white; }
|
|
49
|
+
img { max-width: 100%; }
|
|
50
|
+
pre, code { font-family: 'JetBrains Mono', monospace; }
|
|
51
|
+
|
|
52
|
+
/* === Design Tokens === */
|
|
53
|
+
:root {
|
|
54
|
+
--black: #080808;
|
|
55
|
+
--accent: #e24b4a;
|
|
56
|
+
--darker: #0a0a0a;
|
|
57
|
+
--border: #1a1a1a;
|
|
58
|
+
--text: #a0a0a0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* === Layout === */
|
|
62
|
+
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
|
|
63
|
+
|
|
64
|
+
/* === Background Grid === */
|
|
65
|
+
.grid-overlay {
|
|
66
|
+
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
|
67
|
+
background-image:
|
|
68
|
+
linear-gradient(to right, var(--border) 1px, transparent 1px),
|
|
69
|
+
linear-gradient(to bottom, var(--border) 1px, transparent 1px);
|
|
70
|
+
background-size: 40px 40px;
|
|
71
|
+
mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
|
|
72
|
+
-webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* === Typography === */
|
|
76
|
+
.font-syne { font-family: 'Syne', sans-serif; }
|
|
77
|
+
.font-mono { font-family: 'JetBrains Mono', monospace; }
|
|
78
|
+
.text-accent { color: var(--accent); }
|
|
79
|
+
.text-muted { color: var(--text); }
|
|
80
|
+
.text-xs { font-size: 0.75rem; }
|
|
81
|
+
.text-sm { font-size: 0.875rem; }
|
|
82
|
+
.text-xl { font-size: 1.25rem; }
|
|
83
|
+
.text-2xl { font-size: 1.5rem; }
|
|
84
|
+
.text-3xl { font-size: 1.875rem; }
|
|
85
|
+
.uppercase { text-transform: uppercase; }
|
|
86
|
+
.tracking-wider { letter-spacing: 0.05em; }
|
|
87
|
+
.tracking-widest { letter-spacing: 0.1em; }
|
|
88
|
+
.tracking-tighter { letter-spacing: -0.05em; }
|
|
89
|
+
.leading-none { line-height: 1; }
|
|
90
|
+
.font-bold { font-weight: 700; }
|
|
91
|
+
.font-extrabold { font-weight: 800; }
|
|
92
|
+
.font-medium { font-weight: 500; }
|
|
93
|
+
|
|
94
|
+
/* === Brutalist Borders === */
|
|
95
|
+
.brutalist-border { border: 1px solid var(--border); }
|
|
96
|
+
.brutalist-border-accent { border: 2px solid var(--accent); }
|
|
97
|
+
|
|
98
|
+
/* === Animations === */
|
|
99
|
+
@keyframes fadeUp {
|
|
100
|
+
from { opacity: 0; transform: translateY(20px); }
|
|
101
|
+
to { opacity: 1; transform: translateY(0); }
|
|
102
|
+
}
|
|
103
|
+
@keyframes blink {
|
|
104
|
+
from, to { opacity: 1; }
|
|
105
|
+
50% { opacity: 0; }
|
|
106
|
+
}
|
|
107
|
+
.animate-fade-up {
|
|
108
|
+
opacity: 0;
|
|
109
|
+
animation: fadeUp 0.8s ease-out forwards;
|
|
110
|
+
}
|
|
111
|
+
.delay-200 { animation-delay: 200ms; }
|
|
112
|
+
.delay-400 { animation-delay: 400ms; }
|
|
113
|
+
.delay-600 { animation-delay: 600ms; }
|
|
114
|
+
.animate-cursor { animation: blink 1s step-end infinite; }
|
|
115
|
+
|
|
116
|
+
/* === Navigation === */
|
|
117
|
+
.nav {
|
|
118
|
+
position: fixed; top: 0; width: 100%; z-index: 50;
|
|
119
|
+
background: rgba(8,8,8,0.8); backdrop-filter: blur(12px);
|
|
120
|
+
-webkit-backdrop-filter: blur(12px);
|
|
121
|
+
border-bottom: 1px solid var(--border);
|
|
122
|
+
height: 4rem; display: flex; align-items: center;
|
|
123
|
+
}
|
|
124
|
+
.nav-inner {
|
|
125
|
+
display: flex; justify-content: space-between; align-items: center; width: 100%;
|
|
126
|
+
}
|
|
127
|
+
.nav-logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.05em; }
|
|
128
|
+
.nav-links {
|
|
129
|
+
display: none; gap: 2rem; font-size: 0.875rem;
|
|
130
|
+
text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; color: var(--text);
|
|
131
|
+
}
|
|
132
|
+
.nav-links a:hover { color: var(--accent); transition: color 0.2s; }
|
|
133
|
+
.nav-gh { display: flex; align-items: center; gap: 0; font-size: 0.75rem; font-weight: 700; }
|
|
134
|
+
.nav-gh-btn {
|
|
135
|
+
padding: 0.4rem 0.75rem; background: var(--accent); color: white;
|
|
136
|
+
display: flex; align-items: center; gap: 0.4rem; transition: background 0.2s;
|
|
137
|
+
}
|
|
138
|
+
.nav-gh-btn:hover { background: #dc2626; }
|
|
139
|
+
.nav-gh-badge {
|
|
140
|
+
padding: 0.4rem 0.6rem; border: 1px solid var(--border); color: #fff;
|
|
141
|
+
display: flex; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.05);
|
|
142
|
+
font-size: 0.7rem; font-weight: 500;
|
|
143
|
+
}
|
|
144
|
+
.nav-gh-badge svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.7; }
|
|
145
|
+
|
|
146
|
+
/* === Hero === */
|
|
147
|
+
.hero { position: relative; padding: 10rem 0 5rem; overflow: hidden; z-index: 10; text-align: center; }
|
|
148
|
+
.hero h1 { font-size: 3rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
|
|
149
|
+
.hero-sub {
|
|
150
|
+
margin-top: 2rem; font-size: 1.25rem; color: var(--text);
|
|
151
|
+
max-width: 48rem; margin-left: auto; margin-right: auto;
|
|
152
|
+
}
|
|
153
|
+
.hero-buttons { margin-top: 3rem; display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; }
|
|
154
|
+
.btn-primary {
|
|
155
|
+
padding: 1rem 2rem; background: var(--accent); color: white; font-weight: 700;
|
|
156
|
+
font-size: 1.125rem; width: 100%; text-align: center; transition: filter 0.2s;
|
|
157
|
+
}
|
|
158
|
+
.btn-primary:hover { filter: brightness(1.1); }
|
|
159
|
+
.btn-secondary {
|
|
160
|
+
padding: 1rem 2rem; border: 1px solid var(--border); color: white; font-weight: 700;
|
|
161
|
+
font-size: 1.125rem; width: 100%; text-align: center; transition: background 0.2s;
|
|
162
|
+
}
|
|
163
|
+
.btn-secondary:hover { background: rgba(255,255,255,0.05); }
|
|
164
|
+
.stats-bar {
|
|
165
|
+
margin-top: 4rem; display: flex; flex-wrap: wrap; justify-content: center;
|
|
166
|
+
gap: 2rem; font-size: 0.875rem; color: var(--text);
|
|
167
|
+
}
|
|
168
|
+
.stats-bar span { color: var(--accent); }
|
|
169
|
+
|
|
170
|
+
/* === Terminal === */
|
|
171
|
+
.terminal-section { padding: 5rem 0; position: relative; z-index: 10; }
|
|
172
|
+
.terminal { max-width: 56rem; margin: 0 auto; background: #0c0c0c; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); overflow: hidden; }
|
|
173
|
+
.terminal-header {
|
|
174
|
+
background: var(--border); padding: 0.75rem; display: flex; align-items: center;
|
|
175
|
+
justify-content: space-between; border-bottom: 1px solid var(--border);
|
|
176
|
+
}
|
|
177
|
+
.terminal-dots { display: flex; gap: 0.5rem; }
|
|
178
|
+
.terminal-dot { width: 0.75rem; height: 0.75rem; border: 1px solid var(--border); }
|
|
179
|
+
.terminal-dot-red { background: rgba(239,68,68,0.2); }
|
|
180
|
+
.terminal-dot-yellow { background: rgba(234,179,8,0.2); }
|
|
181
|
+
.terminal-dot-green { background: rgba(34,197,94,0.2); }
|
|
182
|
+
.terminal-title { font-size: 10px; color: var(--text); text-transform: uppercase; letter-spacing: 0.1em; }
|
|
183
|
+
.terminal-body { padding: 1.5rem; font-size: 0.875rem; line-height: 1.75; overflow-x: auto; }
|
|
184
|
+
.terminal-prompt { color: var(--accent); }
|
|
185
|
+
.terminal-output { margin-top: 0.5rem; color: #4ade80; }
|
|
186
|
+
.terminal-cursor { display: inline-block; width: 0.5rem; height: 1.25rem; background: var(--accent); margin-left: 0.5rem; vertical-align: middle; }
|
|
187
|
+
|
|
188
|
+
/* === How It Works === */
|
|
189
|
+
.how-section {
|
|
190
|
+
padding: 8rem 0; position: relative; z-index: 10;
|
|
191
|
+
background: var(--black); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
|
192
|
+
}
|
|
193
|
+
.how-section h2 { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 4rem; }
|
|
194
|
+
.how-grid { display: grid; grid-template-columns: 1fr; }
|
|
195
|
+
.how-step { padding: 2rem; border-bottom: 1px solid var(--border); transition: background 0.2s; }
|
|
196
|
+
.how-step:last-child { border-bottom: none; }
|
|
197
|
+
.how-step:hover { background: rgba(226,75,74,0.05); }
|
|
198
|
+
.how-step-num { color: var(--accent); font-size: 1.875rem; font-weight: 800; margin-bottom: 1rem; }
|
|
199
|
+
.how-step h3 { font-weight: 700; font-size: 1.25rem; margin-bottom: 0.5rem; }
|
|
200
|
+
.how-step p { color: var(--text); font-size: 0.875rem; }
|
|
201
|
+
|
|
202
|
+
/* === Features === */
|
|
203
|
+
.features-section { padding: 8rem 0; position: relative; z-index: 10; }
|
|
204
|
+
.features-section h2 { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 4rem; text-align: right; }
|
|
205
|
+
.features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
|
|
206
|
+
.feature-card {
|
|
207
|
+
padding: 2rem; border: 1px solid var(--border); background: var(--darker);
|
|
208
|
+
transition: border-color 0.2s;
|
|
209
|
+
}
|
|
210
|
+
.feature-card:hover { border-color: var(--accent); }
|
|
211
|
+
.feature-card h3 { font-weight: 800; font-size: 1.25rem; text-transform: uppercase; margin-bottom: 1rem; color: var(--accent); }
|
|
212
|
+
.feature-card p { color: var(--text); font-size: 0.875rem; line-height: 1.75; }
|
|
213
|
+
|
|
214
|
+
/* === Tools Table === */
|
|
215
|
+
.tools-section {
|
|
216
|
+
padding: 8rem 0; position: relative; z-index: 10;
|
|
217
|
+
background: var(--black); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
|
|
218
|
+
}
|
|
219
|
+
.tools-section h2 { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 4rem; }
|
|
220
|
+
.tools-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
|
|
221
|
+
.tools-col-header { border-left: 4px solid var(--accent); padding-left: 1rem; margin-bottom: 1.5rem; }
|
|
222
|
+
.tools-col-header h3 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; }
|
|
223
|
+
.tools-col-header p { color: var(--text); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
|
|
224
|
+
.tools-table { width: 100%; text-align: left; font-size: 0.875rem; }
|
|
225
|
+
.tools-table thead { background: var(--border); }
|
|
226
|
+
.tools-table th { padding: 1rem; border-right: 1px solid var(--border); }
|
|
227
|
+
.tools-table th:last-child { border-right: none; }
|
|
228
|
+
.tools-table td { padding: 1rem; border-top: 1px solid var(--border); }
|
|
229
|
+
.tools-table td:first-child { color: var(--accent); border-right: 1px solid var(--border); }
|
|
230
|
+
.tools-table td:last-child { color: var(--text); }
|
|
231
|
+
|
|
232
|
+
/* === Quick Start === */
|
|
233
|
+
.quickstart-section { padding: 8rem 0; position: relative; z-index: 10; }
|
|
234
|
+
.quickstart-inner { max-width: 56rem; margin: 0 auto; }
|
|
235
|
+
.quickstart-section h2 { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 4rem; text-align: center; }
|
|
236
|
+
.tabs-bar {
|
|
237
|
+
display: flex; border-bottom: 1px solid var(--border); background: var(--darker);
|
|
238
|
+
font-size: 0.75rem; text-transform: uppercase; overflow-x: auto;
|
|
239
|
+
}
|
|
240
|
+
.tab-btn {
|
|
241
|
+
padding: 1rem 1.5rem; color: var(--text); transition: color 0.2s;
|
|
242
|
+
white-space: nowrap; border-bottom: 2px solid transparent;
|
|
243
|
+
font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; text-transform: uppercase;
|
|
244
|
+
}
|
|
245
|
+
.tab-btn:hover { color: white; }
|
|
246
|
+
.tab-btn.active { border-bottom-color: var(--accent); color: white; }
|
|
247
|
+
.tab-content { padding: 1.5rem; background: var(--black); min-height: 300px; overflow-x: auto; }
|
|
248
|
+
.tab-panel { display: none; }
|
|
249
|
+
.tab-panel.active { display: block; }
|
|
250
|
+
.tab-comment { color: var(--text); margin-bottom: 1rem; font-size: 0.875rem; }
|
|
251
|
+
.tab-panel pre {
|
|
252
|
+
color: white; font-size: 0.875rem; line-height: 1.75;
|
|
253
|
+
white-space: pre; overflow-x: auto;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* === CTA === */
|
|
257
|
+
.cta-section {
|
|
258
|
+
padding: 8rem 0; position: relative; z-index: 10; text-align: center;
|
|
259
|
+
border-top: 1px solid var(--border);
|
|
260
|
+
}
|
|
261
|
+
.cta-section h2 { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 2rem; }
|
|
262
|
+
.cta-buttons { display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center; }
|
|
263
|
+
.cta-btn-primary {
|
|
264
|
+
padding: 1.25rem 2.5rem; background: var(--accent); color: white; font-weight: 700;
|
|
265
|
+
font-size: 1.25rem; border: 2px solid var(--accent); transition: filter 0.2s;
|
|
266
|
+
}
|
|
267
|
+
.cta-btn-primary:hover { filter: brightness(1.1); }
|
|
268
|
+
.cta-btn-secondary {
|
|
269
|
+
padding: 1.25rem 2.5rem; border: 1px solid var(--border); color: white;
|
|
270
|
+
font-weight: 700; font-size: 1.25rem; transition: background 0.2s;
|
|
271
|
+
}
|
|
272
|
+
.cta-btn-secondary:hover { background: rgba(255,255,255,0.05); }
|
|
273
|
+
|
|
274
|
+
/* === Footer === */
|
|
275
|
+
.footer { padding: 4rem 0; position: relative; z-index: 10; background: var(--darker); border-top: 1px solid var(--border); }
|
|
276
|
+
.footer-inner { display: flex; flex-direction: column; gap: 2rem; }
|
|
277
|
+
.footer-logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase; }
|
|
278
|
+
.footer-credit { margin-top: 1rem; color: var(--text); font-size: 0.875rem; }
|
|
279
|
+
.footer-credit a { color: white; text-decoration: underline; transition: color 0.2s; }
|
|
280
|
+
.footer-credit a:hover { color: var(--accent); }
|
|
281
|
+
.footer-links {
|
|
282
|
+
display: flex; flex-wrap: wrap; gap: 2rem; font-size: 0.75rem;
|
|
283
|
+
text-transform: uppercase; letter-spacing: 0.1em; color: var(--text);
|
|
284
|
+
}
|
|
285
|
+
.footer-links a:hover { color: var(--accent); transition: color 0.2s; }
|
|
286
|
+
.footer-bottom {
|
|
287
|
+
margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(26,26,26,0.5);
|
|
288
|
+
text-align: center; font-size: 10px; color: rgba(160,160,160,0.5);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* === Desktop (640px+) === */
|
|
292
|
+
@media (min-width: 640px) {
|
|
293
|
+
.nav-links { display: flex; }
|
|
294
|
+
.hero h1 { font-size: 6rem; }
|
|
295
|
+
.hero-sub { font-size: 1.5rem; }
|
|
296
|
+
.hero-buttons { flex-direction: row; }
|
|
297
|
+
.btn-primary, .btn-secondary { width: auto; }
|
|
298
|
+
.how-grid { grid-template-columns: repeat(4, 1fr); }
|
|
299
|
+
.how-step { border-bottom: none; border-right: 1px solid var(--border); }
|
|
300
|
+
.how-step:last-child { border-right: none; }
|
|
301
|
+
.features-grid { grid-template-columns: repeat(3, 1fr); }
|
|
302
|
+
.tools-grid { grid-template-columns: repeat(2, 1fr); }
|
|
303
|
+
.cta-section h2 { font-size: 3.75rem; }
|
|
304
|
+
.cta-buttons { flex-direction: row; }
|
|
305
|
+
.footer-inner { flex-direction: row; justify-content: space-between; align-items: center; }
|
|
306
|
+
.plugin-cards { grid-template-columns: repeat(3, 1fr) !important; }
|
|
307
|
+
}
|
|
308
|
+
</style>
|
|
309
|
+
</head>
|
|
310
|
+
<body>
|
|
311
|
+
<!-- Background Grid -->
|
|
312
|
+
<div class="grid-overlay"></div>
|
|
313
|
+
|
|
314
|
+
<!-- Navigation -->
|
|
315
|
+
<nav class="nav">
|
|
316
|
+
<div class="container nav-inner">
|
|
317
|
+
<div class="font-syne nav-logo">🦞 openclaw-mcp</div>
|
|
318
|
+
<div class="nav-links">
|
|
319
|
+
<a href="#how">How it works</a>
|
|
320
|
+
<a href="#features">Features</a>
|
|
321
|
+
<a href="#tools">Tools</a>
|
|
322
|
+
<a href="#quickstart">Quick start</a>
|
|
323
|
+
<a href="#plugin">Plugin</a>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="nav-gh">
|
|
326
|
+
<a class="nav-gh-btn" href="https://github.com/freema/openclaw-mcp" target="_blank" rel="noopener">
|
|
327
|
+
<svg viewBox="0 0 16 16" width="16" height="16" fill="white"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
|
328
|
+
GitHub
|
|
329
|
+
</a>
|
|
330
|
+
<span class="nav-gh-badge">
|
|
331
|
+
<svg viewBox="0 0 16 16"><path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/></svg>
|
|
332
|
+
<span id="nav-star-count">83</span>
|
|
333
|
+
</span>
|
|
334
|
+
<span class="nav-gh-badge">
|
|
335
|
+
<svg viewBox="0 0 16 16"><path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-.878a2.25 2.25 0 111.5 0v.878a2.25 2.25 0 01-2.25 2.25h-1.5v2.128a2.251 2.251 0 11-1.5 0V8.5h-1.5A2.25 2.25 0 013.5 6.25v-.878a2.25 2.25 0 111.5 0zM5 3.25a.75.75 0 10-1.5 0 .75.75 0 001.5 0zm6.75.75a.75.75 0 100-1.5.75.75 0 000 1.5zM8 12.75a.75.75 0 10-1.5 0 .75.75 0 001.5 0z"/></svg>
|
|
336
|
+
<span id="nav-fork-count">13</span>
|
|
337
|
+
</span>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
</nav>
|
|
341
|
+
|
|
342
|
+
<!-- Hero -->
|
|
343
|
+
<header class="hero">
|
|
344
|
+
<div class="container">
|
|
345
|
+
<h1 class="font-syne animate-fade-up">
|
|
346
|
+
Bridge Claude.ai <br /><span class="text-accent">to OpenClaw</span>
|
|
347
|
+
</h1>
|
|
348
|
+
<p class="hero-sub animate-fade-up delay-200">
|
|
349
|
+
AI orchestrating AI. Connect Claude.ai to your self-hosted OpenClaw AI agent via the Model Context Protocol.
|
|
350
|
+
</p>
|
|
351
|
+
<div class="hero-buttons animate-fade-up delay-400">
|
|
352
|
+
<a class="btn-primary" href="#quickstart">Get started</a>
|
|
353
|
+
<a class="btn-secondary" href="https://github.com/freema/openclaw-mcp" target="_blank" rel="noopener">View on GitHub</a>
|
|
354
|
+
</div>
|
|
355
|
+
<!-- Stats Bar -->
|
|
356
|
+
<div class="stats-bar animate-fade-up delay-600">
|
|
357
|
+
<div><span id="star-count">83</span> stars</div>
|
|
358
|
+
<div><span id="fork-count">13</span> forks</div>
|
|
359
|
+
<div>MIT LICENSE</div>
|
|
360
|
+
<div>OAuth 2.1</div>
|
|
361
|
+
</div>
|
|
362
|
+
</div>
|
|
363
|
+
</header>
|
|
364
|
+
|
|
365
|
+
<!-- Demo GIF -->
|
|
366
|
+
<section class="terminal-section">
|
|
367
|
+
<div class="container">
|
|
368
|
+
<div class="terminal brutalist-border" style="max-width:56rem;margin:0 auto">
|
|
369
|
+
<div class="terminal-header">
|
|
370
|
+
<div class="terminal-dots">
|
|
371
|
+
<div class="terminal-dot terminal-dot-red brutalist-border"></div>
|
|
372
|
+
<div class="terminal-dot terminal-dot-yellow brutalist-border"></div>
|
|
373
|
+
<div class="terminal-dot terminal-dot-green brutalist-border"></div>
|
|
374
|
+
</div>
|
|
375
|
+
<div class="terminal-title font-mono">Claude.ai — openclaw-mcp demo</div>
|
|
376
|
+
<div style="width:3rem"></div>
|
|
377
|
+
</div>
|
|
378
|
+
<img src="assets/claude-ai-demo.gif" alt="openclaw-mcp demo — Claude.ai chatting with OpenClaw agent" style="width:100%;display:block" loading="lazy" />
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
</section>
|
|
382
|
+
|
|
383
|
+
<!-- How It Works -->
|
|
384
|
+
<section class="how-section" id="how">
|
|
385
|
+
<div class="container">
|
|
386
|
+
<h2 class="font-syne">How it works</h2>
|
|
387
|
+
<div class="how-grid brutalist-border">
|
|
388
|
+
<div class="how-step">
|
|
389
|
+
<div class="how-step-num font-syne">01</div>
|
|
390
|
+
<h3>Request</h3>
|
|
391
|
+
<p>Ask Claude.ai to perform a task using your private agent tools.</p>
|
|
392
|
+
</div>
|
|
393
|
+
<div class="how-step">
|
|
394
|
+
<div class="how-step-num font-syne">02</div>
|
|
395
|
+
<h3>Authorize</h3>
|
|
396
|
+
<p>One-time OAuth 2.1 handshake secures the bridge between platforms.</p>
|
|
397
|
+
</div>
|
|
398
|
+
<div class="how-step">
|
|
399
|
+
<div class="how-step-num font-syne">03</div>
|
|
400
|
+
<h3>Execute</h3>
|
|
401
|
+
<p>OpenClaw processes the task locally on your own infrastructure.</p>
|
|
402
|
+
</div>
|
|
403
|
+
<div class="how-step">
|
|
404
|
+
<div class="how-step-num font-syne">04</div>
|
|
405
|
+
<h3>Resolve</h3>
|
|
406
|
+
<p>Structured results flow back to Claude for immediate synthesis.</p>
|
|
407
|
+
</div>
|
|
408
|
+
</div>
|
|
409
|
+
</div>
|
|
410
|
+
</section>
|
|
411
|
+
|
|
412
|
+
<!-- Features -->
|
|
413
|
+
<section class="features-section" id="features">
|
|
414
|
+
<div class="container">
|
|
415
|
+
<h2 class="font-syne">Core Capabilities</h2>
|
|
416
|
+
<div class="features-grid">
|
|
417
|
+
<div class="feature-card">
|
|
418
|
+
<h3 class="font-syne">OAuth 2.1</h3>
|
|
419
|
+
<p>Modern, secure authorization flow. Your credentials never touch the MCP bridge directly.</p>
|
|
420
|
+
</div>
|
|
421
|
+
<div class="feature-card">
|
|
422
|
+
<h3 class="font-syne">Async Queue</h3>
|
|
423
|
+
<p>Handle long-running AI tasks without timeouts. Polling mechanisms built directly into the MCP tools.</p>
|
|
424
|
+
</div>
|
|
425
|
+
<div class="feature-card">
|
|
426
|
+
<h3 class="font-syne">Docker Ready</h3>
|
|
427
|
+
<p>Official lightweight images for zero-fuss deployment in any containerized environment.</p>
|
|
428
|
+
</div>
|
|
429
|
+
<div class="feature-card">
|
|
430
|
+
<h3 class="font-syne">Two Transports</h3>
|
|
431
|
+
<p>Supports both Stdio (for Desktop) and SSE (for remote hosting) transport layers out of the box.</p>
|
|
432
|
+
</div>
|
|
433
|
+
<div class="feature-card">
|
|
434
|
+
<h3 class="font-syne">Input Validation</h3>
|
|
435
|
+
<p>Strict Zod-based schema validation ensures Claude provides the exact parameters your agent needs.</p>
|
|
436
|
+
</div>
|
|
437
|
+
<div class="feature-card">
|
|
438
|
+
<h3 class="font-syne">Multi-Instance</h3>
|
|
439
|
+
<p>Orchestrate multiple OpenClaw gateways (prod, staging, dev) from a single MCP server with named instance routing.</p>
|
|
440
|
+
</div>
|
|
441
|
+
</div>
|
|
442
|
+
</div>
|
|
443
|
+
</section>
|
|
444
|
+
|
|
445
|
+
<!-- MCP Tools Table -->
|
|
446
|
+
<section class="tools-section" id="tools">
|
|
447
|
+
<div class="container">
|
|
448
|
+
<h2 class="font-syne">Available Tools</h2>
|
|
449
|
+
<div class="tools-grid">
|
|
450
|
+
<!-- Sync Column -->
|
|
451
|
+
<div>
|
|
452
|
+
<div class="tools-col-header">
|
|
453
|
+
<h3 class="font-syne">Synchronous</h3>
|
|
454
|
+
<p>Direct interaction</p>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="brutalist-border" style="overflow:hidden">
|
|
457
|
+
<table class="tools-table font-mono">
|
|
458
|
+
<thead><tr><th>Tool Name</th><th>Function</th></tr></thead>
|
|
459
|
+
<tbody>
|
|
460
|
+
<tr><td>openclaw_chat</td><td>Simple text inference</td></tr>
|
|
461
|
+
<tr><td>openclaw_status</td><td>Agent health check</td></tr>
|
|
462
|
+
</tbody>
|
|
463
|
+
</table>
|
|
464
|
+
</div>
|
|
465
|
+
</div>
|
|
466
|
+
<!-- Async Column -->
|
|
467
|
+
<div>
|
|
468
|
+
<div class="tools-col-header">
|
|
469
|
+
<h3 class="font-syne">Asynchronous</h3>
|
|
470
|
+
<p>Background execution</p>
|
|
471
|
+
</div>
|
|
472
|
+
<div class="brutalist-border" style="overflow:hidden">
|
|
473
|
+
<table class="tools-table font-mono">
|
|
474
|
+
<thead><tr><th>Tool Name</th><th>Function</th></tr></thead>
|
|
475
|
+
<tbody>
|
|
476
|
+
<tr><td>openclaw_chat_async</td><td>Queued chat execution</td></tr>
|
|
477
|
+
<tr><td>openclaw_task_status</td><td>Check specific task progress</td></tr>
|
|
478
|
+
<tr><td>openclaw_task_list</td><td>List all running tasks</td></tr>
|
|
479
|
+
<tr><td>openclaw_task_cancel</td><td>Kill a pending task</td></tr>
|
|
480
|
+
</tbody>
|
|
481
|
+
</table>
|
|
482
|
+
</div>
|
|
483
|
+
</div>
|
|
484
|
+
</div>
|
|
485
|
+
</div>
|
|
486
|
+
</section>
|
|
487
|
+
|
|
488
|
+
<!-- Quick Start -->
|
|
489
|
+
<section class="quickstart-section" id="quickstart">
|
|
490
|
+
<div class="container">
|
|
491
|
+
<div class="quickstart-inner">
|
|
492
|
+
<h2 class="font-syne">Quick Start</h2>
|
|
493
|
+
<div class="brutalist-border">
|
|
494
|
+
<!-- Tabs -->
|
|
495
|
+
<div class="tabs-bar">
|
|
496
|
+
<button class="tab-btn active" data-tab="docker">Docker (Recommended)</button>
|
|
497
|
+
<button class="tab-btn" data-tab="local">Local (JSON)</button>
|
|
498
|
+
<button class="tab-btn" data-tab="remote">CLI (OAuth)</button>
|
|
499
|
+
</div>
|
|
500
|
+
<!-- Tab Content -->
|
|
501
|
+
<div class="tab-content">
|
|
502
|
+
<!-- Docker (Recommended - default) -->
|
|
503
|
+
<div class="tab-panel active" id="tab-docker">
|
|
504
|
+
<p class="tab-comment"># Pre-built images published to GHCR on every release</p>
|
|
505
|
+
<pre><code># docker-compose.yml
|
|
506
|
+
services:
|
|
507
|
+
openclaw-mcp:
|
|
508
|
+
image: ghcr.io/freema/openclaw-mcp:latest
|
|
509
|
+
environment:
|
|
510
|
+
- OPENCLAW_URL=http://host.docker.internal:18789
|
|
511
|
+
- OPENCLAW_GATEWAY_TOKEN=your-token
|
|
512
|
+
- AUTH_ENABLED=true
|
|
513
|
+
- MCP_CLIENT_ID=openclaw
|
|
514
|
+
- MCP_CLIENT_SECRET=${MCP_CLIENT_SECRET}
|
|
515
|
+
ports:
|
|
516
|
+
- "3000:3000"</code></pre>
|
|
517
|
+
</div>
|
|
518
|
+
<!-- Local -->
|
|
519
|
+
<div class="tab-panel" id="tab-local">
|
|
520
|
+
<p class="tab-comment">// Add this to your Claude Desktop config (claude_desktop_config.json)</p>
|
|
521
|
+
<pre><code>{
|
|
522
|
+
"mcpServers": {
|
|
523
|
+
"openclaw": {
|
|
524
|
+
"command": "npx",
|
|
525
|
+
"args": ["openclaw-mcp"],
|
|
526
|
+
"env": {
|
|
527
|
+
"OPENCLAW_URL": "http://127.0.0.1:18789",
|
|
528
|
+
"OPENCLAW_GATEWAY_TOKEN": "your-token"
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
}
|
|
532
|
+
}</code></pre>
|
|
533
|
+
</div>
|
|
534
|
+
<!-- Remote -->
|
|
535
|
+
<div class="tab-panel" id="tab-remote">
|
|
536
|
+
<p class="tab-comment"># Run with OAuth credentials for remote access</p>
|
|
537
|
+
<pre><code>AUTH_ENABLED=true \
|
|
538
|
+
MCP_CLIENT_ID=openclaw \
|
|
539
|
+
MCP_CLIENT_SECRET=$MCP_CLIENT_SECRET \
|
|
540
|
+
MCP_ISSUER_URL=https://mcp.your-domain.com \
|
|
541
|
+
CORS_ORIGINS=https://claude.ai \
|
|
542
|
+
OPENCLAW_GATEWAY_TOKEN=your-token \
|
|
543
|
+
npx openclaw-mcp --transport sse --port 3000</code></pre>
|
|
544
|
+
</div>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
</section>
|
|
550
|
+
|
|
551
|
+
<!-- Claude Code Plugin -->
|
|
552
|
+
<section class="how-section" id="plugin">
|
|
553
|
+
<div class="container">
|
|
554
|
+
<h2 class="font-syne">Claude Code Plugin</h2>
|
|
555
|
+
<p class="text-muted" style="max-width:48rem;margin-bottom:2rem;font-size:0.875rem;line-height:1.75">
|
|
556
|
+
This repo ships a <a href="https://github.com/freema/openclaw-mcp/tree/main/.claude-plugin" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:underline">marketplace plugin</a> for Claude Code.
|
|
557
|
+
Install it directly to get OpenClaw skills, commands, and agents wired into your Claude Code session.
|
|
558
|
+
</p>
|
|
559
|
+
<div class="brutalist-border" style="max-width:56rem;overflow:hidden">
|
|
560
|
+
<div style="background:var(--border);padding:0.75rem 1rem;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text)">Install via Claude Code CLI</div>
|
|
561
|
+
<div style="padding:1.5rem;background:#0c0c0c;font-size:0.875rem;line-height:1.75">
|
|
562
|
+
<div><span class="text-accent">$</span> claude plugin install github:freema/openclaw-mcp</div>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
<div style="margin-top:2rem;display:grid;grid-template-columns:1fr;gap:1rem;max-width:56rem" class="plugin-cards">
|
|
566
|
+
<div class="feature-card">
|
|
567
|
+
<h3 class="font-syne">Skills</h3>
|
|
568
|
+
<p>Auto-triggers when you ask Claude to delegate tasks, chat with OpenClaw, or check gateway status.</p>
|
|
569
|
+
</div>
|
|
570
|
+
<div class="feature-card">
|
|
571
|
+
<h3 class="font-syne">Commands</h3>
|
|
572
|
+
<p><code style="color:var(--accent)">/claw:chat</code> and <code style="color:var(--accent)">/claw:status</code> for direct interaction from the CLI.</p>
|
|
573
|
+
</div>
|
|
574
|
+
<div class="feature-card">
|
|
575
|
+
<h3 class="font-syne">Agents</h3>
|
|
576
|
+
<p><code style="color:var(--accent)">task-delegator</code> agent for spawning long-running async operations with progress monitoring.</p>
|
|
577
|
+
</div>
|
|
578
|
+
</div>
|
|
579
|
+
</div>
|
|
580
|
+
</section>
|
|
581
|
+
|
|
582
|
+
<!-- CTA Section -->
|
|
583
|
+
<section class="cta-section">
|
|
584
|
+
<div class="container">
|
|
585
|
+
<h2 class="font-syne">Ready to connect <br />Claude.ai to your agent?</h2>
|
|
586
|
+
<div class="cta-buttons">
|
|
587
|
+
<a class="cta-btn-primary" href="https://github.com/freema/openclaw-mcp/blob/main/docs/installation.md" target="_blank" rel="noopener">Deploy Now</a>
|
|
588
|
+
<a class="cta-btn-secondary" href="https://github.com/freema/openclaw-mcp" target="_blank" rel="noopener">Read Documentation</a>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
</section>
|
|
592
|
+
|
|
593
|
+
<!-- Footer -->
|
|
594
|
+
<footer class="footer">
|
|
595
|
+
<div class="container">
|
|
596
|
+
<div class="footer-inner">
|
|
597
|
+
<div>
|
|
598
|
+
<div class="font-syne footer-logo">🦞 openclaw-mcp</div>
|
|
599
|
+
<p class="footer-credit font-mono">Built by <a href="https://www.tomasgrasl.cz/" target="_blank" rel="noopener">Tomáš Grasl</a> · MIT License</p>
|
|
600
|
+
</div>
|
|
601
|
+
<div class="footer-links font-mono">
|
|
602
|
+
<a href="https://github.com/freema/openclaw-mcp" target="_blank" rel="noopener">GitHub</a>
|
|
603
|
+
<a href="https://github.com/freema/openclaw-mcp/blob/main/docs/installation.md" target="_blank" rel="noopener">Docs</a>
|
|
604
|
+
<a href="https://www.npmjs.com/package/openclaw-mcp" target="_blank" rel="noopener">NPM</a>
|
|
605
|
+
</div>
|
|
606
|
+
</div>
|
|
607
|
+
<div class="footer-bottom font-mono">
|
|
608
|
+
© 2024 OPENCLAW-MCP. ALL RIGHTS RESERVED.
|
|
609
|
+
</div>
|
|
610
|
+
</div>
|
|
611
|
+
</footer>
|
|
612
|
+
|
|
613
|
+
<!-- Tab Switching Script -->
|
|
614
|
+
<script>
|
|
615
|
+
(function() {
|
|
616
|
+
var btns = document.querySelectorAll('.tab-btn');
|
|
617
|
+
var panels = document.querySelectorAll('.tab-panel');
|
|
618
|
+
btns.forEach(function(btn) {
|
|
619
|
+
btn.addEventListener('click', function() {
|
|
620
|
+
btns.forEach(function(b) { b.classList.remove('active'); });
|
|
621
|
+
panels.forEach(function(p) { p.classList.remove('active'); });
|
|
622
|
+
btn.classList.add('active');
|
|
623
|
+
document.getElementById('tab-' + btn.getAttribute('data-tab')).classList.add('active');
|
|
624
|
+
});
|
|
625
|
+
});
|
|
626
|
+
})();
|
|
627
|
+
</script>
|
|
628
|
+
|
|
629
|
+
<!-- Live Star/Fork Count from GitHub API -->
|
|
630
|
+
<script>
|
|
631
|
+
(function() {
|
|
632
|
+
var x = new XMLHttpRequest();
|
|
633
|
+
x.open('GET', 'https://api.github.com/repos/freema/openclaw-mcp', true);
|
|
634
|
+
x.onload = function() {
|
|
635
|
+
if (x.status === 200) {
|
|
636
|
+
try {
|
|
637
|
+
var d = JSON.parse(x.responseText);
|
|
638
|
+
if (d.stargazers_count !== undefined) {
|
|
639
|
+
document.getElementById('star-count').textContent = d.stargazers_count;
|
|
640
|
+
document.getElementById('nav-star-count').textContent = d.stargazers_count;
|
|
641
|
+
}
|
|
642
|
+
if (d.forks_count !== undefined) {
|
|
643
|
+
document.getElementById('fork-count').textContent = d.forks_count;
|
|
644
|
+
document.getElementById('nav-fork-count').textContent = d.forks_count;
|
|
645
|
+
}
|
|
646
|
+
} catch(e) {}
|
|
647
|
+
}
|
|
648
|
+
};
|
|
649
|
+
x.send();
|
|
650
|
+
})();
|
|
651
|
+
</script>
|
|
652
|
+
</body>
|
|
653
|
+
</html>
|
package/package.json
CHANGED