mycontext-cli 2.0.5 → 2.0.7

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 CHANGED
@@ -6,7 +6,7 @@
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
7
  [![Node Version](https://img.shields.io/badge/node-%3E%3D18.0.0-brightgreen)](https://nodejs.org)
8
8
 
9
- Build production-ready React/Next.js components **one at a time**, preview them visually, validate with automatic build checks, then scale to complete applications. Every component guaranteed **zero TypeScript/ESLint/build errors**.
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,134 @@ 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
- # Component-first workflow: Generate → Preview → Validate → Build
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
- Generate interactive HTML previews of your components before building:
20
+ # 2. Generate context files (PRD, features, etc.)
21
+ mycontext generate-context-files --description "Your app idea"
187
22
 
188
- - **Brand preview** - See your color palette, typography, and design tokens
189
- - **Component preview** - View all components organized by groups
190
- - **Group preview** - Focus on specific component families
191
- - **Auto-open in browser** - Instant visual feedback
23
+ # 3. Component list is generated automatically
24
+ # 4. Compile PRD (requires approval)
25
+ mycontext compile-prd
192
26
 
193
- ```bash
194
- mycontext preview brand # Preview design system
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
27
+ # 5. Generate components with validation
28
+ mycontext generate-components all --with-tests
235
29
 
236
- # Preview your work
30
+ # 6. Preview components visually
237
31
  mycontext preview components
238
32
 
239
- # Scale to full app
33
+ # 7. Build complete app when ready
240
34
  mycontext build-app --interactive
241
35
  ```
242
36
 
243
- ### 📊 Real-Time Progress Tracking
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
37
+ ## 💡 Philosophy: Component-First Development
300
38
 
301
- # Preview specific component group
302
- mycontext preview authentication
39
+ **Start Small, Scale Gradually:**
303
40
 
304
- # Options:
305
- --no-open # Don't auto-open in browser
306
- --port <number> # Port for local server (default: 3000)
307
- ```
41
+ 1. **Context Files** → Define your app (PRD, features, technical specs)
42
+ 2. **Component List** AI automatically generates list of needed components
43
+ 3. **Build Strategy** Choose how to approach development
44
+ 4. **Component Generation** → Build components one by one with validation
45
+ 5. **Visual Preview** → See components in browser before integration
46
+ 6. **Scale to App** → Assemble validated components into full application
308
47
 
309
- ### Component-First Workflow
48
+ **Result:** Production-ready apps with 0 errors, built incrementally.
310
49
 
311
- ```bash
312
- # 1. Initialize project
313
- mycontext init my-app
50
+ ## 🎯 Key Features
314
51
 
315
- # 2. Generate context files
316
- mycontext generate-context-files --description "Your app"
52
+ ### Zero-Error Guarantee
317
53
 
318
- # 3. Generate individual components
319
- mycontext generate-components LoginForm --with-tests
320
- mycontext generate-components SignupForm --with-tests
54
+ - **TypeScript validation** on every component
55
+ - **ESLint checks** with automatic fixes
56
+ - **Build validation** before moving forward
57
+ - **Automatic retries** with error context (max 3 attempts)
321
58
 
322
- # 4. Preview components
323
- mycontext preview components
59
+ ### Visual Preview
324
60
 
325
- # 5. Scale to full app (when ready)
326
- mycontext build-app --interactive
327
- ```
328
-
329
- ### Scale to Complete App
61
+ - **Figma-like component board** for visual testing
62
+ - **Interactive component playground**
63
+ - **Responsive design testing**
330
64
 
331
- **Component-First Mode (NEW - Recommended):**
65
+ ### BYOK Model (Bring Your Own Keys)
332
66
 
333
- Build apps by reusing existing validated components:
67
+ - Use your own Claude/X.AI/OpenAI API keys
68
+ - No billing from us - you control costs
69
+ - Transparent pricing (~$20/month for unlimited usage)
334
70
 
335
- ```bash
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
- ```
71
+ ## 📋 Commands
350
72
 
351
- **Traditional Mode (Generate Everything):**
73
+ ### Core Workflow
352
74
 
353
75
  ```bash
354
- mycontext build-app --description "Your app" --interactive
355
-
356
- # Options:
357
- --output <dir> # Output directory (default: mycontext-app)
358
- --interactive # Interactive mode with validation prompts
359
- --with-tests # Generate unit tests
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
76
+ mycontext init <project-name> # Initialize project
77
+ mycontext generate-context-files # Generate PRD, features, specs
78
+ mycontext compile-prd # Compile context into PRD
79
+ mycontext generate-components <name|all> # Generate components
80
+ mycontext preview <type> # Preview components/app
81
+ mycontext build-app # Build complete application
364
82
  ```
365
83
 
366
- **How it works:**
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
84
+ ### Setup & Configuration
374
85
 
375
86
  ```bash
376
- mycontext setup # Configure AI providers
377
- mycontext build-strategy # Interactive strategy selection
378
- mycontext analyze # Analyze existing project
379
- mycontext list [type] # List components/projects
380
- mycontext enhance <component> # Enhance component with AI
381
- mycontext refine <component> # Refine component with AI
87
+ mycontext setup # Configure AI providers
88
+ mycontext build-strategy # Choose build approach
89
+ mycontext health-check # Verify installation
382
90
  ```
383
91
 
384
- ---
385
-
386
92
  ## ⚙️ Configuration
387
93
 
388
- ### API Keys (BYOK Model)
389
-
390
- MyContext uses **your own API keys** - no billing from us.
391
-
392
- **Recommended providers:**
94
+ ### API Keys (Required)
393
95
 
394
96
  ```bash
395
- # Claude (best for complex reasoning)
97
+ # Create .mycontext/.env file
396
98
  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
99
+ echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' >> .mycontext/.env
403
100
  ```
404
101
 
405
- **Free tier:**
102
+ **Recommended providers:**
406
103
 
407
- ```bash
408
- # Qwen3 (free via OpenRouter)
409
- echo 'MYCONTEXT_QWEN_API_KEY=sk-or-xxx' > .mycontext/.env
410
- ```
104
+ - **Claude** (best for complex reasoning)
105
+ - **X.AI Grok** (best for code generation)
106
+ - **OpenAI** (most versatile)
107
+ - **Qwen3** (free via OpenRouter)
411
108
 
412
- ### Project Structure
109
+ ## 📊 Project Structure
413
110
 
414
111
  ```
415
112
  my-app/
416
113
  ├── .mycontext/
417
114
  │ ├── 01-prd.md # Product Requirements
418
- │ ├── 02-a-features.md # Features
115
+ │ ├── 02-a-features.md # Features specification
419
116
  │ ├── 02-b-user-flows.md # User flows
420
117
  │ ├── 02-c-edge-cases.md # Edge cases
421
- │ ├── 02-d-technical-specs.md # Tech specs
118
+ │ ├── 02-d-technical-specs.md # Technical specifications
422
119
  │ ├── 03-types.ts # TypeScript types
423
- │ ├── 04-branding.md # Branding
424
- │ ├── 05-component-list.json # Component list
425
- │ ├── progress/ # Progress tracking
426
- │ │ ├── master.json # Master progress
427
- │ │ └── 07-components/ # Per-component progress
120
+ │ ├── 04-branding.md # Branding & design system
121
+ │ ├── 05-component-list.json # Generated component list
428
122
  │ └── .env # API keys
429
123
  ├── components/ # Generated components
430
- ├── actions/ # Server actions (--complete-architecture)
431
- ├── app/ # Routes (--complete-architecture)
124
+ ├── actions/ # Server actions (if full-stack)
125
+ ├── app/ # Next.js routes (if full-stack)
432
126
  └── package.json
433
127
  ```
434
128
 
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
129
  ## 🆚 MyContext vs Others
644
130
 
645
- | Feature | MyContext | Lovable | v0.dev |
646
- | ---------------------------- | ------------------- | ---------- | ----------- |
647
- | **Approach** | Component-first | App-first | App-first |
648
- | **Visual Preview** | HTML previews | | ✅ Live |
649
- | **Component-Level Validation** | Every component | | |
650
- | **Build Validation** | TypeScript+ESLint+Build | None | None |
651
- | **Zero-Error Guarantee** | 100% | | |
652
- | **Code Location** | Your machine | Cloud | Cloud |
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
- ---
131
+ | Feature | MyContext | Lovable | v0.dev |
132
+ | ------------------------ | --------------- | ---------- | ----------- |
133
+ | **Code Location** | Your machine | Cloud | Cloud |
134
+ | **Validation Gates** | 12+ checkpoints | None | None |
135
+ | **Build Validation** | Every component | None | None |
136
+ | **TypeScript Guarantee** | 100% | No | No |
137
+ | **Pricing** | BYOK ($0-20/mo) | $20-200/mo | Usage-based |
138
+ | **Deployment** | Anywhere | Limited | Vercel only |
675
139
 
676
140
  ## 🐛 Troubleshooting
677
141
 
678
142
  **"PRD Validation Failed"**
679
143
 
680
144
  ```bash
681
- # Provide feedback and regenerate
682
145
  mycontext compile-prd --force
683
146
  ```
684
147
 
@@ -689,18 +152,22 @@ mycontext compile-prd --force
689
152
  # Check .mycontext/progress/07-components/<component>.json
690
153
  ```
691
154
 
692
- **"Progress Not Tracking"**
155
+ **"API Key Issues"**
693
156
 
694
157
  ```bash
695
- # Verify progress directory exists
696
- ls -la .mycontext/progress/
158
+ mycontext setup # Reconfigure API keys
159
+ mycontext health-check # Verify setup
697
160
  ```
698
161
 
699
- ---
162
+ ## 📚 Documentation
163
+
164
+ - [Getting Started](https://github.com/farajabien/mycontext-cli#quick-start)
165
+ - [Component Generation](https://github.com/farajabien/mycontext-cli#commands)
166
+ - [Build Strategies](https://github.com/farajabien/mycontext-cli#philosophy-component-first-development)
700
167
 
701
168
  ## 🤝 Contributing
702
169
 
703
- See [CONTRIBUTING.md](https://github.com/farajabien/mycontext-monorepo/blob/main/CONTRIBUTING.md)
170
+ Contributions are welcome! Please feel free to submit a Pull Request.
704
171
 
705
172
  ## 📄 License
706
173
 
@@ -708,4 +175,4 @@ MIT © MyContext
708
175
 
709
176
  ---
710
177
 
711
- **Start small. Build component by component. Scale when ready. Zero errors guaranteed.** 🎨
178
+ **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.5",
3
+ "version": "2.0.7",
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": {
@@ -40,11 +40,11 @@
40
40
  "license": "MIT",
41
41
  "repository": {
42
42
  "type": "git",
43
- "url": "git+https://github.com/farajabien/mycontext.git"
43
+ "url": "git+https://github.com/farajabien/mycontext-cli.git"
44
44
  },
45
- "homepage": "https://docs.mycontext.fbien.com",
45
+ "homepage": "https://github.com/farajabien/mycontext-cli#readme",
46
46
  "bugs": {
47
- "url": "https://github.com/farajabien/mycontext/issues"
47
+ "url": "https://github.com/farajabien/mycontext-cli/issues"
48
48
  },
49
49
  "dependencies": {
50
50
  "@anthropic-ai/claude-agent-sdk": "^0.1.1",
@@ -82,5 +82,6 @@
82
82
  "dist/",
83
83
  "README.md",
84
84
  "package.json"
85
- ]
85
+ ],
86
+ "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
86
87
  }
@@ -5,6 +5,7 @@
5
5
  * with MyContext-specific functionality.
6
6
  */
7
7
  import { z } from 'zod';
8
+ import * as fs from 'fs-extra';
8
9
  /**
9
10
  * Analyze React component structure and dependencies
10
11
  */
@@ -20,7 +21,7 @@ export declare const analyzeComponentTool: {
20
21
  filePath: string;
21
22
  checkTypes?: boolean | undefined;
22
23
  checkImports?: boolean | undefined;
23
- }, extra: unknown) => Promise<CallToolResult>;
24
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
24
25
  };
25
26
  /**
26
27
  * Validate PRD structure and completeness
@@ -33,7 +34,7 @@ export declare const validatePRDTool: {
33
34
  };
34
35
  handler: (args: {
35
36
  prdPath: string;
36
- }, extra: unknown) => Promise<CallToolResult>;
37
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
37
38
  };
38
39
  /**
39
40
  * Check TypeScript types in generated code
@@ -48,7 +49,7 @@ export declare const checkTypesTool: {
48
49
  handler: (args: {
49
50
  targetPath: string;
50
51
  strict?: boolean | undefined;
51
- }, extra: unknown) => Promise<CallToolResult>;
52
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
52
53
  };
53
54
  /**
54
55
  * Generate component documentation
@@ -63,7 +64,7 @@ export declare const generateDocsTool: {
63
64
  handler: (args: {
64
65
  componentPath: string;
65
66
  outputPath?: string | undefined;
66
- }, extra: unknown) => Promise<CallToolResult>;
67
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
67
68
  };
68
69
  /**
69
70
  * Detect existing validated components in the project
@@ -78,7 +79,7 @@ export declare const detectExistingComponentsTool: {
78
79
  handler: (args: {
79
80
  projectPath: string;
80
81
  includeValidation?: boolean | undefined;
81
- }, extra: unknown) => Promise<CallToolResult>;
82
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
82
83
  };
83
84
  /**
84
85
  * Map components to routes intelligently
@@ -111,7 +112,7 @@ export declare const mapComponentsToRoutesTool: {
111
112
  }[];
112
113
  architectureType: "nextjs-app-router" | "nextjs-pages" | "react-spa";
113
114
  prdContext?: string | undefined;
114
- }, extra: unknown) => Promise<CallToolResult>;
115
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
115
116
  };
116
117
  /**
117
118
  * Generate scaffolding for existing components
@@ -134,7 +135,7 @@ export declare const generateScaffoldingTool: {
134
135
  generateHooks: boolean;
135
136
  generateLayouts: boolean;
136
137
  componentMappings?: any;
137
- }, extra: unknown) => Promise<CallToolResult>;
138
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
138
139
  };
139
140
  /**
140
141
  * Get all available MCP tools
@@ -151,7 +152,7 @@ export declare function getAllMCPTools(): ({
151
152
  filePath: string;
152
153
  checkTypes?: boolean | undefined;
153
154
  checkImports?: boolean | undefined;
154
- }, extra: unknown) => Promise<CallToolResult>;
155
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
155
156
  } | {
156
157
  name: string;
157
158
  description: string;
@@ -160,7 +161,7 @@ export declare function getAllMCPTools(): ({
160
161
  };
161
162
  handler: (args: {
162
163
  prdPath: string;
163
- }, extra: unknown) => Promise<CallToolResult>;
164
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
164
165
  } | {
165
166
  name: string;
166
167
  description: string;
@@ -171,7 +172,7 @@ export declare function getAllMCPTools(): ({
171
172
  handler: (args: {
172
173
  targetPath: string;
173
174
  strict?: boolean | undefined;
174
- }, extra: unknown) => Promise<CallToolResult>;
175
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
175
176
  } | {
176
177
  name: string;
177
178
  description: string;
@@ -182,7 +183,7 @@ export declare function getAllMCPTools(): ({
182
183
  handler: (args: {
183
184
  componentPath: string;
184
185
  outputPath?: string | undefined;
185
- }, extra: unknown) => Promise<CallToolResult>;
186
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
186
187
  } | {
187
188
  name: string;
188
189
  description: string;
@@ -193,7 +194,7 @@ export declare function getAllMCPTools(): ({
193
194
  handler: (args: {
194
195
  projectPath: string;
195
196
  includeValidation?: boolean | undefined;
196
- }, extra: unknown) => Promise<CallToolResult>;
197
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
197
198
  } | {
198
199
  name: string;
199
200
  description: string;
@@ -222,7 +223,7 @@ export declare function getAllMCPTools(): ({
222
223
  }[];
223
224
  architectureType: "nextjs-app-router" | "nextjs-pages" | "react-spa";
224
225
  prdContext?: string | undefined;
225
- }, extra: unknown) => Promise<CallToolResult>;
226
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
226
227
  } | {
227
228
  name: string;
228
229
  description: string;
@@ -241,7 +242,7 @@ export declare function getAllMCPTools(): ({
241
242
  generateHooks: boolean;
242
243
  generateLayouts: boolean;
243
244
  componentMappings?: any;
244
- }, extra: unknown) => Promise<CallToolResult>;
245
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
245
246
  })[];
246
247
  /**
247
248
  * Get MCP tools by name
@@ -258,7 +259,7 @@ export declare function getMCPToolByName(name: string): {
258
259
  filePath: string;
259
260
  checkTypes?: boolean | undefined;
260
261
  checkImports?: boolean | undefined;
261
- }, extra: unknown) => Promise<CallToolResult>;
262
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
262
263
  } | {
263
264
  name: string;
264
265
  description: string;
@@ -267,7 +268,7 @@ export declare function getMCPToolByName(name: string): {
267
268
  };
268
269
  handler: (args: {
269
270
  prdPath: string;
270
- }, extra: unknown) => Promise<CallToolResult>;
271
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
271
272
  } | {
272
273
  name: string;
273
274
  description: string;
@@ -278,7 +279,7 @@ export declare function getMCPToolByName(name: string): {
278
279
  handler: (args: {
279
280
  targetPath: string;
280
281
  strict?: boolean | undefined;
281
- }, extra: unknown) => Promise<CallToolResult>;
282
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
282
283
  } | {
283
284
  name: string;
284
285
  description: string;
@@ -289,7 +290,7 @@ export declare function getMCPToolByName(name: string): {
289
290
  handler: (args: {
290
291
  componentPath: string;
291
292
  outputPath?: string | undefined;
292
- }, extra: unknown) => Promise<CallToolResult>;
293
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
293
294
  } | {
294
295
  name: string;
295
296
  description: string;
@@ -300,7 +301,7 @@ export declare function getMCPToolByName(name: string): {
300
301
  handler: (args: {
301
302
  projectPath: string;
302
303
  includeValidation?: boolean | undefined;
303
- }, extra: unknown) => Promise<CallToolResult>;
304
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
304
305
  } | {
305
306
  name: string;
306
307
  description: string;
@@ -329,7 +330,7 @@ export declare function getMCPToolByName(name: string): {
329
330
  }[];
330
331
  architectureType: "nextjs-app-router" | "nextjs-pages" | "react-spa";
331
332
  prdContext?: string | undefined;
332
- }, extra: unknown) => Promise<CallToolResult>;
333
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
333
334
  } | {
334
335
  name: string;
335
336
  description: string;
@@ -348,6 +349,6 @@ export declare function getMCPToolByName(name: string): {
348
349
  generateHooks: boolean;
349
350
  generateLayouts: boolean;
350
351
  componentMappings?: any;
351
- }, extra: unknown) => Promise<CallToolResult>;
352
+ }, extra: unknown) => Promise<fs.JsonReadOptions>;
352
353
  } | undefined;
353
354
  //# sourceMappingURL=mcpTools.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"mcpTools.d.ts","sourceRoot":"","sources":["../../src/utils/mcpTools.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAKxB;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;CAgFhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;;CAkG3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;CAqF1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;CA0F5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;CA0KxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;CA6MnC,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAU7B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAG5C"}
1
+ {"version":3,"file":"mcpTools.d.ts","sourceRoot":"","sources":["../../src/utils/mcpTools.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,MAAM,UAAU,CAAC;AAI/B;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;CAgFhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;;CAkG3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;CAqF1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;CA0F5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;CA0KxC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;CA6MnC,CAAC;AAEF;;GAEG;AACH,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAU7B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAG5C"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mycontext-cli",
3
- "version": "2.0.5",
3
+ "version": "2.0.7",
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": {
@@ -40,11 +40,11 @@
40
40
  "license": "MIT",
41
41
  "repository": {
42
42
  "type": "git",
43
- "url": "git+https://github.com/farajabien/mycontext.git"
43
+ "url": "git+https://github.com/farajabien/mycontext-cli.git"
44
44
  },
45
- "homepage": "https://docs.mycontext.fbien.com",
45
+ "homepage": "https://github.com/farajabien/mycontext-cli#readme",
46
46
  "bugs": {
47
- "url": "https://github.com/farajabien/mycontext/issues"
47
+ "url": "https://github.com/farajabien/mycontext-cli/issues"
48
48
  },
49
49
  "dependencies": {
50
50
  "@anthropic-ai/claude-agent-sdk": "^0.1.1",
@@ -82,5 +82,6 @@
82
82
  "dist/",
83
83
  "README.md",
84
84
  "package.json"
85
- ]
85
+ ],
86
+ "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
86
87
  }