@lhi/n8m 0.3.2 → 1.0.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 +50 -10
- package/banner.txt +9 -0
- package/dist/agentic/graph.d.ts +11 -1
- package/dist/agentic/graph.js +2 -1
- package/dist/agentic/nodes/architect.js +3 -2
- package/dist/agentic/nodes/engineer.js +4 -2
- package/dist/agentic/state.d.ts +2 -0
- package/dist/agentic/state.js +4 -0
- package/dist/commands/create.js +15 -2
- package/dist/commands/deploy.d.ts +2 -0
- package/dist/commands/deploy.js +25 -8
- package/dist/commands/fixture.js +1 -0
- package/dist/commands/learn.js +1 -1
- package/dist/commands/modify.js +13 -1
- package/dist/commands/rollback.d.ts +31 -0
- package/dist/commands/rollback.js +201 -0
- package/dist/fixture-schema.json +162 -0
- package/dist/help.d.ts +6 -0
- package/dist/help.js +12 -0
- package/dist/resources/node-definitions-fallback.json +390 -0
- package/dist/resources/node-test-hints.json +188 -0
- package/dist/resources/workflow-test-fixtures.json +42 -0
- package/dist/services/ai.service.d.ts +9 -2
- package/dist/services/ai.service.js +27 -6
- package/dist/services/git.service.d.ts +52 -0
- package/dist/services/git.service.js +110 -0
- package/dist/services/mcp.service.d.ts +1 -0
- package/dist/services/mcp.service.js +201 -0
- package/dist/services/node-definitions.service.js +1 -1
- package/dist/utils/config.js +3 -1
- package/dist/utils/n8nClient.d.ts +11 -0
- package/dist/utils/n8nClient.js +39 -0
- package/docs/.nojekyll +0 -0
- package/docs/CNAME +1 -0
- package/docs/DEVELOPER_GUIDE.md +12 -2
- package/docs/apple-touch-icon.png +0 -0
- package/docs/favicon-16x16.png +0 -0
- package/docs/favicon-192x192.png +0 -0
- package/docs/favicon-32x32.png +0 -0
- package/docs/favicon.svg +4 -0
- package/docs/index.html +1577 -0
- package/docs/social-card.html +237 -0
- package/n8m-cover.png +0 -0
- package/n8m-logo-light.png +0 -0
- package/n8m-logo-mono.png +0 -0
- package/n8m-logo-v2.png +0 -0
- package/oclif.manifest.json +68 -1
- package/package.json +11 -1
package/docs/index.html
ADDED
|
@@ -0,0 +1,1577 @@
|
|
|
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>n8m — Agentic n8n Workflow Generator</title>
|
|
7
|
+
<meta name="description" content="Stop clicking. Start shipping. AI-powered CLI that generates, tests, and deploys n8n workflows from natural language. No account. No server. Bring your own AI key.">
|
|
8
|
+
<meta property="og:type" content="website">
|
|
9
|
+
<meta property="og:title" content="n8m — Agentic n8n Workflow Generator">
|
|
10
|
+
<meta property="og:description" content="Stop clicking. Start shipping. Open-source CLI with an agentic AI layer for n8n. No account. No server. Bring your own AI key.">
|
|
11
|
+
<meta property="og:image" content="https://raw.githubusercontent.com/Lee-Holdings-International/n8m/main/n8m-cover.png">
|
|
12
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
13
|
+
<meta name="twitter:title" content="n8m — Agentic n8n Workflow Generator">
|
|
14
|
+
<meta name="twitter:description" content="Stop clicking. Start shipping. AI-powered CLI for n8n.">
|
|
15
|
+
<meta name="twitter:image" content="https://raw.githubusercontent.com/Lee-Holdings-International/n8m/main/n8m-cover.png">
|
|
16
|
+
|
|
17
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
18
|
+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
19
|
+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
20
|
+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
21
|
+
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
|
|
22
|
+
|
|
23
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
24
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
25
|
+
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
|
|
26
|
+
|
|
27
|
+
<style>
|
|
28
|
+
/* ============================================================
|
|
29
|
+
RESET
|
|
30
|
+
============================================================ */
|
|
31
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
32
|
+
|
|
33
|
+
/* ============================================================
|
|
34
|
+
BRAND TOKENS
|
|
35
|
+
Derived directly from n8m logo assets:
|
|
36
|
+
--brand #22C55E — logo green (primary)
|
|
37
|
+
--brand-hi #4ADE80 — lighter green
|
|
38
|
+
--brand-dim #16A34A — deeper green
|
|
39
|
+
--indigo #6366F1 — logo wordmark underline gradient
|
|
40
|
+
--indigo-hi #818CF8
|
|
41
|
+
--bg-deep #0B0D14 — logo background (near-black)
|
|
42
|
+
============================================================ */
|
|
43
|
+
:root {
|
|
44
|
+
/* backgrounds */
|
|
45
|
+
--bg-deep: #0b0d14;
|
|
46
|
+
--bg-main: #0e1119;
|
|
47
|
+
--bg-raised: #111620;
|
|
48
|
+
--bg-card: #121724;
|
|
49
|
+
|
|
50
|
+
/* borders */
|
|
51
|
+
--border: #1a2035;
|
|
52
|
+
--border-hi: #283050;
|
|
53
|
+
|
|
54
|
+
/* brand — logo green */
|
|
55
|
+
--brand: #22c55e;
|
|
56
|
+
--brand-hi: #4ade80;
|
|
57
|
+
--brand-dim: #16a34a;
|
|
58
|
+
--brand-glow: rgba(34, 197, 94, .13);
|
|
59
|
+
|
|
60
|
+
/* indigo — logo wordmark underline */
|
|
61
|
+
--indigo: #6366f1;
|
|
62
|
+
--indigo-hi: #818cf8;
|
|
63
|
+
|
|
64
|
+
/* semantic terminal */
|
|
65
|
+
--cyan: #22d3ee;
|
|
66
|
+
--orange: #fb923c;
|
|
67
|
+
--yellow: #fcd34d;
|
|
68
|
+
--red: #f87171;
|
|
69
|
+
--purple: #a78bfa;
|
|
70
|
+
|
|
71
|
+
/* text */
|
|
72
|
+
--text: #f1f5f9;
|
|
73
|
+
--text-2: #cbd5e1;
|
|
74
|
+
--text-3: #94a3b8;
|
|
75
|
+
--text-4: #64748b;
|
|
76
|
+
--text-5: #3d5070;
|
|
77
|
+
|
|
78
|
+
/* type */
|
|
79
|
+
--mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
80
|
+
--body: 'IBM Plex Sans', system-ui, sans-serif;
|
|
81
|
+
|
|
82
|
+
--r: 10px;
|
|
83
|
+
--r-lg: 16px;
|
|
84
|
+
--mw: 1240px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
html { scroll-behavior: smooth; }
|
|
88
|
+
|
|
89
|
+
body {
|
|
90
|
+
background: var(--bg-deep);
|
|
91
|
+
color: var(--text);
|
|
92
|
+
font-family: var(--body);
|
|
93
|
+
line-height: 1.65;
|
|
94
|
+
overflow-x: hidden;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* subtle dot grid */
|
|
98
|
+
body::before {
|
|
99
|
+
content: '';
|
|
100
|
+
position: fixed;
|
|
101
|
+
inset: 0;
|
|
102
|
+
background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
|
|
103
|
+
background-size: 30px 30px;
|
|
104
|
+
opacity: .45;
|
|
105
|
+
pointer-events: none;
|
|
106
|
+
z-index: 0;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
body > * { position: relative; z-index: 1; }
|
|
110
|
+
|
|
111
|
+
a { color: inherit; text-decoration: none; }
|
|
112
|
+
|
|
113
|
+
code {
|
|
114
|
+
font-family: var(--mono);
|
|
115
|
+
font-size: .85em;
|
|
116
|
+
background: rgba(34, 197, 94, .07);
|
|
117
|
+
color: var(--brand-hi);
|
|
118
|
+
padding: .1em .35em;
|
|
119
|
+
border-radius: 4px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* ============================================================
|
|
123
|
+
NAV
|
|
124
|
+
============================================================ */
|
|
125
|
+
nav {
|
|
126
|
+
position: fixed;
|
|
127
|
+
top: .875rem;
|
|
128
|
+
left: 50%;
|
|
129
|
+
transform: translateX(-50%);
|
|
130
|
+
width: calc(100% - 1.75rem);
|
|
131
|
+
max-width: var(--mw);
|
|
132
|
+
background: rgba(11, 13, 20, .85);
|
|
133
|
+
backdrop-filter: blur(22px);
|
|
134
|
+
-webkit-backdrop-filter: blur(22px);
|
|
135
|
+
border: 1px solid var(--border);
|
|
136
|
+
border-radius: 12px;
|
|
137
|
+
padding: .65rem 1.25rem;
|
|
138
|
+
display: flex;
|
|
139
|
+
align-items: center;
|
|
140
|
+
justify-content: space-between;
|
|
141
|
+
z-index: 200;
|
|
142
|
+
transition: top .25s ease, width .25s ease, border-radius .25s ease,
|
|
143
|
+
background .25s ease, border-color .25s ease, max-width .25s ease;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
nav.scrolled {
|
|
147
|
+
top: 0;
|
|
148
|
+
width: 100%;
|
|
149
|
+
max-width: 100%;
|
|
150
|
+
border-radius: 0;
|
|
151
|
+
border-top: none;
|
|
152
|
+
border-left: none;
|
|
153
|
+
border-right: none;
|
|
154
|
+
background: rgba(11, 13, 20, .96);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Logo mark: the "8" icon + wordmark */
|
|
158
|
+
.nav-logo {
|
|
159
|
+
display: flex;
|
|
160
|
+
align-items: center;
|
|
161
|
+
gap: .55rem;
|
|
162
|
+
font-family: var(--body);
|
|
163
|
+
font-weight: 700;
|
|
164
|
+
font-size: 1.05rem;
|
|
165
|
+
letter-spacing: -.01em;
|
|
166
|
+
color: var(--text);
|
|
167
|
+
}
|
|
168
|
+
.nav-logo .wordmark { letter-spacing: -.02em; }
|
|
169
|
+
|
|
170
|
+
/* inline "8" mark — faithful recreation of logo icon */
|
|
171
|
+
.logo-mark {
|
|
172
|
+
width: 22px;
|
|
173
|
+
height: 30px;
|
|
174
|
+
flex-shrink: 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.nav-links {
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
gap: .15rem;
|
|
181
|
+
}
|
|
182
|
+
.nav-links a {
|
|
183
|
+
font-size: .82rem;
|
|
184
|
+
color: var(--text-3);
|
|
185
|
+
padding: .35rem .7rem;
|
|
186
|
+
border-radius: 6px;
|
|
187
|
+
transition: color .15s, background .15s;
|
|
188
|
+
cursor: pointer;
|
|
189
|
+
}
|
|
190
|
+
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.05); }
|
|
191
|
+
|
|
192
|
+
.nav-cta {
|
|
193
|
+
background: var(--brand) !important;
|
|
194
|
+
color: #fff !important;
|
|
195
|
+
font-weight: 500;
|
|
196
|
+
padding: .35rem .9rem !important;
|
|
197
|
+
}
|
|
198
|
+
.nav-cta:hover { background: var(--brand-dim) !important; }
|
|
199
|
+
|
|
200
|
+
/* ============================================================
|
|
201
|
+
HERO
|
|
202
|
+
============================================================ */
|
|
203
|
+
.hero-wrap {
|
|
204
|
+
max-width: var(--mw);
|
|
205
|
+
margin: 0 auto;
|
|
206
|
+
padding: 7.5rem 1.5rem 4rem;
|
|
207
|
+
display: flex;
|
|
208
|
+
align-items: flex-start;
|
|
209
|
+
gap: 3.5rem;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/* hero glow — brand green */
|
|
213
|
+
.hero-wrap::before {
|
|
214
|
+
content: '';
|
|
215
|
+
position: absolute;
|
|
216
|
+
top: -60px;
|
|
217
|
+
right: -80px;
|
|
218
|
+
width: 680px;
|
|
219
|
+
height: 680px;
|
|
220
|
+
border-radius: 50%;
|
|
221
|
+
background: radial-gradient(circle, rgba(34,197,94,.07) 0%, transparent 65%);
|
|
222
|
+
pointer-events: none;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.hero-l { flex: 1; min-width: 0; }
|
|
226
|
+
|
|
227
|
+
/* badge */
|
|
228
|
+
.badge {
|
|
229
|
+
display: inline-flex;
|
|
230
|
+
align-items: center;
|
|
231
|
+
gap: .45rem;
|
|
232
|
+
background: rgba(34, 197, 94, .08);
|
|
233
|
+
border: 1px solid rgba(34, 197, 94, .25);
|
|
234
|
+
border-radius: 100px;
|
|
235
|
+
padding: .3rem .8rem;
|
|
236
|
+
font-family: var(--mono);
|
|
237
|
+
font-size: .73rem;
|
|
238
|
+
color: var(--brand-hi);
|
|
239
|
+
margin-bottom: 1.75rem;
|
|
240
|
+
cursor: pointer;
|
|
241
|
+
transition: background .15s;
|
|
242
|
+
}
|
|
243
|
+
.badge:hover { background: rgba(34, 197, 94, .14); }
|
|
244
|
+
.badge-pulse {
|
|
245
|
+
width: 6px; height: 6px;
|
|
246
|
+
border-radius: 50%;
|
|
247
|
+
background: var(--brand);
|
|
248
|
+
animation: pulse 2.2s ease-in-out infinite;
|
|
249
|
+
}
|
|
250
|
+
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
|
|
251
|
+
|
|
252
|
+
/* headline */
|
|
253
|
+
h1 {
|
|
254
|
+
font-family: var(--mono);
|
|
255
|
+
font-size: clamp(2.6rem, 5.5vw, 5.2rem);
|
|
256
|
+
font-weight: 700;
|
|
257
|
+
line-height: 1.04;
|
|
258
|
+
letter-spacing: -.045em;
|
|
259
|
+
margin-bottom: 1.4rem;
|
|
260
|
+
color: var(--text);
|
|
261
|
+
}
|
|
262
|
+
h1 em {
|
|
263
|
+
font-style: normal;
|
|
264
|
+
color: var(--brand-hi);
|
|
265
|
+
display: block;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.hero-sub {
|
|
269
|
+
font-size: 1.05rem;
|
|
270
|
+
color: var(--text-3);
|
|
271
|
+
line-height: 1.65;
|
|
272
|
+
max-width: 460px;
|
|
273
|
+
margin-bottom: 2.25rem;
|
|
274
|
+
}
|
|
275
|
+
.hero-sub strong { color: var(--text-2); font-weight: 500; }
|
|
276
|
+
|
|
277
|
+
/* install box */
|
|
278
|
+
.install-box {
|
|
279
|
+
display: inline-flex;
|
|
280
|
+
align-items: center;
|
|
281
|
+
gap: .6rem;
|
|
282
|
+
background: var(--bg-card);
|
|
283
|
+
border: 1px solid var(--border);
|
|
284
|
+
border-radius: 8px;
|
|
285
|
+
padding: .65rem 1rem;
|
|
286
|
+
font-family: var(--mono);
|
|
287
|
+
font-size: .82rem;
|
|
288
|
+
margin-bottom: 1.75rem;
|
|
289
|
+
cursor: pointer;
|
|
290
|
+
user-select: all;
|
|
291
|
+
transition: border-color .15s;
|
|
292
|
+
}
|
|
293
|
+
.install-box:hover { border-color: var(--border-hi); }
|
|
294
|
+
.ip { color: var(--text-5); }
|
|
295
|
+
.ic { color: var(--cyan); }
|
|
296
|
+
.is { color: var(--yellow); }
|
|
297
|
+
|
|
298
|
+
.copy-btn {
|
|
299
|
+
font-family: var(--mono);
|
|
300
|
+
font-size: .7rem;
|
|
301
|
+
background: rgba(255,255,255,.06);
|
|
302
|
+
border: none;
|
|
303
|
+
border-radius: 4px;
|
|
304
|
+
padding: .2rem .5rem;
|
|
305
|
+
color: var(--text-4);
|
|
306
|
+
cursor: pointer;
|
|
307
|
+
transition: background .15s, color .15s;
|
|
308
|
+
margin-left: .2rem;
|
|
309
|
+
}
|
|
310
|
+
.copy-btn:hover { background: rgba(255,255,255,.12); color: var(--text); }
|
|
311
|
+
.copy-btn.ok { color: var(--brand-hi); }
|
|
312
|
+
|
|
313
|
+
/* cta buttons */
|
|
314
|
+
.hero-btns { display: flex; gap: .65rem; flex-wrap: wrap; }
|
|
315
|
+
|
|
316
|
+
.btn {
|
|
317
|
+
display: inline-flex;
|
|
318
|
+
align-items: center;
|
|
319
|
+
gap: .45rem;
|
|
320
|
+
padding: .58rem 1.15rem;
|
|
321
|
+
border-radius: 8px;
|
|
322
|
+
font-size: .875rem;
|
|
323
|
+
font-weight: 500;
|
|
324
|
+
cursor: pointer;
|
|
325
|
+
transition: all .15s;
|
|
326
|
+
}
|
|
327
|
+
.btn-pri { background: var(--brand); color: #fff; }
|
|
328
|
+
.btn-pri:hover { background: var(--brand-dim); }
|
|
329
|
+
.btn-sec {
|
|
330
|
+
background: rgba(255,255,255,.05);
|
|
331
|
+
color: var(--text-2);
|
|
332
|
+
border: 1px solid var(--border);
|
|
333
|
+
}
|
|
334
|
+
.btn-sec:hover { background: rgba(255,255,255,.09); border-color: var(--border-hi); color: var(--text); }
|
|
335
|
+
|
|
336
|
+
/* ============================================================
|
|
337
|
+
TERMINAL
|
|
338
|
+
============================================================ */
|
|
339
|
+
.hero-r {
|
|
340
|
+
flex: 1;
|
|
341
|
+
min-width: 0;
|
|
342
|
+
max-width: 560px;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.terminal {
|
|
346
|
+
background: #070810;
|
|
347
|
+
border: 1px solid var(--border);
|
|
348
|
+
border-radius: var(--r-lg);
|
|
349
|
+
overflow: hidden;
|
|
350
|
+
box-shadow:
|
|
351
|
+
0 0 0 1px rgba(34,197,94,.05),
|
|
352
|
+
0 0 60px rgba(34,197,94,.06),
|
|
353
|
+
0 24px 64px rgba(0,0,0,.6);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.term-bar {
|
|
357
|
+
background: var(--bg-raised);
|
|
358
|
+
padding: .8rem 1rem;
|
|
359
|
+
display: flex;
|
|
360
|
+
align-items: center;
|
|
361
|
+
gap: .45rem;
|
|
362
|
+
border-bottom: 1px solid var(--border);
|
|
363
|
+
}
|
|
364
|
+
.td { width: 12px; height: 12px; border-radius: 50%; }
|
|
365
|
+
.td-r { background: #ff5f56; }
|
|
366
|
+
.td-y { background: #ffbd2e; }
|
|
367
|
+
.td-g { background: #27c93f; }
|
|
368
|
+
.term-title {
|
|
369
|
+
margin: 0 auto;
|
|
370
|
+
font-family: var(--mono);
|
|
371
|
+
font-size: .7rem;
|
|
372
|
+
color: var(--text-5);
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.term-body {
|
|
376
|
+
padding: 1.1rem 1.4rem 1.4rem;
|
|
377
|
+
font-family: var(--mono);
|
|
378
|
+
font-size: .775rem;
|
|
379
|
+
line-height: 1.85;
|
|
380
|
+
min-height: 310px;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
/* terminal token colors */
|
|
384
|
+
.tp { color: var(--text-5); }
|
|
385
|
+
.tc { color: var(--cyan); }
|
|
386
|
+
.tb { color: var(--brand-hi); } /* commands — brand green */
|
|
387
|
+
.ts { color: var(--yellow); }
|
|
388
|
+
.tl { color: var(--orange); font-weight: 600; }
|
|
389
|
+
.tch { color: var(--brand); } /* check marks — brand green */
|
|
390
|
+
.td2 { color: var(--text-4); }
|
|
391
|
+
.tok { color: var(--brand-hi); font-weight: 600; }
|
|
392
|
+
.tf { color: var(--text-3); }
|
|
393
|
+
|
|
394
|
+
.term-cursor {
|
|
395
|
+
display: inline-block;
|
|
396
|
+
width: 2px;
|
|
397
|
+
height: 1.1em;
|
|
398
|
+
background: var(--brand);
|
|
399
|
+
vertical-align: text-bottom;
|
|
400
|
+
animation: blink 1s step-end infinite;
|
|
401
|
+
}
|
|
402
|
+
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
|
|
403
|
+
|
|
404
|
+
/* ============================================================
|
|
405
|
+
SECTIONS — COMMON
|
|
406
|
+
============================================================ */
|
|
407
|
+
section { padding: 4.5rem 1.5rem; }
|
|
408
|
+
.inner { max-width: var(--mw); margin: 0 auto; }
|
|
409
|
+
|
|
410
|
+
hr.div {
|
|
411
|
+
border: none;
|
|
412
|
+
border-top: 1px solid var(--border);
|
|
413
|
+
margin: 0;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.sec-label {
|
|
417
|
+
font-family: var(--mono);
|
|
418
|
+
font-size: .7rem;
|
|
419
|
+
font-weight: 600;
|
|
420
|
+
letter-spacing: .12em;
|
|
421
|
+
text-transform: uppercase;
|
|
422
|
+
color: var(--brand);
|
|
423
|
+
margin-bottom: .65rem;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
h2 {
|
|
427
|
+
font-family: var(--mono);
|
|
428
|
+
font-size: clamp(1.65rem, 3vw, 2.6rem);
|
|
429
|
+
font-weight: 700;
|
|
430
|
+
letter-spacing: -.035em;
|
|
431
|
+
line-height: 1.1;
|
|
432
|
+
color: var(--text);
|
|
433
|
+
margin-bottom: .9rem;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.sec-sub {
|
|
437
|
+
font-size: 1rem;
|
|
438
|
+
color: var(--text-3);
|
|
439
|
+
max-width: 520px;
|
|
440
|
+
line-height: 1.65;
|
|
441
|
+
margin-bottom: 3rem;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
/* ============================================================
|
|
445
|
+
PIPELINE
|
|
446
|
+
============================================================ */
|
|
447
|
+
#how { background: var(--bg-main); }
|
|
448
|
+
|
|
449
|
+
.pipeline {
|
|
450
|
+
display: flex;
|
|
451
|
+
align-items: stretch;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.pnode {
|
|
455
|
+
flex: 1;
|
|
456
|
+
background: var(--bg-card);
|
|
457
|
+
border: 1px solid var(--border);
|
|
458
|
+
border-radius: var(--r);
|
|
459
|
+
padding: 1.75rem 1.5rem;
|
|
460
|
+
transition: border-color .2s, box-shadow .2s;
|
|
461
|
+
cursor: default;
|
|
462
|
+
}
|
|
463
|
+
.pnode:hover {
|
|
464
|
+
border-color: var(--border-hi);
|
|
465
|
+
box-shadow: 0 0 28px var(--brand-glow);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.parr {
|
|
469
|
+
display: flex;
|
|
470
|
+
align-items: center;
|
|
471
|
+
padding: 0 .65rem;
|
|
472
|
+
color: var(--text-5);
|
|
473
|
+
flex-shrink: 0;
|
|
474
|
+
}
|
|
475
|
+
.parr svg { width: 22px; height: 22px; }
|
|
476
|
+
|
|
477
|
+
.pnum {
|
|
478
|
+
font-family: var(--mono);
|
|
479
|
+
font-size: .65rem;
|
|
480
|
+
font-weight: 700;
|
|
481
|
+
letter-spacing: .14em;
|
|
482
|
+
text-transform: uppercase;
|
|
483
|
+
color: var(--brand);
|
|
484
|
+
margin-bottom: .4rem;
|
|
485
|
+
}
|
|
486
|
+
.pname {
|
|
487
|
+
font-family: var(--mono);
|
|
488
|
+
font-size: 1.1rem;
|
|
489
|
+
font-weight: 700;
|
|
490
|
+
color: var(--text);
|
|
491
|
+
margin-bottom: .45rem;
|
|
492
|
+
}
|
|
493
|
+
.pdesc {
|
|
494
|
+
font-size: .825rem;
|
|
495
|
+
color: var(--text-3);
|
|
496
|
+
line-height: 1.55;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.picon {
|
|
500
|
+
width: 38px; height: 38px;
|
|
501
|
+
border-radius: 8px;
|
|
502
|
+
display: flex;
|
|
503
|
+
align-items: center;
|
|
504
|
+
justify-content: center;
|
|
505
|
+
margin-bottom: .9rem;
|
|
506
|
+
}
|
|
507
|
+
/* all pipeline icons use brand palette */
|
|
508
|
+
.pi-1 { background: rgba(34,197,94,.12); color: var(--brand-hi); }
|
|
509
|
+
.pi-2 { background: rgba(34,211,238,.1); color: var(--cyan); }
|
|
510
|
+
.pi-3 { background: rgba(99,102,241,.12); color: var(--indigo-hi); }
|
|
511
|
+
.pi-4 { background: rgba(251,146,60,.1); color: var(--orange); }
|
|
512
|
+
|
|
513
|
+
/* ============================================================
|
|
514
|
+
COMMANDS
|
|
515
|
+
============================================================ */
|
|
516
|
+
.cmds-grid {
|
|
517
|
+
display: grid;
|
|
518
|
+
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
|
|
519
|
+
gap: .875rem;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.cmd-card {
|
|
523
|
+
background: var(--bg-card);
|
|
524
|
+
border: 1px solid var(--border);
|
|
525
|
+
border-radius: var(--r);
|
|
526
|
+
padding: 1.4rem;
|
|
527
|
+
transition: border-color .2s, box-shadow .2s, transform .2s;
|
|
528
|
+
cursor: default;
|
|
529
|
+
}
|
|
530
|
+
.cmd-card:hover {
|
|
531
|
+
border-color: rgba(34,197,94,.35);
|
|
532
|
+
box-shadow: 0 0 22px var(--brand-glow);
|
|
533
|
+
transform: translateY(-2px);
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
.cmd-hdr {
|
|
537
|
+
display: flex;
|
|
538
|
+
align-items: center;
|
|
539
|
+
gap: .65rem;
|
|
540
|
+
margin-bottom: .65rem;
|
|
541
|
+
}
|
|
542
|
+
.cmd-ico {
|
|
543
|
+
width: 30px; height: 30px;
|
|
544
|
+
border-radius: 6px;
|
|
545
|
+
display: flex; align-items: center; justify-content: center;
|
|
546
|
+
flex-shrink: 0;
|
|
547
|
+
}
|
|
548
|
+
.cmd-name {
|
|
549
|
+
font-family: var(--mono);
|
|
550
|
+
font-size: .95rem;
|
|
551
|
+
font-weight: 700;
|
|
552
|
+
color: var(--brand-hi);
|
|
553
|
+
}
|
|
554
|
+
.cmd-desc {
|
|
555
|
+
font-size: .82rem;
|
|
556
|
+
color: var(--text-3);
|
|
557
|
+
line-height: 1.55;
|
|
558
|
+
margin-bottom: .9rem;
|
|
559
|
+
}
|
|
560
|
+
.cmd-ex {
|
|
561
|
+
background: #060710;
|
|
562
|
+
border: 1px solid var(--border);
|
|
563
|
+
border-radius: 6px;
|
|
564
|
+
padding: .65rem .9rem;
|
|
565
|
+
font-family: var(--mono);
|
|
566
|
+
font-size: .73rem;
|
|
567
|
+
line-height: 1.8;
|
|
568
|
+
overflow-x: auto;
|
|
569
|
+
}
|
|
570
|
+
.ep { color: var(--text-5); }
|
|
571
|
+
.ec { color: var(--brand-hi); }
|
|
572
|
+
.es { color: var(--cyan); }
|
|
573
|
+
.ef { color: var(--orange); }
|
|
574
|
+
.eq { color: var(--yellow); }
|
|
575
|
+
.em { color: var(--text-4); }
|
|
576
|
+
|
|
577
|
+
/* ============================================================
|
|
578
|
+
FEATURES
|
|
579
|
+
============================================================ */
|
|
580
|
+
.feats-grid {
|
|
581
|
+
display: grid;
|
|
582
|
+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
583
|
+
gap: .875rem;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.feat {
|
|
587
|
+
background: var(--bg-card);
|
|
588
|
+
border: 1px solid var(--border);
|
|
589
|
+
border-radius: var(--r);
|
|
590
|
+
padding: 1.4rem;
|
|
591
|
+
transition: border-color .2s;
|
|
592
|
+
}
|
|
593
|
+
.feat:hover { border-color: rgba(34,197,94,.3); }
|
|
594
|
+
|
|
595
|
+
.feat-ico {
|
|
596
|
+
width: 42px; height: 42px;
|
|
597
|
+
border-radius: 9px;
|
|
598
|
+
display: flex; align-items: center; justify-content: center;
|
|
599
|
+
margin-bottom: .9rem;
|
|
600
|
+
}
|
|
601
|
+
.feat-title {
|
|
602
|
+
font-family: var(--mono);
|
|
603
|
+
font-size: .875rem;
|
|
604
|
+
font-weight: 600;
|
|
605
|
+
color: var(--text);
|
|
606
|
+
margin-bottom: .4rem;
|
|
607
|
+
}
|
|
608
|
+
.feat-desc { font-size: .82rem; color: var(--text-3); line-height: 1.55; }
|
|
609
|
+
|
|
610
|
+
/* ============================================================
|
|
611
|
+
PROVIDERS
|
|
612
|
+
============================================================ */
|
|
613
|
+
#providers { background: var(--bg-main); }
|
|
614
|
+
|
|
615
|
+
.prov-grid {
|
|
616
|
+
display: flex;
|
|
617
|
+
flex-wrap: wrap;
|
|
618
|
+
gap: .65rem;
|
|
619
|
+
margin-bottom: 2rem;
|
|
620
|
+
}
|
|
621
|
+
.prov-pill {
|
|
622
|
+
display: flex;
|
|
623
|
+
align-items: center;
|
|
624
|
+
gap: .5rem;
|
|
625
|
+
background: var(--bg-card);
|
|
626
|
+
border: 1px solid var(--border);
|
|
627
|
+
border-radius: 8px;
|
|
628
|
+
padding: .55rem .9rem;
|
|
629
|
+
font-family: var(--mono);
|
|
630
|
+
font-size: .8rem;
|
|
631
|
+
color: var(--text-2);
|
|
632
|
+
cursor: default;
|
|
633
|
+
transition: border-color .15s;
|
|
634
|
+
}
|
|
635
|
+
.prov-pill:hover { border-color: var(--border-hi); }
|
|
636
|
+
.pdot { width: 8px; height: 8px; border-radius: 50%; }
|
|
637
|
+
|
|
638
|
+
.config-box {
|
|
639
|
+
background: #060710;
|
|
640
|
+
border: 1px solid var(--border);
|
|
641
|
+
border-radius: var(--r);
|
|
642
|
+
padding: 1rem 1.25rem;
|
|
643
|
+
font-family: var(--mono);
|
|
644
|
+
font-size: .76rem;
|
|
645
|
+
line-height: 1.85;
|
|
646
|
+
max-width: 560px;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
/* ============================================================
|
|
650
|
+
MCP
|
|
651
|
+
============================================================ */
|
|
652
|
+
.mcp-split {
|
|
653
|
+
display: grid;
|
|
654
|
+
grid-template-columns: 1fr 1fr;
|
|
655
|
+
gap: 4rem;
|
|
656
|
+
align-items: start;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
.check-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.75rem; }
|
|
660
|
+
.check-item {
|
|
661
|
+
display: flex;
|
|
662
|
+
align-items: center;
|
|
663
|
+
gap: .65rem;
|
|
664
|
+
font-size: .85rem;
|
|
665
|
+
color: var(--text-3);
|
|
666
|
+
}
|
|
667
|
+
.check-item svg { flex-shrink: 0; }
|
|
668
|
+
|
|
669
|
+
.json-box {
|
|
670
|
+
background: #060710;
|
|
671
|
+
border: 1px solid var(--border);
|
|
672
|
+
border-radius: var(--r);
|
|
673
|
+
padding: 1.1rem 1.25rem;
|
|
674
|
+
font-family: var(--mono);
|
|
675
|
+
font-size: .76rem;
|
|
676
|
+
line-height: 1.9;
|
|
677
|
+
}
|
|
678
|
+
.jk { color: var(--brand-hi); }
|
|
679
|
+
.jv { color: var(--yellow); }
|
|
680
|
+
.jp { color: var(--text-5); }
|
|
681
|
+
.jfile {
|
|
682
|
+
font-family: var(--mono);
|
|
683
|
+
font-size: .68rem;
|
|
684
|
+
color: var(--text-5);
|
|
685
|
+
margin-bottom: .4rem;
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
/* ============================================================
|
|
689
|
+
ROADMAP
|
|
690
|
+
============================================================ */
|
|
691
|
+
#roadmap { background: var(--bg-main); }
|
|
692
|
+
|
|
693
|
+
.rm-grid {
|
|
694
|
+
display: grid;
|
|
695
|
+
grid-template-columns: 1fr 1fr;
|
|
696
|
+
gap: 2.25rem;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.rm-head {
|
|
700
|
+
font-family: var(--mono);
|
|
701
|
+
font-size: .8rem;
|
|
702
|
+
font-weight: 600;
|
|
703
|
+
text-transform: uppercase;
|
|
704
|
+
letter-spacing: .09em;
|
|
705
|
+
padding-bottom: .7rem;
|
|
706
|
+
border-bottom: 1px solid var(--border);
|
|
707
|
+
margin-bottom: 1.1rem;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
.rm-item {
|
|
711
|
+
display: flex;
|
|
712
|
+
align-items: flex-start;
|
|
713
|
+
gap: .65rem;
|
|
714
|
+
padding: .35rem 0;
|
|
715
|
+
font-size: .825rem;
|
|
716
|
+
color: var(--text-3);
|
|
717
|
+
}
|
|
718
|
+
.rm-item.done { color: var(--text-2); }
|
|
719
|
+
.rm-ck { flex-shrink: 0; margin-top: .18rem; }
|
|
720
|
+
|
|
721
|
+
/* ============================================================
|
|
722
|
+
SPONSORS
|
|
723
|
+
============================================================ */
|
|
724
|
+
.sponsor-split {
|
|
725
|
+
display: grid;
|
|
726
|
+
grid-template-columns: 1fr 1fr;
|
|
727
|
+
gap: 4rem;
|
|
728
|
+
align-items: start;
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
.tier-card {
|
|
732
|
+
display: flex;
|
|
733
|
+
align-items: center;
|
|
734
|
+
justify-content: space-between;
|
|
735
|
+
background: var(--bg-card);
|
|
736
|
+
border: 1px solid var(--border);
|
|
737
|
+
border-radius: 8px;
|
|
738
|
+
padding: .875rem 1rem;
|
|
739
|
+
margin-bottom: .6rem;
|
|
740
|
+
}
|
|
741
|
+
.tier-card:last-child { margin-bottom: 0; }
|
|
742
|
+
.tier-name {
|
|
743
|
+
font-family: var(--mono);
|
|
744
|
+
font-size: .875rem;
|
|
745
|
+
font-weight: 600;
|
|
746
|
+
color: var(--text);
|
|
747
|
+
margin-bottom: .2rem;
|
|
748
|
+
}
|
|
749
|
+
.tier-detail { font-size: .76rem; color: var(--text-4); }
|
|
750
|
+
.tier-price {
|
|
751
|
+
font-family: var(--mono);
|
|
752
|
+
font-size: .875rem;
|
|
753
|
+
font-weight: 600;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.current-sponsors {
|
|
757
|
+
margin-top: 1.25rem;
|
|
758
|
+
background: var(--bg-card);
|
|
759
|
+
border: 1px solid var(--border);
|
|
760
|
+
border-radius: 8px;
|
|
761
|
+
padding: .875rem 1rem;
|
|
762
|
+
}
|
|
763
|
+
.cs-label {
|
|
764
|
+
font-size: .68rem;
|
|
765
|
+
color: var(--text-4);
|
|
766
|
+
text-transform: uppercase;
|
|
767
|
+
letter-spacing: .09em;
|
|
768
|
+
margin-bottom: .4rem;
|
|
769
|
+
font-family: var(--mono);
|
|
770
|
+
}
|
|
771
|
+
|
|
772
|
+
/* ============================================================
|
|
773
|
+
CTA
|
|
774
|
+
============================================================ */
|
|
775
|
+
#cta {
|
|
776
|
+
text-align: center;
|
|
777
|
+
background: var(--bg-main);
|
|
778
|
+
}
|
|
779
|
+
#cta h2 { margin-bottom: .75rem; }
|
|
780
|
+
#cta .sec-sub { margin-left: auto; margin-right: auto; }
|
|
781
|
+
|
|
782
|
+
.cta-install {
|
|
783
|
+
display: inline-flex;
|
|
784
|
+
align-items: center;
|
|
785
|
+
gap: .65rem;
|
|
786
|
+
background: var(--bg-card);
|
|
787
|
+
border: 1px solid var(--border);
|
|
788
|
+
border-radius: 10px;
|
|
789
|
+
padding: .9rem 1.35rem;
|
|
790
|
+
font-family: var(--mono);
|
|
791
|
+
font-size: .95rem;
|
|
792
|
+
cursor: pointer;
|
|
793
|
+
transition: border-color .15s;
|
|
794
|
+
user-select: all;
|
|
795
|
+
margin-bottom: 1.75rem;
|
|
796
|
+
}
|
|
797
|
+
.cta-install:hover { border-color: rgba(34,197,94,.4); }
|
|
798
|
+
|
|
799
|
+
.cta-btns {
|
|
800
|
+
display: flex;
|
|
801
|
+
gap: .65rem;
|
|
802
|
+
justify-content: center;
|
|
803
|
+
flex-wrap: wrap;
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
/* ============================================================
|
|
807
|
+
FOOTER
|
|
808
|
+
============================================================ */
|
|
809
|
+
footer {
|
|
810
|
+
border-top: 1px solid var(--border);
|
|
811
|
+
padding: 1.75rem 1.5rem;
|
|
812
|
+
max-width: var(--mw);
|
|
813
|
+
margin: 0 auto;
|
|
814
|
+
display: flex;
|
|
815
|
+
align-items: center;
|
|
816
|
+
justify-content: space-between;
|
|
817
|
+
flex-wrap: wrap;
|
|
818
|
+
gap: 1rem;
|
|
819
|
+
}
|
|
820
|
+
.footer-logo {
|
|
821
|
+
display: flex;
|
|
822
|
+
align-items: center;
|
|
823
|
+
gap: .45rem;
|
|
824
|
+
font-family: var(--body);
|
|
825
|
+
font-weight: 700;
|
|
826
|
+
font-size: .9rem;
|
|
827
|
+
color: var(--text-3);
|
|
828
|
+
}
|
|
829
|
+
.footer-links { display: flex; gap: 1.25rem; }
|
|
830
|
+
.footer-links a { font-size: .8rem; color: var(--text-4); transition: color .15s; }
|
|
831
|
+
.footer-links a:hover { color: var(--text-2); }
|
|
832
|
+
.footer-copy { font-size: .75rem; color: var(--text-5); }
|
|
833
|
+
|
|
834
|
+
/* ============================================================
|
|
835
|
+
RESPONSIVE
|
|
836
|
+
============================================================ */
|
|
837
|
+
@media (max-width: 960px) {
|
|
838
|
+
.hero-wrap { flex-direction: column; padding-top: 5.5rem; }
|
|
839
|
+
.hero-r { max-width: 100%; }
|
|
840
|
+
.pipeline { flex-direction: column; }
|
|
841
|
+
.parr { transform: rotate(90deg); padding: .4rem 0; justify-content: center; }
|
|
842
|
+
.mcp-split, .rm-grid, .sponsor-split { grid-template-columns: 1fr; gap: 2rem; }
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
@media (max-width: 640px) {
|
|
846
|
+
h1 { font-size: 2.2rem; }
|
|
847
|
+
.cmds-grid, .feats-grid { grid-template-columns: 1fr; }
|
|
848
|
+
.nav-links a:not(.nav-cta) { display: none; }
|
|
849
|
+
section { padding: 3.5rem 1.25rem; }
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
/* ============================================================
|
|
853
|
+
SCROLL REVEAL
|
|
854
|
+
============================================================ */
|
|
855
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
856
|
+
.reveal {
|
|
857
|
+
opacity: 0;
|
|
858
|
+
transform: translateY(18px);
|
|
859
|
+
transition: opacity .55s ease-out, transform .55s ease-out;
|
|
860
|
+
}
|
|
861
|
+
.reveal.visible { opacity: 1; transform: none; }
|
|
862
|
+
.reveal:nth-child(2) { transition-delay: .08s; }
|
|
863
|
+
.reveal:nth-child(3) { transition-delay: .16s; }
|
|
864
|
+
.reveal:nth-child(4) { transition-delay: .24s; }
|
|
865
|
+
.reveal:nth-child(5) { transition-delay: .32s; }
|
|
866
|
+
.reveal:nth-child(6) { transition-delay: .40s; }
|
|
867
|
+
}
|
|
868
|
+
</style>
|
|
869
|
+
</head>
|
|
870
|
+
<body>
|
|
871
|
+
|
|
872
|
+
<!-- ============================================================
|
|
873
|
+
NAV
|
|
874
|
+
============================================================ -->
|
|
875
|
+
<nav>
|
|
876
|
+
<a class="nav-logo" href="#">
|
|
877
|
+
<!-- n8m logo mark: two-panel "8" icon, faithful to brand asset -->
|
|
878
|
+
<svg class="logo-mark" viewBox="0 0 22 30" fill="none" aria-hidden="true">
|
|
879
|
+
<rect x="0" y="0" width="22" height="30" rx="5" fill="#22c55e"/>
|
|
880
|
+
<rect x="3.5" y="3" width="15" height="10" rx="3" fill="#0b0d14"/>
|
|
881
|
+
<rect x="3.5" y="17" width="15" height="10" rx="3" fill="#0b0d14"/>
|
|
882
|
+
</svg>
|
|
883
|
+
<span class="wordmark">n8m</span>
|
|
884
|
+
</a>
|
|
885
|
+
<div class="nav-links">
|
|
886
|
+
<a href="#how">Pipeline</a>
|
|
887
|
+
<a href="#commands">Commands</a>
|
|
888
|
+
<a href="#mcp">MCP</a>
|
|
889
|
+
<a href="#roadmap">Roadmap</a>
|
|
890
|
+
<a href="https://github.com/Lee-Holdings-International/n8m" target="_blank" rel="noopener">GitHub</a>
|
|
891
|
+
<a href="https://www.npmjs.com/package/@lhi/n8m" target="_blank" rel="noopener" class="nav-cta">npm</a>
|
|
892
|
+
</div>
|
|
893
|
+
</nav>
|
|
894
|
+
|
|
895
|
+
<!-- ============================================================
|
|
896
|
+
HERO
|
|
897
|
+
============================================================ -->
|
|
898
|
+
<div style="position:relative;overflow:hidden;">
|
|
899
|
+
<div class="hero-wrap">
|
|
900
|
+
<div class="hero-l">
|
|
901
|
+
|
|
902
|
+
<a class="badge"
|
|
903
|
+
href="https://github.com/Lee-Holdings-International/n8m/blob/main/README.md"
|
|
904
|
+
target="_blank" rel="noopener">
|
|
905
|
+
<span class="badge-pulse"></span>
|
|
906
|
+
New · MCP Server · Pattern Library · Offline Fixtures
|
|
907
|
+
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
908
|
+
<path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
909
|
+
</svg>
|
|
910
|
+
</a>
|
|
911
|
+
|
|
912
|
+
<h1>Stop clicking.<em>Start shipping.</em></h1>
|
|
913
|
+
|
|
914
|
+
<p class="hero-sub">
|
|
915
|
+
<strong>n8m</strong> is an open-source CLI that wraps your n8n instance with an agentic AI layer.
|
|
916
|
+
Describe what you want in plain English — the agent designs, builds, validates, and deploys it.<br><br>
|
|
917
|
+
No account. No server. Bring your own AI key.
|
|
918
|
+
</p>
|
|
919
|
+
|
|
920
|
+
<div class="install-box" onclick="copy('npx n8m create "your workflow"','copyBtn')">
|
|
921
|
+
<span class="ip">$</span>
|
|
922
|
+
<span class="ic">npx</span>
|
|
923
|
+
<span style="color:var(--text-3);"> n8m</span>
|
|
924
|
+
<span class="ec" style="color:var(--brand-hi);"> create</span>
|
|
925
|
+
<span class="is"> "your workflow"</span>
|
|
926
|
+
<button class="copy-btn" id="copyBtn" aria-label="Copy install command">copy</button>
|
|
927
|
+
</div>
|
|
928
|
+
|
|
929
|
+
<div class="hero-btns">
|
|
930
|
+
<a class="btn btn-pri" href="https://github.com/Lee-Holdings-International/n8m" target="_blank" rel="noopener">
|
|
931
|
+
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
932
|
+
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
|
|
933
|
+
</svg>
|
|
934
|
+
View on GitHub
|
|
935
|
+
</a>
|
|
936
|
+
<a class="btn btn-sec" href="https://www.npmjs.com/package/@lhi/n8m" target="_blank" rel="noopener">
|
|
937
|
+
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
938
|
+
<path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474C23.214 24 24 23.214 24 22.237V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L11.948 19.15H5.113z"/>
|
|
939
|
+
</svg>
|
|
940
|
+
npm
|
|
941
|
+
</a>
|
|
942
|
+
<a class="btn btn-sec" href="https://github.com/Lee-Holdings-International/n8m/blob/main/docs/DEVELOPER_GUIDE.md" target="_blank" rel="noopener">
|
|
943
|
+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
944
|
+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
|
945
|
+
<polyline points="14 2 14 8 20 8"/>
|
|
946
|
+
<line x1="16" y1="13" x2="8" y2="13"/>
|
|
947
|
+
<line x1="16" y1="17" x2="8" y2="17"/>
|
|
948
|
+
</svg>
|
|
949
|
+
Dev Guide
|
|
950
|
+
</a>
|
|
951
|
+
<a class="btn btn-sec" href="https://github.com/Lee-Holdings-International/n8m/discussions" target="_blank" rel="noopener">Discussions</a>
|
|
952
|
+
</div>
|
|
953
|
+
</div>
|
|
954
|
+
|
|
955
|
+
<!-- TERMINAL -->
|
|
956
|
+
<div class="hero-r">
|
|
957
|
+
<div class="terminal" role="region" aria-label="n8m CLI demo">
|
|
958
|
+
<div class="term-bar">
|
|
959
|
+
<div class="td td-r" aria-hidden="true"></div>
|
|
960
|
+
<div class="td td-y" aria-hidden="true"></div>
|
|
961
|
+
<div class="td td-g" aria-hidden="true"></div>
|
|
962
|
+
<div class="term-title">n8m — terminal</div>
|
|
963
|
+
</div>
|
|
964
|
+
<div class="term-body" id="termBody" aria-live="polite">
|
|
965
|
+
<span class="term-cursor" id="cursor"></span>
|
|
966
|
+
</div>
|
|
967
|
+
</div>
|
|
968
|
+
</div>
|
|
969
|
+
</div>
|
|
970
|
+
</div>
|
|
971
|
+
|
|
972
|
+
<!-- ============================================================
|
|
973
|
+
HOW IT WORKS / PIPELINE
|
|
974
|
+
============================================================ -->
|
|
975
|
+
<section id="how">
|
|
976
|
+
<div class="inner">
|
|
977
|
+
<div class="sec-label">Architecture</div>
|
|
978
|
+
<h2>The agentic pipeline</h2>
|
|
979
|
+
<p class="sec-sub">Three specialized AI agents, each with a defined role. QA failures loop back to the Engineer automatically — up to three times before escalating.</p>
|
|
980
|
+
|
|
981
|
+
<div class="pipeline">
|
|
982
|
+
|
|
983
|
+
<div class="pnode reveal">
|
|
984
|
+
<div class="picon pi-1" aria-hidden="true">
|
|
985
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
986
|
+
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
|
|
987
|
+
<polyline points="2 17 12 22 22 17"/>
|
|
988
|
+
<polyline points="2 12 12 17 22 12"/>
|
|
989
|
+
</svg>
|
|
990
|
+
</div>
|
|
991
|
+
<div class="pnum">Stage 01</div>
|
|
992
|
+
<div class="pname">Architect</div>
|
|
993
|
+
<p class="pdesc">Designs the workflow blueprint. Selects node types, defines execution flow, identifies required credentials, and consults the RAG-indexed pattern library.</p>
|
|
994
|
+
</div>
|
|
995
|
+
|
|
996
|
+
<div class="parr" aria-hidden="true">
|
|
997
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
998
|
+
</div>
|
|
999
|
+
|
|
1000
|
+
<div class="pnode reveal">
|
|
1001
|
+
<div class="picon pi-2" aria-hidden="true">
|
|
1002
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
1003
|
+
<polyline points="16 18 22 12 16 6"/>
|
|
1004
|
+
<polyline points="8 6 2 12 8 18"/>
|
|
1005
|
+
</svg>
|
|
1006
|
+
</div>
|
|
1007
|
+
<div class="pnum">Stage 02</div>
|
|
1008
|
+
<div class="pname">Engineer</div>
|
|
1009
|
+
<p class="pdesc">Generates the complete n8n workflow JSON from the blueprint. Injects matched patterns from the project-local library to reproduce proven approaches exactly.</p>
|
|
1010
|
+
</div>
|
|
1011
|
+
|
|
1012
|
+
<div class="parr" aria-hidden="true">
|
|
1013
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
1014
|
+
</div>
|
|
1015
|
+
|
|
1016
|
+
<div class="pnode reveal">
|
|
1017
|
+
<div class="picon pi-3" aria-hidden="true">
|
|
1018
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
1019
|
+
<polyline points="20 6 9 17 4 12"/>
|
|
1020
|
+
</svg>
|
|
1021
|
+
</div>
|
|
1022
|
+
<div class="pnum">Stage 03</div>
|
|
1023
|
+
<div class="pname">QA</div>
|
|
1024
|
+
<p class="pdesc">Validates the workflow against structural rules and n8n constraints. On failure, analyzes the error type, applies targeted fixes, and loops back to the Engineer.</p>
|
|
1025
|
+
</div>
|
|
1026
|
+
|
|
1027
|
+
<div class="parr" aria-hidden="true">
|
|
1028
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
1029
|
+
</div>
|
|
1030
|
+
|
|
1031
|
+
<div class="pnode reveal" style="border-color:rgba(34,197,94,.22);">
|
|
1032
|
+
<div class="picon pi-4" aria-hidden="true">
|
|
1033
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
1034
|
+
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
1035
|
+
</svg>
|
|
1036
|
+
</div>
|
|
1037
|
+
<div class="pnum">Output</div>
|
|
1038
|
+
<div class="pname">./workflows/</div>
|
|
1039
|
+
<p class="pdesc" style="color:var(--brand-hi);">workflow.json<br>README.md (+ Mermaid diagram)</p>
|
|
1040
|
+
</div>
|
|
1041
|
+
|
|
1042
|
+
</div>
|
|
1043
|
+
</div>
|
|
1044
|
+
</section>
|
|
1045
|
+
|
|
1046
|
+
<hr class="div">
|
|
1047
|
+
|
|
1048
|
+
<!-- ============================================================
|
|
1049
|
+
COMMANDS
|
|
1050
|
+
============================================================ -->
|
|
1051
|
+
<section id="commands">
|
|
1052
|
+
<div class="inner">
|
|
1053
|
+
<div class="sec-label">CLI Reference</div>
|
|
1054
|
+
<h2>Every command you need</h2>
|
|
1055
|
+
<p class="sec-sub">The full workflow lifecycle — from first generation to production deployment.</p>
|
|
1056
|
+
|
|
1057
|
+
<div class="cmds-grid">
|
|
1058
|
+
|
|
1059
|
+
<div class="cmd-card reveal">
|
|
1060
|
+
<div class="cmd-hdr">
|
|
1061
|
+
<div class="cmd-ico" style="background:rgba(34,197,94,.12);color:var(--brand-hi);" aria-hidden="true">
|
|
1062
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
1063
|
+
</div>
|
|
1064
|
+
<span class="cmd-name">n8m create</span>
|
|
1065
|
+
</div>
|
|
1066
|
+
<p class="cmd-desc">Generate a complete workflow from a plain-English description. The agentic pipeline handles design, build, and validation end-to-end.</p>
|
|
1067
|
+
<div class="cmd-ex">
|
|
1068
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">create</span> <span class="eq">"Slack DM on new GitHub PR"</span><br>
|
|
1069
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">create</span> <span class="ef">--multiline</span><br>
|
|
1070
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">create</span> <span class="eq">"..."</span> <span class="ef">--output</span> <span class="eq">./my-flow.json</span>
|
|
1071
|
+
</div>
|
|
1072
|
+
</div>
|
|
1073
|
+
|
|
1074
|
+
<div class="cmd-card reveal">
|
|
1075
|
+
<div class="cmd-hdr">
|
|
1076
|
+
<div class="cmd-ico" style="background:rgba(34,211,238,.1);color:var(--cyan);" aria-hidden="true">
|
|
1077
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
1078
|
+
</div>
|
|
1079
|
+
<span class="cmd-name" style="color:var(--cyan);">n8m modify</span>
|
|
1080
|
+
</div>
|
|
1081
|
+
<p class="cmd-desc">Modify a local file or live n8n workflow using natural language. Interactively browse local files and remote instance workflows.</p>
|
|
1082
|
+
<div class="cmd-ex">
|
|
1083
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">modify</span> <span class="eq">./flow.json</span><br>
|
|
1084
|
+
<span class="eq">"Add error handling to HTTP node"</span>
|
|
1085
|
+
</div>
|
|
1086
|
+
</div>
|
|
1087
|
+
|
|
1088
|
+
<div class="cmd-card reveal">
|
|
1089
|
+
<div class="cmd-hdr">
|
|
1090
|
+
<div class="cmd-ico" style="background:rgba(99,102,241,.12);color:var(--indigo-hi);" aria-hidden="true">
|
|
1091
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
1092
|
+
</div>
|
|
1093
|
+
<span class="cmd-name" style="color:var(--indigo-hi);">n8m test</span>
|
|
1094
|
+
</div>
|
|
1095
|
+
<p class="cmd-desc">Deploy ephemerally and validate. AI self-repair loop analyzes errors and applies targeted fixes automatically. Save fixtures for offline replay.</p>
|
|
1096
|
+
<div class="cmd-ex">
|
|
1097
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">test</span> <span class="ef">--ai-scenarios</span><br>
|
|
1098
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">test</span> <span class="ef">--fixture</span> <span class="eq">.n8m/fixtures/abc</span>
|
|
1099
|
+
</div>
|
|
1100
|
+
</div>
|
|
1101
|
+
|
|
1102
|
+
<div class="cmd-card reveal">
|
|
1103
|
+
<div class="cmd-hdr">
|
|
1104
|
+
<div class="cmd-ico" style="background:rgba(251,146,60,.1);color:var(--orange);" aria-hidden="true">
|
|
1105
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
1106
|
+
</div>
|
|
1107
|
+
<span class="cmd-name" style="color:var(--orange);">n8m deploy</span>
|
|
1108
|
+
</div>
|
|
1109
|
+
<p class="cmd-desc">Push a local workflow JSON to your n8n instance. CI-friendly non-interactive flags for create-or-update without prompts.</p>
|
|
1110
|
+
<div class="cmd-ex">
|
|
1111
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">deploy</span> <span class="eq">./flow.json</span> <span class="ef">--activate</span><br>
|
|
1112
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">deploy</span> <span class="eq">./flow.json</span> <span class="ef">--update</span> <span class="em"># CI</span>
|
|
1113
|
+
</div>
|
|
1114
|
+
</div>
|
|
1115
|
+
|
|
1116
|
+
<div class="cmd-card reveal">
|
|
1117
|
+
<div class="cmd-hdr">
|
|
1118
|
+
<div class="cmd-ico" style="background:rgba(167,139,250,.12);color:var(--purple);" aria-hidden="true">
|
|
1119
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
|
1120
|
+
</div>
|
|
1121
|
+
<span class="cmd-name" style="color:var(--purple);">n8m learn</span>
|
|
1122
|
+
</div>
|
|
1123
|
+
<p class="cmd-desc">Extract reusable engineering patterns from validated workflows. Import community patterns from GitHub. Patterns feed directly into future Engineer prompts.</p>
|
|
1124
|
+
<div class="cmd-ex">
|
|
1125
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">learn</span> <span class="ef">--all</span><br>
|
|
1126
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">learn</span> <span class="ef">--github</span> <span class="eq">owner/repo</span>
|
|
1127
|
+
</div>
|
|
1128
|
+
</div>
|
|
1129
|
+
|
|
1130
|
+
<div class="cmd-card reveal">
|
|
1131
|
+
<div class="cmd-hdr">
|
|
1132
|
+
<div class="cmd-ico" style="background:rgba(248,113,113,.1);color:var(--red);" aria-hidden="true">
|
|
1133
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
|
1134
|
+
</div>
|
|
1135
|
+
<span class="cmd-name" style="color:var(--red);">n8m fixture</span>
|
|
1136
|
+
</div>
|
|
1137
|
+
<p class="cmd-desc">Capture real execution data from n8n and replay it offline. No live instance, credentials, or external API calls needed for subsequent test runs.</p>
|
|
1138
|
+
<div class="cmd-ex">
|
|
1139
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">fixture</span> <span class="ef">capture</span> <span class="eq">abc123</span><br>
|
|
1140
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">fixture</span> <span class="ef">init</span> <span class="eq">abc123</span>
|
|
1141
|
+
</div>
|
|
1142
|
+
</div>
|
|
1143
|
+
|
|
1144
|
+
<div class="cmd-card reveal">
|
|
1145
|
+
<div class="cmd-hdr">
|
|
1146
|
+
<div class="cmd-ico" style="background:rgba(252,211,77,.1);color:var(--yellow);" aria-hidden="true">
|
|
1147
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
1148
|
+
</div>
|
|
1149
|
+
<span class="cmd-name" style="color:var(--yellow);">n8m doc</span>
|
|
1150
|
+
</div>
|
|
1151
|
+
<p class="cmd-desc">Generate visual documentation for any workflow. Outputs a Mermaid.js flowchart and AI-generated execution summary as README.md.</p>
|
|
1152
|
+
<div class="cmd-ex">
|
|
1153
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">doc</span> <span class="eq">./workflows/my-flow.json</span><br>
|
|
1154
|
+
<span class="em"># → writes README.md + Mermaid diagram</span>
|
|
1155
|
+
</div>
|
|
1156
|
+
</div>
|
|
1157
|
+
|
|
1158
|
+
<div class="cmd-card reveal">
|
|
1159
|
+
<div class="cmd-hdr">
|
|
1160
|
+
<div class="cmd-ico" style="background:rgba(34,197,94,.1);color:var(--brand-hi);" aria-hidden="true">
|
|
1161
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
1162
|
+
</div>
|
|
1163
|
+
<span class="cmd-name">n8m mcp</span>
|
|
1164
|
+
</div>
|
|
1165
|
+
<p class="cmd-desc">Launch an MCP server exposing all n8m capabilities as tools for Claude Desktop, Cursor, Windsurf, and any MCP-compatible client.</p>
|
|
1166
|
+
<div class="cmd-ex">
|
|
1167
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">mcp</span><br>
|
|
1168
|
+
<span class="em"># → 8 tools available over stdio</span>
|
|
1169
|
+
</div>
|
|
1170
|
+
</div>
|
|
1171
|
+
|
|
1172
|
+
</div>
|
|
1173
|
+
</div>
|
|
1174
|
+
</section>
|
|
1175
|
+
|
|
1176
|
+
<hr class="div">
|
|
1177
|
+
|
|
1178
|
+
<!-- ============================================================
|
|
1179
|
+
FEATURES
|
|
1180
|
+
============================================================ -->
|
|
1181
|
+
<section id="features">
|
|
1182
|
+
<div class="inner">
|
|
1183
|
+
<div class="sec-label">Why n8m</div>
|
|
1184
|
+
<h2>Built for real automation work</h2>
|
|
1185
|
+
<p class="sec-sub">Every design decision prioritizes local-first, no-lock-in, developer-grade workflows.</p>
|
|
1186
|
+
|
|
1187
|
+
<div class="feats-grid">
|
|
1188
|
+
|
|
1189
|
+
<div class="feat reveal">
|
|
1190
|
+
<div class="feat-ico" style="background:rgba(34,197,94,.12);color:var(--brand-hi);" aria-hidden="true">
|
|
1191
|
+
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
|
1192
|
+
</div>
|
|
1193
|
+
<div class="feat-title">Local-first, zero lock-in</div>
|
|
1194
|
+
<p class="feat-desc">Credentials and workflow files live on your machine. No cloud service, no account, no telemetry. Works entirely with your existing n8n instance.</p>
|
|
1195
|
+
</div>
|
|
1196
|
+
|
|
1197
|
+
<div class="feat reveal">
|
|
1198
|
+
<div class="feat-ico" style="background:rgba(99,102,241,.12);color:var(--indigo-hi);" aria-hidden="true">
|
|
1199
|
+
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
1200
|
+
</div>
|
|
1201
|
+
<div class="feat-title">Self-healing test loop</div>
|
|
1202
|
+
<p class="feat-desc">When tests fail, the AI repair loop identifies the error type, applies targeted fixes (Code nodes, payloads, binary fields), and retries — no human needed.</p>
|
|
1203
|
+
</div>
|
|
1204
|
+
|
|
1205
|
+
<div class="feat reveal">
|
|
1206
|
+
<div class="feat-ico" style="background:rgba(167,139,250,.12);color:var(--purple);" aria-hidden="true">
|
|
1207
|
+
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
|
|
1208
|
+
</div>
|
|
1209
|
+
<div class="feat-title">Self-improving pattern library</div>
|
|
1210
|
+
<p class="feat-desc">Every validated workflow you <code>n8m learn</code> on enriches the library. Future generations automatically apply proven approaches to similar problems.</p>
|
|
1211
|
+
</div>
|
|
1212
|
+
|
|
1213
|
+
<div class="feat reveal">
|
|
1214
|
+
<div class="feat-ico" style="background:rgba(34,211,238,.1);color:var(--cyan);" aria-hidden="true">
|
|
1215
|
+
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
|
|
1216
|
+
</div>
|
|
1217
|
+
<div class="feat-title">Offline fixture testing</div>
|
|
1218
|
+
<p class="feat-desc">Capture real n8n execution data once, then replay it offline forever. Commit fixtures to your repo — your team runs the same tests without a live instance.</p>
|
|
1219
|
+
</div>
|
|
1220
|
+
|
|
1221
|
+
<div class="feat reveal">
|
|
1222
|
+
<div class="feat-ico" style="background:rgba(251,146,60,.1);color:var(--orange);" aria-hidden="true">
|
|
1223
|
+
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
|
|
1224
|
+
</div>
|
|
1225
|
+
<div class="feat-title">HITL pauses & resume</div>
|
|
1226
|
+
<p class="feat-desc">The agent pauses mid-run for human review. Sessions persist in SQLite — resume interrupted runs at any time with <code>n8m resume <thread-id></code>.</p>
|
|
1227
|
+
</div>
|
|
1228
|
+
|
|
1229
|
+
<div class="feat reveal">
|
|
1230
|
+
<div class="feat-ico" style="background:rgba(252,211,77,.1);color:var(--yellow);" aria-hidden="true">
|
|
1231
|
+
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
|
|
1232
|
+
</div>
|
|
1233
|
+
<div class="feat-title">Bring any AI model</div>
|
|
1234
|
+
<p class="feat-desc">Works with OpenAI, Claude, Gemini, Ollama, Groq, Together, or any OpenAI-compatible API endpoint. Switch providers with one <code>config</code> flag.</p>
|
|
1235
|
+
</div>
|
|
1236
|
+
|
|
1237
|
+
</div>
|
|
1238
|
+
</div>
|
|
1239
|
+
</section>
|
|
1240
|
+
|
|
1241
|
+
<hr class="div">
|
|
1242
|
+
|
|
1243
|
+
<!-- ============================================================
|
|
1244
|
+
PROVIDERS
|
|
1245
|
+
============================================================ -->
|
|
1246
|
+
<section id="providers">
|
|
1247
|
+
<div class="inner">
|
|
1248
|
+
<div class="sec-label">AI Providers</div>
|
|
1249
|
+
<h2>Bring your own AI</h2>
|
|
1250
|
+
<p class="sec-sub">n8m is provider-agnostic. Configure once, works everywhere.</p>
|
|
1251
|
+
|
|
1252
|
+
<div class="prov-grid">
|
|
1253
|
+
<div class="prov-pill"><span class="pdot" style="background:#74aa9c;"></span>OpenAI <span style="color:var(--text-5);font-size:.72rem;">gpt-4o</span></div>
|
|
1254
|
+
<div class="prov-pill"><span class="pdot" style="background:#d4a373;"></span>Anthropic Claude <span style="color:var(--text-5);font-size:.72rem;">claude-sonnet-4-6</span></div>
|
|
1255
|
+
<div class="prov-pill"><span class="pdot" style="background:#4285f4;"></span>Google Gemini <span style="color:var(--text-5);font-size:.72rem;">gemini-2.5-flash</span></div>
|
|
1256
|
+
<div class="prov-pill"><span class="pdot" style="background:#a78bfa;"></span>Ollama <span style="color:var(--text-5);font-size:.72rem;">local / llama3</span></div>
|
|
1257
|
+
<div class="prov-pill"><span class="pdot" style="background:#f59e0b;"></span>Groq <span style="color:var(--text-5);font-size:.72rem;">llama-3.3-70b</span></div>
|
|
1258
|
+
<div class="prov-pill"><span class="pdot" style="background:var(--brand);"></span>Any OpenAI-compatible <span style="color:var(--text-5);font-size:.72rem;">--ai-base-url</span></div>
|
|
1259
|
+
</div>
|
|
1260
|
+
|
|
1261
|
+
<div class="config-box">
|
|
1262
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">config</span> <span class="ef">--ai-provider</span> <span class="eq">anthropic</span> <span class="ef">--ai-key</span> <span class="eq">sk-ant-...</span><br>
|
|
1263
|
+
<span class="ep">$</span> <span class="ec">n8m</span> <span class="es">config</span> <span class="ef">--n8n-url</span> <span class="eq">https://n8n.example.com</span> <span class="ef">--n8n-key</span> <span class="eq">...</span><br>
|
|
1264
|
+
<span class="em"># credentials saved to ~/.n8m/config.json — persists across npx invocations</span>
|
|
1265
|
+
</div>
|
|
1266
|
+
</div>
|
|
1267
|
+
</section>
|
|
1268
|
+
|
|
1269
|
+
<hr class="div">
|
|
1270
|
+
|
|
1271
|
+
<!-- ============================================================
|
|
1272
|
+
MCP
|
|
1273
|
+
============================================================ -->
|
|
1274
|
+
<section id="mcp">
|
|
1275
|
+
<div class="inner">
|
|
1276
|
+
<div class="mcp-split">
|
|
1277
|
+
|
|
1278
|
+
<div>
|
|
1279
|
+
<div class="sec-label">MCP Server</div>
|
|
1280
|
+
<h2>Use n8m inside Claude Desktop</h2>
|
|
1281
|
+
<p class="sec-sub" style="margin-bottom:1.5rem;">n8m exposes 8 tools via the Model Context Protocol. Any MCP client can create, test, and deploy n8n workflows directly from a conversation.</p>
|
|
1282
|
+
|
|
1283
|
+
<div class="check-list">
|
|
1284
|
+
<div class="check-item">
|
|
1285
|
+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
|
|
1286
|
+
<span>create_workflow, modify_workflow, test_workflow</span>
|
|
1287
|
+
</div>
|
|
1288
|
+
<div class="check-item">
|
|
1289
|
+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
|
|
1290
|
+
<span>deploy_workflow, get_workflow, list_workflows</span>
|
|
1291
|
+
</div>
|
|
1292
|
+
<div class="check-item">
|
|
1293
|
+
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
|
|
1294
|
+
<span>delete_workflow, generate_docs</span>
|
|
1295
|
+
</div>
|
|
1296
|
+
</div>
|
|
1297
|
+
|
|
1298
|
+
<a class="btn btn-pri" href="https://github.com/Lee-Holdings-International/n8m#n8m-mcp--launch-the-mcp-server" target="_blank" rel="noopener">MCP setup guide</a>
|
|
1299
|
+
</div>
|
|
1300
|
+
|
|
1301
|
+
<div>
|
|
1302
|
+
<div class="jfile">claude_desktop_config.json</div>
|
|
1303
|
+
<div class="json-box"><span class="jp">{</span>
|
|
1304
|
+
<span class="jk">"mcpServers"</span><span class="jp">: {</span>
|
|
1305
|
+
<span class="jk">"n8m"</span><span class="jp">: {</span>
|
|
1306
|
+
<span class="jk">"command"</span><span class="jp">: </span><span class="jv">"npx"</span><span class="jp">,</span>
|
|
1307
|
+
<span class="jk">"args"</span><span class="jp">: [</span><span class="jv">"n8m"</span><span class="jp">,</span> <span class="jv">"mcp"</span><span class="jp">]</span>
|
|
1308
|
+
<span class="jp">}</span>
|
|
1309
|
+
<span class="jp">}</span>
|
|
1310
|
+
<span class="jp">}</span></div>
|
|
1311
|
+
</div>
|
|
1312
|
+
|
|
1313
|
+
</div>
|
|
1314
|
+
</div>
|
|
1315
|
+
</section>
|
|
1316
|
+
|
|
1317
|
+
<hr class="div">
|
|
1318
|
+
|
|
1319
|
+
<!-- ============================================================
|
|
1320
|
+
ROADMAP
|
|
1321
|
+
============================================================ -->
|
|
1322
|
+
<section id="roadmap">
|
|
1323
|
+
<div class="inner">
|
|
1324
|
+
<div class="sec-label">Roadmap</div>
|
|
1325
|
+
<h2>What's shipped, what's next</h2>
|
|
1326
|
+
<p class="sec-sub">n8m ships fast. Check GitHub for the latest.</p>
|
|
1327
|
+
|
|
1328
|
+
<div class="rm-grid">
|
|
1329
|
+
|
|
1330
|
+
<div>
|
|
1331
|
+
<div class="rm-head" style="color:var(--brand);">Shipped</div>
|
|
1332
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>Agentic graph (Architect → Engineer → QA)</div>
|
|
1333
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>SQLite session persistence</div>
|
|
1334
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>HITL interrupts and resume</div>
|
|
1335
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>Sub-workflow dependency resolution in tests</div>
|
|
1336
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>Multi-provider AI support (OpenAI, Claude, Gemini, Ollama…)</div>
|
|
1337
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>Automatic documentation generation (Mermaid + summary)</div>
|
|
1338
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>Fixture record & replay — offline testing with real data</div>
|
|
1339
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>Pattern library (extract & reuse from validated workflows)</div>
|
|
1340
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>GitHub pattern archive import (<code>n8m learn --github</code>)</div>
|
|
1341
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>MCP server — 8 tools for full workflow lifecycle</div>
|
|
1342
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>Non-interactive deploy flags (CI-ready)</div>
|
|
1343
|
+
<div class="rm-item done"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>Credential awareness — AI consults live instance</div>
|
|
1344
|
+
</div>
|
|
1345
|
+
|
|
1346
|
+
<div>
|
|
1347
|
+
<div class="rm-head" style="color:var(--text-3);">Coming Soon</div>
|
|
1348
|
+
<div class="rm-item"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg><span><strong style="color:var(--text-2);">n8m watch</strong> — file-system watcher with live reload</span></div>
|
|
1349
|
+
<div class="rm-item"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg><span><strong style="color:var(--text-2);">n8m diff</strong> — structural diff between workflow versions</span></div>
|
|
1350
|
+
<div class="rm-item"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg><span>Parallel test runs — multiple fixtures concurrently</span></div>
|
|
1351
|
+
<div class="rm-item"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg><span><strong style="color:var(--text-2);">n8m debug</strong> — stream node-by-node output in real time</span></div>
|
|
1352
|
+
<div class="rm-item"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg><span><strong style="color:var(--text-2);">n8m chat</strong> — interactive REPL with incremental AI edits</span></div>
|
|
1353
|
+
<div class="rm-item"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg><span>Workflow linter — static analysis before deploy</span></div>
|
|
1354
|
+
<div class="rm-item"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg><span>Multi-instance deploy — staging and production in one command</span></div>
|
|
1355
|
+
<div class="rm-item"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg><span>Workflow marketplace — publish & install community workflows</span></div>
|
|
1356
|
+
<div class="rm-item"><svg class="rm-ck" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--text-5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/></svg><span>LangGraph trace export — full agentic reasoning log</span></div>
|
|
1357
|
+
</div>
|
|
1358
|
+
|
|
1359
|
+
</div>
|
|
1360
|
+
</div>
|
|
1361
|
+
</section>
|
|
1362
|
+
|
|
1363
|
+
<hr class="div">
|
|
1364
|
+
|
|
1365
|
+
<!-- ============================================================
|
|
1366
|
+
SPONSORS
|
|
1367
|
+
============================================================ -->
|
|
1368
|
+
<section id="sponsors">
|
|
1369
|
+
<div class="inner">
|
|
1370
|
+
<div class="sponsor-split">
|
|
1371
|
+
|
|
1372
|
+
<div>
|
|
1373
|
+
<div class="sec-label">Open Source</div>
|
|
1374
|
+
<h2>MIT Licensed.<br>Free forever.</h2>
|
|
1375
|
+
<p class="sec-sub" style="margin-bottom:1.5rem;">Sponsorship funds AI API costs, continued development, and keeping up with n8n's rapidly evolving node ecosystem.</p>
|
|
1376
|
+
<div style="display:flex;gap:.65rem;flex-wrap:wrap;">
|
|
1377
|
+
<a class="btn btn-pri" href="https://ko-fi.com/lcanady" target="_blank" rel="noopener">Ko-fi</a>
|
|
1378
|
+
<a class="btn btn-sec" href="https://github.com/sponsors/lcanady" target="_blank" rel="noopener">GitHub Sponsors</a>
|
|
1379
|
+
</div>
|
|
1380
|
+
</div>
|
|
1381
|
+
|
|
1382
|
+
<div>
|
|
1383
|
+
<div class="rm-head" style="color:var(--text-3);margin-bottom:1rem;">Sponsor Tiers</div>
|
|
1384
|
+
<div class="tier-card">
|
|
1385
|
+
<div><div class="tier-name">Supporter</div><div class="tier-detail">Name in README sponsors list</div></div>
|
|
1386
|
+
<div class="tier-price" style="color:var(--brand);">$5/mo</div>
|
|
1387
|
+
</div>
|
|
1388
|
+
<div class="tier-card">
|
|
1389
|
+
<div><div class="tier-name">Studio</div><div class="tier-detail">Logo in README + priority issue responses</div></div>
|
|
1390
|
+
<div class="tier-price" style="color:var(--brand-hi);">$25/mo</div>
|
|
1391
|
+
</div>
|
|
1392
|
+
<div class="tier-card" style="border-color:rgba(34,197,94,.25);">
|
|
1393
|
+
<div><div class="tier-name">Enterprise</div><div class="tier-detail">Logo + direct feature request line</div></div>
|
|
1394
|
+
<div class="tier-price" style="color:var(--indigo-hi);">$100/mo</div>
|
|
1395
|
+
</div>
|
|
1396
|
+
<div class="current-sponsors">
|
|
1397
|
+
<div class="cs-label">Current Sponsors</div>
|
|
1398
|
+
<div style="font-size:.875rem;color:var(--text-2);">The Daily Caller</div>
|
|
1399
|
+
</div>
|
|
1400
|
+
</div>
|
|
1401
|
+
|
|
1402
|
+
</div>
|
|
1403
|
+
</div>
|
|
1404
|
+
</section>
|
|
1405
|
+
|
|
1406
|
+
<hr class="div">
|
|
1407
|
+
|
|
1408
|
+
<!-- ============================================================
|
|
1409
|
+
CTA
|
|
1410
|
+
============================================================ -->
|
|
1411
|
+
<section id="cta">
|
|
1412
|
+
<div class="inner">
|
|
1413
|
+
<div class="sec-label">Get started</div>
|
|
1414
|
+
<h2>Ready to stop clicking?</h2>
|
|
1415
|
+
<p class="sec-sub">No account. No server. No lock-in. Just your n8n instance and an AI key.</p>
|
|
1416
|
+
|
|
1417
|
+
<div class="cta-install" onclick="copy('npx n8m create "describe your workflow"','copyBtnCta')">
|
|
1418
|
+
<span style="color:var(--text-5);">$</span>
|
|
1419
|
+
<span class="ic">npx</span>
|
|
1420
|
+
<span style="color:var(--text-3);"> n8m</span>
|
|
1421
|
+
<span class="ec" style="color:var(--brand-hi);"> create</span>
|
|
1422
|
+
<span class="is"> "describe your workflow"</span>
|
|
1423
|
+
<button class="copy-btn" id="copyBtnCta" aria-label="Copy command">copy</button>
|
|
1424
|
+
</div>
|
|
1425
|
+
|
|
1426
|
+
<div class="cta-btns">
|
|
1427
|
+
<a class="btn btn-pri" href="https://github.com/Lee-Holdings-International/n8m" target="_blank" rel="noopener">View on GitHub</a>
|
|
1428
|
+
<a class="btn btn-sec" href="https://www.npmjs.com/package/@lhi/n8m" target="_blank" rel="noopener">npm package</a>
|
|
1429
|
+
<a class="btn btn-sec" href="https://github.com/Lee-Holdings-International/n8m/blob/main/docs/DEVELOPER_GUIDE.md" target="_blank" rel="noopener">Developer Guide</a>
|
|
1430
|
+
<a class="btn btn-sec" href="https://github.com/Lee-Holdings-International/n8m/discussions" target="_blank" rel="noopener">Discussions</a>
|
|
1431
|
+
</div>
|
|
1432
|
+
</div>
|
|
1433
|
+
</section>
|
|
1434
|
+
|
|
1435
|
+
<!-- ============================================================
|
|
1436
|
+
FOOTER
|
|
1437
|
+
============================================================ -->
|
|
1438
|
+
<footer>
|
|
1439
|
+
<div class="footer-logo">
|
|
1440
|
+
<svg width="18" height="24" viewBox="0 0 22 30" fill="none" aria-hidden="true">
|
|
1441
|
+
<rect x="0" y="0" width="22" height="30" rx="5" fill="#22c55e"/>
|
|
1442
|
+
<rect x="3.5" y="3" width="15" height="10" rx="3" fill="#0b0d14"/>
|
|
1443
|
+
<rect x="3.5" y="17" width="15" height="10" rx="3" fill="#0b0d14"/>
|
|
1444
|
+
</svg>
|
|
1445
|
+
n8m
|
|
1446
|
+
</div>
|
|
1447
|
+
<div class="footer-links">
|
|
1448
|
+
<a href="https://github.com/Lee-Holdings-International/n8m" target="_blank" rel="noopener">GitHub</a>
|
|
1449
|
+
<a href="https://www.npmjs.com/package/@lhi/n8m" target="_blank" rel="noopener">npm</a>
|
|
1450
|
+
<a href="https://github.com/Lee-Holdings-International/n8m/blob/main/docs/DEVELOPER_GUIDE.md" target="_blank" rel="noopener">Docs</a>
|
|
1451
|
+
<a href="https://github.com/Lee-Holdings-International/n8m/discussions" target="_blank" rel="noopener">Discussions</a>
|
|
1452
|
+
<a href="https://github.com/Lee-Holdings-International/n8m/blob/main/LICENSE" target="_blank" rel="noopener">MIT License</a>
|
|
1453
|
+
</div>
|
|
1454
|
+
<div class="footer-copy">© 2026 Lee Holdings International · Open Source</div>
|
|
1455
|
+
</footer>
|
|
1456
|
+
|
|
1457
|
+
<!-- ============================================================
|
|
1458
|
+
SCRIPTS
|
|
1459
|
+
============================================================ -->
|
|
1460
|
+
<script>
|
|
1461
|
+
/* ── COPY ── */
|
|
1462
|
+
function copy(text, btnId) {
|
|
1463
|
+
const btn = document.getElementById(btnId);
|
|
1464
|
+
const plain = text.replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
|
|
1465
|
+
navigator.clipboard.writeText(plain).then(() => {
|
|
1466
|
+
btn.textContent = 'copied!';
|
|
1467
|
+
btn.classList.add('ok');
|
|
1468
|
+
setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('ok'); }, 2000);
|
|
1469
|
+
});
|
|
1470
|
+
}
|
|
1471
|
+
|
|
1472
|
+
/* ── TERMINAL ANIMATION ── */
|
|
1473
|
+
const FRAMES = [
|
|
1474
|
+
{ chars: '$ n8m create "Send Slack DM on new GitHub PR"',
|
|
1475
|
+
html: '<span class="tp">$</span> <span class="tc">n8m</span> <span class="tb">create</span> <span class="ts">"Send Slack DM on new GitHub PR"</span>',
|
|
1476
|
+
type: 'type', pause: 700 },
|
|
1477
|
+
{ html: '', type: 'blank', pause: 150 },
|
|
1478
|
+
{ html: '<span class="tl"> Architect</span> <span class="td2">Analyzing requirements...</span>', type: 'line', pause: 550 },
|
|
1479
|
+
{ html: '<span class="tch"> ✓</span> <span style="color:var(--text-2)">Blueprint ready</span> <span class="td2">· 4 nodes identified</span>', type: 'line', pause: 200 },
|
|
1480
|
+
{ html: '<span class="td2"> GitHub Webhook → Filter → Slack Message → Logger</span>', type: 'line', pause: 650 },
|
|
1481
|
+
{ html: '', type: 'blank', pause: 150 },
|
|
1482
|
+
{ html: '<span class="tl"> Engineer</span> <span class="td2">Building workflow JSON...</span>', type: 'line', pause: 700 },
|
|
1483
|
+
{ html: '<span class="tch"> ✓</span> <span style="color:var(--text-2)">Workflow generated</span> <span class="td2">· 143 lines</span>', type: 'line', pause: 650 },
|
|
1484
|
+
{ html: '', type: 'blank', pause: 150 },
|
|
1485
|
+
{ html: '<span class="tl"> QA</span> <span class="td2">Validating structure...</span>', type: 'line', pause: 500 },
|
|
1486
|
+
{ html: '<span class="tch"> ✓</span> <span style="color:var(--text-2)">All checks passed</span>', type: 'line', pause: 350 },
|
|
1487
|
+
{ html: '', type: 'blank', pause: 150 },
|
|
1488
|
+
{ html: '<span class="tok"> Saved</span> <span class="tf">./workflows/github-pr-slack/</span>', type: 'line', pause: 130 },
|
|
1489
|
+
{ html: '<span class="tf"> ├── workflow.json</span>', type: 'line', pause: 130 },
|
|
1490
|
+
{ html: '<span class="tf"> └── README.md</span>', type: 'line', pause: 3500 },
|
|
1491
|
+
];
|
|
1492
|
+
|
|
1493
|
+
const termBody = document.getElementById('termBody');
|
|
1494
|
+
let running = false;
|
|
1495
|
+
|
|
1496
|
+
async function sleep(ms) {
|
|
1497
|
+
return new Promise(r => setTimeout(r, ms));
|
|
1498
|
+
}
|
|
1499
|
+
|
|
1500
|
+
async function runTerminal() {
|
|
1501
|
+
if (running) return;
|
|
1502
|
+
running = true;
|
|
1503
|
+
|
|
1504
|
+
termBody.innerHTML = '';
|
|
1505
|
+
const cursor = document.createElement('span');
|
|
1506
|
+
cursor.className = 'term-cursor';
|
|
1507
|
+
cursor.id = 'cursor';
|
|
1508
|
+
termBody.appendChild(cursor);
|
|
1509
|
+
|
|
1510
|
+
for (const frame of FRAMES) {
|
|
1511
|
+
const cur = document.getElementById('cursor');
|
|
1512
|
+
|
|
1513
|
+
if (frame.type === 'blank') {
|
|
1514
|
+
termBody.insertBefore(document.createElement('br'), cur);
|
|
1515
|
+
await sleep(frame.pause);
|
|
1516
|
+
continue;
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
const span = document.createElement('span');
|
|
1520
|
+
|
|
1521
|
+
if (frame.type === 'type') {
|
|
1522
|
+
termBody.insertBefore(span, cur);
|
|
1523
|
+
termBody.insertBefore(document.createElement('br'), cur);
|
|
1524
|
+
for (let i = 0; i <= frame.chars.length; i++) {
|
|
1525
|
+
span.textContent = frame.chars.slice(0, i);
|
|
1526
|
+
await sleep(i === 0 ? 0 : 30);
|
|
1527
|
+
}
|
|
1528
|
+
span.innerHTML = frame.html;
|
|
1529
|
+
} else {
|
|
1530
|
+
span.innerHTML = frame.html;
|
|
1531
|
+
termBody.insertBefore(span, cur);
|
|
1532
|
+
termBody.insertBefore(document.createElement('br'), cur);
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
await sleep(frame.pause);
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
running = false;
|
|
1539
|
+
setTimeout(runTerminal, 2200);
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
/* start on scroll into view */
|
|
1543
|
+
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
1544
|
+
termBody.innerHTML = FRAMES
|
|
1545
|
+
.filter(f => f.type !== 'blank')
|
|
1546
|
+
.map(f => `<span>${f.html}</span><br>`)
|
|
1547
|
+
.join('');
|
|
1548
|
+
} else {
|
|
1549
|
+
new IntersectionObserver((entries, obs) => {
|
|
1550
|
+
if (entries[0].isIntersecting) { obs.disconnect(); runTerminal(); }
|
|
1551
|
+
}, { threshold: 0.25 }).observe(termBody);
|
|
1552
|
+
}
|
|
1553
|
+
|
|
1554
|
+
/* ── NAV SCROLL STATE ── */
|
|
1555
|
+
const navEl = document.querySelector('nav');
|
|
1556
|
+
window.addEventListener('scroll', () => {
|
|
1557
|
+
navEl.classList.toggle('scrolled', window.scrollY > 60);
|
|
1558
|
+
}, { passive: true });
|
|
1559
|
+
|
|
1560
|
+
/* ── SCROLL REVEAL ── */
|
|
1561
|
+
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
1562
|
+
new IntersectionObserver(entries => {
|
|
1563
|
+
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });
|
|
1564
|
+
}, { threshold: 0.1 }).observe
|
|
1565
|
+
;
|
|
1566
|
+
document.querySelectorAll('.reveal').forEach(el => {
|
|
1567
|
+
new IntersectionObserver((entries, obs) => {
|
|
1568
|
+
if (entries[0].isIntersecting) { el.classList.add('visible'); obs.disconnect(); }
|
|
1569
|
+
}, { threshold: 0.1 }).observe(el);
|
|
1570
|
+
});
|
|
1571
|
+
} else {
|
|
1572
|
+
document.querySelectorAll('.reveal').forEach(el => el.classList.add('visible'));
|
|
1573
|
+
}
|
|
1574
|
+
</script>
|
|
1575
|
+
|
|
1576
|
+
</body>
|
|
1577
|
+
</html>
|