mycontext-cli 2.0.5 → 2.0.6
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 +77 -611
- package/dist/package.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
[](https://nodejs.org)
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
Generate production-ready React/Next.js components **one at a time**, preview them visually, then scale to complete applications. Every component guaranteed **zero TypeScript/ESLint/build errors**.
|
|
10
10
|
|
|
11
11
|
## 🚀 Quick Start
|
|
12
12
|
|
|
@@ -14,671 +14,133 @@ Build production-ready React/Next.js components **one at a time**, preview them
|
|
|
14
14
|
# Install globally
|
|
15
15
|
npm install -g mycontext-cli
|
|
16
16
|
|
|
17
|
-
#
|
|
17
|
+
# 1. Initialize project
|
|
18
18
|
mycontext init my-app
|
|
19
|
-
mycontext generate-components Button --with-tests
|
|
20
|
-
mycontext preview components
|
|
21
|
-
mycontext build-app --interactive # Scale to full app when ready
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## 💡 Philosophy: Component-First Development
|
|
25
|
-
|
|
26
|
-
MyContext starts small and scales gradually:
|
|
27
|
-
|
|
28
|
-
1. **Generate individual components** → Build your component library piece by piece
|
|
29
|
-
2. **Visual preview** → See components in browser before integration
|
|
30
|
-
3. **Automatic validation** → TypeScript, ESLint, build checks on every component
|
|
31
|
-
4. **Iterate quickly** → Fix issues at component-level, not app-level
|
|
32
|
-
5. **Scale when ready** → Assemble validated components into full applications
|
|
33
|
-
|
|
34
|
-
**Result:** Component libraries with 0 errors, ready for production.
|
|
35
|
-
|
|
36
|
-
---
|
|
37
|
-
|
|
38
|
-
## 🎯 When to Use MyContext
|
|
39
|
-
|
|
40
|
-
### ✅ Perfect For
|
|
41
|
-
|
|
42
|
-
**🚀 MVPs & Prototypes**
|
|
43
|
-
- Ship standard features in 7-15 days, not months
|
|
44
|
-
- Focus on validating your unique value proposition
|
|
45
|
-
- Get to market fast with production-ready code
|
|
46
|
-
|
|
47
|
-
**🏢 Internal Tools & Admin Dashboards**
|
|
48
|
-
- Employee management systems
|
|
49
|
-
- CRUD applications
|
|
50
|
-
- Content management interfaces
|
|
51
|
-
- Analytics dashboards
|
|
52
|
-
|
|
53
|
-
**👤 Solo Developers & Small Teams**
|
|
54
|
-
- Skip the authentication/dashboard boilerplate
|
|
55
|
-
- Focus on your product's unique features
|
|
56
|
-
- Reuse component libraries across projects
|
|
57
|
-
|
|
58
|
-
**📦 Apps Built on Standard Patterns**
|
|
59
|
-
- Authentication flows (login, signup, password reset)
|
|
60
|
-
- User dashboards and profiles
|
|
61
|
-
- Settings and configuration pages
|
|
62
|
-
- Marketing pages (home, pricing, about)
|
|
63
|
-
- CRUD operations and data tables
|
|
64
|
-
|
|
65
|
-
**⚡ Rapid Validation & Testing**
|
|
66
|
-
- Quickly test product ideas with real users
|
|
67
|
-
- Build multiple variations to find product-market fit
|
|
68
|
-
- Iterate fast with validated components
|
|
69
|
-
|
|
70
|
-
### ⚠️ Not Ideal For
|
|
71
|
-
|
|
72
|
-
**🎨 Highly Custom UI/UX**
|
|
73
|
-
- Apps where custom design IS the product (Figma, Notion, Linear)
|
|
74
|
-
- Unique component libraries and design systems
|
|
75
|
-
- Apps with non-standard interaction patterns
|
|
76
|
-
|
|
77
|
-
**🏦 Complex Domain-Specific Logic**
|
|
78
|
-
- Fintech apps with specialized workflows
|
|
79
|
-
- Healthcare apps with custom compliance requirements
|
|
80
|
-
- Apps where every flow is unique to your industry
|
|
81
|
-
|
|
82
|
-
**🎛️ Full Architectural Control Required**
|
|
83
|
-
- When you need to architect every detail from scratch
|
|
84
|
-
- Apps with highly specific performance requirements
|
|
85
|
-
- Custom infrastructure and deployment needs
|
|
86
|
-
|
|
87
|
-
**📱 Design-as-Differentiator Products**
|
|
88
|
-
- When your visual design IS your competitive advantage
|
|
89
|
-
- Apps competing on unique user experience
|
|
90
|
-
- Custom animation and interaction-heavy apps
|
|
91
|
-
|
|
92
|
-
### 💡 The 70/30 Rule
|
|
93
|
-
|
|
94
|
-
MyContext generates the **70% that's universal** (authentication, layouts, CRUD, routing, settings), so you can focus on the **30% that's unique** (your product's core value and competitive advantage).
|
|
95
|
-
|
|
96
|
-
**Real Examples:**
|
|
97
|
-
|
|
98
|
-
✅ **E-commerce Platform**
|
|
99
|
-
- **MyContext generates**: Auth, product tables, cart UI, user dashboard, admin panel
|
|
100
|
-
- **You customize**: Payment flow, recommendation engine, product discovery, checkout experience
|
|
101
|
-
|
|
102
|
-
✅ **SaaS Dashboard**
|
|
103
|
-
- **MyContext generates**: User management, settings, billing pages, data tables, layouts
|
|
104
|
-
- **You build**: The core product feature that makes your SaaS valuable
|
|
105
|
-
|
|
106
|
-
✅ **Blog Platform**
|
|
107
|
-
- **MyContext generates**: Auth, post CRUD, user profiles, admin panel, marketing pages
|
|
108
|
-
- **You customize**: Reading experience, content discovery, social features
|
|
109
|
-
|
|
110
|
-
✅ **Internal Tool**
|
|
111
|
-
- **MyContext generates**: Everything - auth, CRUD, dashboards, reports, settings
|
|
112
|
-
- **You customize**: Business logic, integrations, custom workflows
|
|
113
|
-
|
|
114
|
-
### 🎯 Quick Decision Guide
|
|
115
|
-
|
|
116
|
-
**Use MyContext if:**
|
|
117
|
-
- ✅ Your app follows standard web patterns
|
|
118
|
-
- ✅ You need to ship an MVP in 2-3 weeks
|
|
119
|
-
- ✅ Your unique value is NOT in the UI
|
|
120
|
-
- ✅ You want zero-error, production-ready code
|
|
121
|
-
- ✅ You're building internal tools or admin dashboards
|
|
122
|
-
|
|
123
|
-
**Consider alternatives if:**
|
|
124
|
-
- ❌ Your UI/UX is your competitive advantage
|
|
125
|
-
- ❌ You're building the next Figma or Notion
|
|
126
|
-
- ❌ You need full control over every architectural decision
|
|
127
|
-
- ❌ Your app has zero standard patterns
|
|
128
|
-
|
|
129
|
-
---
|
|
130
|
-
|
|
131
|
-
## 📖 Examples
|
|
132
|
-
|
|
133
|
-
### Start with a Single Component
|
|
134
|
-
|
|
135
|
-
```bash
|
|
136
|
-
# Generate and preview a button component
|
|
137
|
-
mycontext generate-components Button --with-tests
|
|
138
|
-
mycontext preview components
|
|
139
|
-
|
|
140
|
-
# Generated:
|
|
141
|
-
# - Button.tsx (validated, zero errors)
|
|
142
|
-
# - Button.test.tsx
|
|
143
|
-
# - Preview HTML in browser
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
### Build a Component Library
|
|
147
|
-
|
|
148
|
-
```bash
|
|
149
|
-
# Generate authentication components one by one
|
|
150
|
-
mycontext generate-components LoginForm --with-tests
|
|
151
|
-
mycontext generate-components SignupForm --with-tests
|
|
152
|
-
mycontext generate-components PasswordReset --with-tests
|
|
153
|
-
|
|
154
|
-
# Preview all auth components together
|
|
155
|
-
mycontext preview authentication
|
|
156
|
-
|
|
157
|
-
# Each component automatically validated:
|
|
158
|
-
# ✅ TypeScript check passed
|
|
159
|
-
# ✅ ESLint passed
|
|
160
|
-
# ✅ Build passed
|
|
161
|
-
# ✅ Tests passed
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
### Scale to Complete Application
|
|
165
|
-
|
|
166
|
-
```bash
|
|
167
|
-
# Once components are validated, build full app
|
|
168
|
-
mycontext build-app \
|
|
169
|
-
--description "E-commerce with product catalog, cart, and checkout" \
|
|
170
|
-
--interactive \
|
|
171
|
-
--complete-architecture
|
|
172
|
-
|
|
173
|
-
# Reuses validated components + generates:
|
|
174
|
-
# - Server actions for CRUD
|
|
175
|
-
# - Next.js App Router routes
|
|
176
|
-
# - Full TypeScript types
|
|
177
|
-
# - Integration tests
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
---
|
|
181
|
-
|
|
182
|
-
## 🎯 Features
|
|
183
|
-
|
|
184
|
-
### 🎨 Visual Component Preview
|
|
185
19
|
|
|
186
|
-
|
|
20
|
+
# 2. Generate context files (PRD, features, etc.)
|
|
21
|
+
mycontext generate-context-files --description "Your app idea"
|
|
187
22
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
- **Group preview** - Focus on specific component families
|
|
191
|
-
- **Auto-open in browser** - Instant visual feedback
|
|
23
|
+
# 3. Compile PRD (requires approval)
|
|
24
|
+
mycontext compile-prd
|
|
192
25
|
|
|
193
|
-
|
|
194
|
-
mycontext
|
|
195
|
-
mycontext preview components # Preview all components
|
|
196
|
-
mycontext preview authentication # Preview specific group
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
### ✅ Zero-Error Component Validation
|
|
200
|
-
|
|
201
|
-
**Every single component** automatically validated before save:
|
|
202
|
-
|
|
203
|
-
- ✅ TypeScript check (`tsc --noEmit`)
|
|
204
|
-
- ✅ ESLint validation
|
|
205
|
-
- ✅ Build check (`npm run build`)
|
|
206
|
-
- ✅ Unit tests (if `--with-tests`)
|
|
207
|
-
|
|
208
|
-
**Failed components retry automatically** with error context (max 3 attempts).
|
|
209
|
-
|
|
210
|
-
```
|
|
211
|
-
🔨 Generating: LoginForm
|
|
212
|
-
✅ Code Generated
|
|
213
|
-
✅ TypeScript Check Passed
|
|
214
|
-
✅ ESLint Passed
|
|
215
|
-
✅ Build Passed
|
|
216
|
-
✅ Tests Passed
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
### 🧩 Component-First Workflow
|
|
220
|
-
|
|
221
|
-
Build your application **one component at a time**:
|
|
222
|
-
|
|
223
|
-
1. **Generate individual components** or component groups
|
|
224
|
-
2. **Preview components** in browser before integration
|
|
225
|
-
3. **Iterate and refine** at component level
|
|
226
|
-
4. **Build component libraries** with validated pieces
|
|
227
|
-
5. **Scale to full apps** when ready
|
|
228
|
-
|
|
229
|
-
```bash
|
|
230
|
-
# Start small
|
|
231
|
-
mycontext generate-components Button --with-tests
|
|
232
|
-
|
|
233
|
-
# Build a group
|
|
234
|
-
mycontext generate-components authentication --with-tests
|
|
26
|
+
# 4. Generate components with validation
|
|
27
|
+
mycontext generate-components all --with-tests
|
|
235
28
|
|
|
236
|
-
# Preview
|
|
29
|
+
# 5. Preview components visually
|
|
237
30
|
mycontext preview components
|
|
238
31
|
|
|
239
|
-
#
|
|
32
|
+
# 6. Build complete app when ready
|
|
240
33
|
mycontext build-app --interactive
|
|
241
34
|
```
|
|
242
35
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
Track component generation progress via JSON files in `.mycontext/progress/`:
|
|
246
|
-
|
|
247
|
-
```json
|
|
248
|
-
{
|
|
249
|
-
"currentPhase": "component_generation",
|
|
250
|
-
"currentStep": 15,
|
|
251
|
-
"totalSteps": 30,
|
|
252
|
-
"percentComplete": 50.0,
|
|
253
|
-
"currentComponent": "LoginForm"
|
|
254
|
-
}
|
|
255
|
-
```
|
|
256
|
-
|
|
257
|
-
**Perfect for VS Code extensions & build dashboards.**
|
|
258
|
-
|
|
259
|
-
### 🏗️ Scale to Complete Architecture
|
|
260
|
-
|
|
261
|
-
When ready, generate full-stack apps with `--complete-architecture`:
|
|
262
|
-
|
|
263
|
-
- Next.js 15 App Router routes
|
|
264
|
-
- Server actions with validation
|
|
265
|
-
- Self-documenting components
|
|
266
|
-
- Type-safe throughout
|
|
267
|
-
- **Reuses your validated components**
|
|
268
|
-
|
|
269
|
-
---
|
|
270
|
-
|
|
271
|
-
## 📋 Commands
|
|
272
|
-
|
|
273
|
-
### Component Generation (Recommended)
|
|
274
|
-
|
|
275
|
-
```bash
|
|
276
|
-
# Generate individual component
|
|
277
|
-
mycontext generate-components Button --with-tests
|
|
278
|
-
|
|
279
|
-
# Generate component group
|
|
280
|
-
mycontext generate-components authentication --with-tests
|
|
281
|
-
|
|
282
|
-
# Generate all components
|
|
283
|
-
mycontext generate-components all --with-tests
|
|
284
|
-
|
|
285
|
-
# Options:
|
|
286
|
-
--with-tests # Generate unit tests for each component
|
|
287
|
-
--group <group> # Specify component group
|
|
288
|
-
--check # Run typecheck, lint, tests after generation
|
|
289
|
-
--verbose # Show detailed output
|
|
290
|
-
```
|
|
291
|
-
|
|
292
|
-
### Visual Preview
|
|
293
|
-
|
|
294
|
-
```bash
|
|
295
|
-
# Preview brand elements
|
|
296
|
-
mycontext preview brand
|
|
297
|
-
|
|
298
|
-
# Preview all components
|
|
299
|
-
mycontext preview components
|
|
36
|
+
## 💡 Philosophy: Component-First Development
|
|
300
37
|
|
|
301
|
-
|
|
302
|
-
mycontext preview authentication
|
|
38
|
+
**Start Small, Scale Gradually:**
|
|
303
39
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
40
|
+
1. **Context Files** → Define your app (PRD, features, technical specs)
|
|
41
|
+
2. **Component List** → AI generates list of needed components
|
|
42
|
+
3. **Build Strategy** → Choose how to approach development
|
|
43
|
+
4. **Component Generation** → Build components one by one with validation
|
|
44
|
+
5. **Visual Preview** → See components in browser before integration
|
|
45
|
+
6. **Scale to App** → Assemble validated components into full application
|
|
308
46
|
|
|
309
|
-
|
|
47
|
+
**Result:** Production-ready apps with 0 errors, built incrementally.
|
|
310
48
|
|
|
311
|
-
|
|
312
|
-
# 1. Initialize project
|
|
313
|
-
mycontext init my-app
|
|
49
|
+
## 🎯 Key Features
|
|
314
50
|
|
|
315
|
-
|
|
316
|
-
mycontext generate-context-files --description "Your app"
|
|
51
|
+
### ✅ Zero-Error Guarantee
|
|
317
52
|
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
53
|
+
- **TypeScript validation** on every component
|
|
54
|
+
- **ESLint checks** with automatic fixes
|
|
55
|
+
- **Build validation** before moving forward
|
|
56
|
+
- **Automatic retries** with error context (max 3 attempts)
|
|
321
57
|
|
|
322
|
-
|
|
323
|
-
mycontext preview components
|
|
58
|
+
### ✅ Visual Preview
|
|
324
59
|
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
### Scale to Complete App
|
|
60
|
+
- **Figma-like component board** for visual testing
|
|
61
|
+
- **Interactive component playground**
|
|
62
|
+
- **Responsive design testing**
|
|
330
63
|
|
|
331
|
-
|
|
64
|
+
### ✅ BYOK Model (Bring Your Own Keys)
|
|
332
65
|
|
|
333
|
-
|
|
66
|
+
- Use your own Claude/X.AI/OpenAI API keys
|
|
67
|
+
- No billing from us - you control costs
|
|
68
|
+
- Transparent pricing (~$20/month for unlimited usage)
|
|
334
69
|
|
|
335
|
-
|
|
336
|
-
# After generating components individually:
|
|
337
|
-
mycontext generate-components LoginForm --with-tests
|
|
338
|
-
mycontext generate-components Dashboard --with-tests
|
|
339
|
-
mycontext generate-components SignupForm --with-tests
|
|
340
|
-
|
|
341
|
-
# Build app - automatically detects & reuses components
|
|
342
|
-
mycontext build-app --interactive --complete-architecture
|
|
343
|
-
|
|
344
|
-
# Claude Agent SDK will:
|
|
345
|
-
# 1. Detect 3 validated components ✅
|
|
346
|
-
# 2. Decide REUSE_COMPONENTS mode 🎯
|
|
347
|
-
# 3. Map components to routes intelligently 🗺️
|
|
348
|
-
# 4. Generate scaffolding only (routes, actions, hooks) 🏗️
|
|
349
|
-
```
|
|
70
|
+
## 📋 Commands
|
|
350
71
|
|
|
351
|
-
|
|
72
|
+
### Core Workflow
|
|
352
73
|
|
|
353
74
|
```bash
|
|
354
|
-
mycontext
|
|
355
|
-
|
|
356
|
-
#
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
--complete-architecture # Generate server actions + routes
|
|
361
|
-
--architecture-type # nextjs-app-router | nextjs-pages | react-spa
|
|
362
|
-
--max-retries 3 # Max retry attempts
|
|
363
|
-
--verbose # Show detailed output
|
|
75
|
+
mycontext init <project-name> # Initialize project
|
|
76
|
+
mycontext generate-context-files # Generate PRD, features, specs
|
|
77
|
+
mycontext compile-prd # Compile context into PRD
|
|
78
|
+
mycontext generate-components <name|all> # Generate components
|
|
79
|
+
mycontext preview <type> # Preview components/app
|
|
80
|
+
mycontext build-app # Build complete application
|
|
364
81
|
```
|
|
365
82
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
1. **Automatic Detection** - Claude Agent SDK detects existing components
|
|
369
|
-
2. **Smart Decision** - AI chooses: REUSE vs GENERATE based on what's available
|
|
370
|
-
3. **Intelligent Mapping** - Maps components to routes (LoginForm → /login)
|
|
371
|
-
4. **Scaffolding Only** - Generates integration layer, not components
|
|
372
|
-
|
|
373
|
-
### Other Commands
|
|
83
|
+
### Setup & Configuration
|
|
374
84
|
|
|
375
85
|
```bash
|
|
376
|
-
mycontext setup
|
|
377
|
-
mycontext build-strategy
|
|
378
|
-
mycontext
|
|
379
|
-
mycontext list [type] # List components/projects
|
|
380
|
-
mycontext enhance <component> # Enhance component with AI
|
|
381
|
-
mycontext refine <component> # Refine component with AI
|
|
86
|
+
mycontext setup # Configure AI providers
|
|
87
|
+
mycontext build-strategy # Choose build approach
|
|
88
|
+
mycontext health-check # Verify installation
|
|
382
89
|
```
|
|
383
90
|
|
|
384
|
-
---
|
|
385
|
-
|
|
386
91
|
## ⚙️ Configuration
|
|
387
92
|
|
|
388
|
-
### API Keys (
|
|
389
|
-
|
|
390
|
-
MyContext uses **your own API keys** - no billing from us.
|
|
391
|
-
|
|
392
|
-
**Recommended providers:**
|
|
93
|
+
### API Keys (Required)
|
|
393
94
|
|
|
394
95
|
```bash
|
|
395
|
-
#
|
|
96
|
+
# Create .mycontext/.env file
|
|
396
97
|
echo 'MYCONTEXT_CLAUDE_API_KEY=sk-ant-xxx' > .mycontext/.env
|
|
397
|
-
|
|
398
|
-
# X.AI Grok (best for code generation)
|
|
399
|
-
echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' > .mycontext/.env
|
|
400
|
-
|
|
401
|
-
# OpenAI (most versatile)
|
|
402
|
-
echo 'MYCONTEXT_OPENAI_API_KEY=sk-xxx' > .mycontext/.env
|
|
98
|
+
echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' >> .mycontext/.env
|
|
403
99
|
```
|
|
404
100
|
|
|
405
|
-
**
|
|
101
|
+
**Recommended providers:**
|
|
406
102
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
103
|
+
- **Claude** (best for complex reasoning)
|
|
104
|
+
- **X.AI Grok** (best for code generation)
|
|
105
|
+
- **OpenAI** (most versatile)
|
|
106
|
+
- **Qwen3** (free via OpenRouter)
|
|
411
107
|
|
|
412
|
-
|
|
108
|
+
## 📊 Project Structure
|
|
413
109
|
|
|
414
110
|
```
|
|
415
111
|
my-app/
|
|
416
112
|
├── .mycontext/
|
|
417
113
|
│ ├── 01-prd.md # Product Requirements
|
|
418
|
-
│ ├── 02-a-features.md # Features
|
|
114
|
+
│ ├── 02-a-features.md # Features specification
|
|
419
115
|
│ ├── 02-b-user-flows.md # User flows
|
|
420
116
|
│ ├── 02-c-edge-cases.md # Edge cases
|
|
421
|
-
│ ├── 02-d-technical-specs.md #
|
|
117
|
+
│ ├── 02-d-technical-specs.md # Technical specifications
|
|
422
118
|
│ ├── 03-types.ts # TypeScript types
|
|
423
|
-
│ ├── 04-branding.md # Branding
|
|
424
|
-
│ ├── 05-component-list.json #
|
|
425
|
-
│ ├── progress/ # Progress tracking
|
|
426
|
-
│ │ ├── master.json # Master progress
|
|
427
|
-
│ │ └── 07-components/ # Per-component progress
|
|
119
|
+
│ ├── 04-branding.md # Branding & design system
|
|
120
|
+
│ ├── 05-component-list.json # Generated component list
|
|
428
121
|
│ └── .env # API keys
|
|
429
122
|
├── components/ # Generated components
|
|
430
|
-
├── actions/ # Server actions (
|
|
431
|
-
├── app/ #
|
|
123
|
+
├── actions/ # Server actions (if full-stack)
|
|
124
|
+
├── app/ # Next.js routes (if full-stack)
|
|
432
125
|
└── package.json
|
|
433
126
|
```
|
|
434
127
|
|
|
435
|
-
---
|
|
436
|
-
|
|
437
|
-
## 🎓 How It Works (Component-First with Claude Agent SDK)
|
|
438
|
-
|
|
439
|
-
MyContext uses **Claude Agent SDK** with intelligent component detection and reuse. The workflow automatically adapts based on what exists in your project.
|
|
440
|
-
|
|
441
|
-
### 1. Intelligent Component Detection (NEW)
|
|
442
|
-
|
|
443
|
-
Claude Agent SDK automatically detects existing components:
|
|
444
|
-
|
|
445
|
-
```bash
|
|
446
|
-
mycontext build-app --interactive --complete-architecture
|
|
447
|
-
```
|
|
448
|
-
|
|
449
|
-
**Detection Report:**
|
|
450
|
-
```
|
|
451
|
-
🔍 Detecting existing components...
|
|
452
|
-
|
|
453
|
-
✅ Found 5 validated components:
|
|
454
|
-
- LoginForm (authentication) - All checks passed ✅
|
|
455
|
-
- Dashboard (admin) - All checks passed ✅
|
|
456
|
-
- SignupForm (authentication) - All checks passed ✅
|
|
457
|
-
- ProfileCard (user) - All checks passed ✅
|
|
458
|
-
- SettingsPanel (admin) - All checks passed ✅
|
|
459
|
-
|
|
460
|
-
🎯 Recommendation: REUSE_COMPONENTS
|
|
461
|
-
→ Skipping component generation
|
|
462
|
-
→ Proceeding with scaffolding generation
|
|
463
|
-
```
|
|
464
|
-
|
|
465
|
-
**AI-Powered Decision Making:**
|
|
466
|
-
|
|
467
|
-
- **REUSE_COMPONENTS** (3+ validated) → Skip generation, create scaffolding only
|
|
468
|
-
- **PARTIAL_REUSE** (1-2 components) → Mix existing with new
|
|
469
|
-
- **GENERATE_ALL** (0 components) → Traditional full generation
|
|
470
|
-
|
|
471
|
-
### 2. Component Generation (if needed)
|
|
472
|
-
|
|
473
|
-
Generate components **one at a time** with automatic validation:
|
|
474
|
-
|
|
475
|
-
```bash
|
|
476
|
-
mycontext generate-components Button --with-tests
|
|
477
|
-
```
|
|
478
|
-
|
|
479
|
-
**Each component automatically validated:**
|
|
480
|
-
|
|
481
|
-
```
|
|
482
|
-
🔨 Generating: Button
|
|
483
|
-
✅ Code Generated
|
|
484
|
-
✅ TypeScript Check Passed
|
|
485
|
-
✅ ESLint Passed
|
|
486
|
-
✅ Build Passed
|
|
487
|
-
✅ Tests Passed
|
|
488
|
-
```
|
|
489
|
-
|
|
490
|
-
### 3. Visual Preview
|
|
491
|
-
|
|
492
|
-
Preview your components in the browser **before integration**:
|
|
493
|
-
|
|
494
|
-
```bash
|
|
495
|
-
mycontext preview components
|
|
496
|
-
```
|
|
497
|
-
|
|
498
|
-
**Opens in browser:**
|
|
499
|
-
- Color-coded component cards
|
|
500
|
-
- Organized by groups
|
|
501
|
-
- User stories and action functions
|
|
502
|
-
- Type and priority information
|
|
503
|
-
|
|
504
|
-
### 4. Intelligent Route Mapping (NEW)
|
|
505
|
-
|
|
506
|
-
Claude Agent SDK maps components to routes automatically:
|
|
507
|
-
|
|
508
|
-
```
|
|
509
|
-
🗺️ Mapping components to routes...
|
|
510
|
-
|
|
511
|
-
Component-to-Route Mappings:
|
|
512
|
-
├── LoginForm → /login (AuthLayout)
|
|
513
|
-
│ Actions: authenticateUser, validateCredentials
|
|
514
|
-
│ Hooks: useAuth
|
|
515
|
-
├── Dashboard → /dashboard (DashboardLayout)
|
|
516
|
-
│ Actions: fetchDashboardData
|
|
517
|
-
│ Hooks: useDashboard
|
|
518
|
-
└── SignupForm → /signup (AuthLayout)
|
|
519
|
-
Actions: createUser, sendVerificationEmail
|
|
520
|
-
Hooks: useAuth, useForm
|
|
521
|
-
```
|
|
522
|
-
|
|
523
|
-
### 5. Scaffolding Generation (NEW)
|
|
524
|
-
|
|
525
|
-
Generates integration layer for existing components:
|
|
526
|
-
|
|
527
|
-
```
|
|
528
|
-
🏗️ Generating scaffolding...
|
|
529
|
-
|
|
530
|
-
Generated:
|
|
531
|
-
✅ 3 routes (app/login, app/dashboard, app/signup)
|
|
532
|
-
✅ 2 server action files (actions/authentication.ts, actions/dashboard.ts)
|
|
533
|
-
✅ 3 custom hooks (useAuth.ts, useForm.ts, useDashboard.ts)
|
|
534
|
-
✅ 2 layouts (AuthLayout.tsx, DashboardLayout.tsx)
|
|
535
|
-
```
|
|
536
|
-
|
|
537
|
-
**Files created:**
|
|
538
|
-
```typescript
|
|
539
|
-
// app/login/page.tsx
|
|
540
|
-
import { LoginForm } from '@/components/authentication/LoginForm';
|
|
541
|
-
|
|
542
|
-
export default function Page() {
|
|
543
|
-
return <LoginForm />;
|
|
544
|
-
}
|
|
545
|
-
|
|
546
|
-
// actions/authentication.ts
|
|
547
|
-
'use server';
|
|
548
|
-
|
|
549
|
-
export async function authenticateUser(data: any) {
|
|
550
|
-
// Implementation
|
|
551
|
-
}
|
|
552
|
-
```
|
|
553
|
-
|
|
554
|
-
### 6. Automatic Error Recovery
|
|
555
|
-
|
|
556
|
-
Failed components **retry automatically** with error context:
|
|
557
|
-
|
|
558
|
-
```
|
|
559
|
-
❌ TypeScript check failed (3 errors)
|
|
560
|
-
- Button.tsx:12:5 - TS2322: Type 'string' not assignable to 'number'
|
|
561
|
-
|
|
562
|
-
🔄 Retry 1/3 (with error context)
|
|
563
|
-
✅ Fixed and validated
|
|
564
|
-
```
|
|
565
|
-
|
|
566
|
-
### 7. Production Deploy
|
|
567
|
-
|
|
568
|
-
```bash
|
|
569
|
-
cd my-app
|
|
570
|
-
npm run build # ✅ Zero errors guaranteed
|
|
571
|
-
vercel deploy # 🚀 Deploy
|
|
572
|
-
```
|
|
573
|
-
|
|
574
|
-
---
|
|
575
|
-
|
|
576
|
-
## 🔧 Advanced Usage
|
|
577
|
-
|
|
578
|
-
### Build Strategy Selection
|
|
579
|
-
|
|
580
|
-
```bash
|
|
581
|
-
mycontext build-strategy --recommend
|
|
582
|
-
|
|
583
|
-
# AI asks about:
|
|
584
|
-
- Project type (client work, personal, MVP, etc.)
|
|
585
|
-
- Complexity (simple, medium, complex)
|
|
586
|
-
- Timeline (urgent, moderate, flexible)
|
|
587
|
-
- Team size (solo, small, large)
|
|
588
|
-
|
|
589
|
-
# Recommends best approach:
|
|
590
|
-
🎯 Vertical Slice - Build complete features end-to-end
|
|
591
|
-
⏰ Time to first demo: 2-3 weeks
|
|
592
|
-
```
|
|
593
|
-
|
|
594
|
-
### Complete Architecture
|
|
595
|
-
|
|
596
|
-
```bash
|
|
597
|
-
mycontext build-app \
|
|
598
|
-
--description "Blog platform" \
|
|
599
|
-
--complete-architecture \
|
|
600
|
-
--architecture-type nextjs-app-router
|
|
601
|
-
|
|
602
|
-
# Generates:
|
|
603
|
-
# - app/blog/[slug]/page.tsx
|
|
604
|
-
# - actions/createPost.ts
|
|
605
|
-
# - actions/updatePost.ts
|
|
606
|
-
# - components/BlogPost.tsx
|
|
607
|
-
# - Full type system
|
|
608
|
-
```
|
|
609
|
-
|
|
610
|
-
### Existing Project Migration
|
|
611
|
-
|
|
612
|
-
```bash
|
|
613
|
-
mycontext analyze # Analyze existing project
|
|
614
|
-
mycontext migrate --all # Migrate to MyContext structure
|
|
615
|
-
```
|
|
616
|
-
|
|
617
|
-
---
|
|
618
|
-
|
|
619
|
-
## 📊 Build Metrics
|
|
620
|
-
|
|
621
|
-
After successful build:
|
|
622
|
-
|
|
623
|
-
```
|
|
624
|
-
🎉 Workflow Complete!
|
|
625
|
-
|
|
626
|
-
📊 Summary:
|
|
627
|
-
Duration: 12m 34s
|
|
628
|
-
Total Steps: 230/230
|
|
629
|
-
User Approvals: 12
|
|
630
|
-
Retries: 3
|
|
631
|
-
|
|
632
|
-
✅ Build Checks:
|
|
633
|
-
TypeScript: 30 passed, 0 failed
|
|
634
|
-
ESLint: 30 passed, 0 failed
|
|
635
|
-
Build: 30 passed, 0 failed
|
|
636
|
-
Tests: 28 passed, 0 failed
|
|
637
|
-
```
|
|
638
|
-
|
|
639
|
-
**Zero failures = Production-ready**
|
|
640
|
-
|
|
641
|
-
---
|
|
642
|
-
|
|
643
128
|
## 🆚 MyContext vs Others
|
|
644
129
|
|
|
645
|
-
| Feature
|
|
646
|
-
|
|
|
647
|
-
| **
|
|
648
|
-
| **
|
|
649
|
-
| **
|
|
650
|
-
| **
|
|
651
|
-
| **
|
|
652
|
-
| **
|
|
653
|
-
| **Pricing** | BYOK ($0-20/mo) | $20-200/mo | Usage-based |
|
|
654
|
-
| **Component Library Building** | ✅ | ❌ | ❌ |
|
|
655
|
-
| **Progress Tracking** | ✅ JSON files | ❌ | ❌ |
|
|
656
|
-
| **Deployment** | Anywhere | Limited | Vercel only |
|
|
657
|
-
|
|
658
|
-
**Key Differentiators:**
|
|
659
|
-
|
|
660
|
-
1. **Component-First** - Build and validate components individually before scaling to apps
|
|
661
|
-
2. **Visual Preview** - See components in browser before integration
|
|
662
|
-
3. **Zero-Error Guarantee** - Every component validated (TypeScript, ESLint, build checks)
|
|
663
|
-
4. **Local Development** - All code generation happens on your machine
|
|
664
|
-
5. **BYOK Pricing** - Use your own AI API keys, pay only for what you use
|
|
665
|
-
|
|
666
|
-
---
|
|
667
|
-
|
|
668
|
-
## 📚 Documentation
|
|
669
|
-
|
|
670
|
-
- [Complete Workflow](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/BUILD_APP_PROCESS.md) - 230-step process
|
|
671
|
-
- [Integration Guide](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/IMPLEMENTATION_SUMMARY.md) - VS Code integration
|
|
672
|
-
- [Quick Start](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/QUICK_START_BUILD_APP.md) - User guide
|
|
673
|
-
|
|
674
|
-
---
|
|
130
|
+
| Feature | MyContext | Lovable | v0.dev |
|
|
131
|
+
| ------------------------ | --------------- | ---------- | ----------- |
|
|
132
|
+
| **Code Location** | Your machine | Cloud | Cloud |
|
|
133
|
+
| **Validation Gates** | 12+ checkpoints | None | None |
|
|
134
|
+
| **Build Validation** | Every component | None | None |
|
|
135
|
+
| **TypeScript Guarantee** | 100% | No | No |
|
|
136
|
+
| **Pricing** | BYOK ($0-20/mo) | $20-200/mo | Usage-based |
|
|
137
|
+
| **Deployment** | Anywhere | Limited | Vercel only |
|
|
675
138
|
|
|
676
139
|
## 🐛 Troubleshooting
|
|
677
140
|
|
|
678
141
|
**"PRD Validation Failed"**
|
|
679
142
|
|
|
680
143
|
```bash
|
|
681
|
-
# Provide feedback and regenerate
|
|
682
144
|
mycontext compile-prd --force
|
|
683
145
|
```
|
|
684
146
|
|
|
@@ -689,14 +151,18 @@ mycontext compile-prd --force
|
|
|
689
151
|
# Check .mycontext/progress/07-components/<component>.json
|
|
690
152
|
```
|
|
691
153
|
|
|
692
|
-
**"
|
|
154
|
+
**"API Key Issues"**
|
|
693
155
|
|
|
694
156
|
```bash
|
|
695
|
-
#
|
|
696
|
-
|
|
157
|
+
mycontext setup # Reconfigure API keys
|
|
158
|
+
mycontext health-check # Verify setup
|
|
697
159
|
```
|
|
698
160
|
|
|
699
|
-
|
|
161
|
+
## 📚 Documentation
|
|
162
|
+
|
|
163
|
+
- [Getting Started](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/GETTING_STARTED.md)
|
|
164
|
+
- [Component Generation](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/guides/components.md)
|
|
165
|
+
- [Build Strategies](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/reference/build-strategies.md)
|
|
700
166
|
|
|
701
167
|
## 🤝 Contributing
|
|
702
168
|
|
|
@@ -708,4 +174,4 @@ MIT © MyContext
|
|
|
708
174
|
|
|
709
175
|
---
|
|
710
176
|
|
|
711
|
-
**
|
|
177
|
+
**Built by developers, for developers. Your code stays on your machine.** 🚀
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mycontext-cli",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.6",
|
|
4
4
|
"description": "Component-first visual builder with zero-error guarantees. Generate and validate React/Next.js components one at a time, preview them visually, then scale to complete applications using Claude Agent SDK.",
|
|
5
5
|
"main": "dist/cli.js",
|
|
6
6
|
"bin": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mycontext-cli",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.6",
|
|
4
4
|
"description": "Component-first visual builder with zero-error guarantees. Generate and validate React/Next.js components one at a time, preview them visually, then scale to complete applications using Claude Agent SDK.",
|
|
5
5
|
"main": "dist/cli.js",
|
|
6
6
|
"bin": {
|