mycontext-cli 2.0.3 β 2.0.5
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 +426 -103
- package/dist/agents/implementations/ClaudeAgentWorkflow.d.ts.map +1 -1
- package/dist/agents/implementations/ClaudeAgentWorkflow.js +75 -4
- package/dist/agents/implementations/ClaudeAgentWorkflow.js.map +1 -1
- package/dist/agents/interfaces/SubAgent.d.ts +2 -0
- package/dist/agents/interfaces/SubAgent.d.ts.map +1 -1
- package/dist/cli.js +2 -38
- package/dist/cli.js.map +1 -1
- package/dist/commands/generate-components.d.ts +0 -5
- package/dist/commands/generate-components.d.ts.map +1 -1
- package/dist/commands/generate-components.js +0 -101
- package/dist/commands/generate-components.js.map +1 -1
- package/dist/commands/init.d.ts.map +1 -1
- package/dist/commands/init.js +2 -6
- package/dist/commands/init.js.map +1 -1
- package/dist/config/build-strategies.json +173 -22
- package/dist/package.json +5 -4
- package/dist/utils/agentDefinitions.d.ts +5 -0
- package/dist/utils/agentDefinitions.d.ts.map +1 -1
- package/dist/utils/agentDefinitions.js +99 -1
- package/dist/utils/agentDefinitions.js.map +1 -1
- package/dist/utils/mcpTools.d.ts +189 -0
- package/dist/utils/mcpTools.d.ts.map +1 -1
- package/dist/utils/mcpTools.js +462 -1
- package/dist/utils/mcpTools.js.map +1 -1
- package/package.json +5 -4
- package/dist/README.md +0 -388
- package/dist/commands/core.d.ts +0 -24
- package/dist/commands/core.d.ts.map +0 -1
- package/dist/commands/core.js +0 -410
- package/dist/commands/core.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# MyContext CLI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**π¨ Component-First Visual Builder with Zero-Error Guarantees**
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/mycontext-cli)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
[](https://nodejs.org)
|
|
8
8
|
|
|
9
|
-
|
|
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**.
|
|
10
10
|
|
|
11
11
|
## π Quick Start
|
|
12
12
|
|
|
@@ -14,91 +14,192 @@ Generate complete Next.js applications from natural language with **guaranteed z
|
|
|
14
14
|
# Install globally
|
|
15
15
|
npm install -g mycontext-cli
|
|
16
16
|
|
|
17
|
-
#
|
|
18
|
-
mycontext
|
|
17
|
+
# Component-first workflow: Generate β Preview β Validate β Build
|
|
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
|
|
19
22
|
```
|
|
20
23
|
|
|
21
|
-
## π‘ Philosophy:
|
|
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
|
|
22
93
|
|
|
23
|
-
MyContext
|
|
24
|
-
- **You write the spec** β PRD with user approval gates
|
|
25
|
-
- **AI compiles it** β Generates components with validation
|
|
26
|
-
- **System validates** β TypeScript, ESLint, build checks
|
|
27
|
-
- **You approve** β 12+ validation checkpoints
|
|
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).
|
|
28
95
|
|
|
29
|
-
**
|
|
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
|
|
30
128
|
|
|
31
129
|
---
|
|
32
130
|
|
|
33
131
|
## π Examples
|
|
34
132
|
|
|
35
|
-
###
|
|
133
|
+
### Start with a Single Component
|
|
36
134
|
|
|
37
135
|
```bash
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
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
|
|
42
144
|
```
|
|
43
145
|
|
|
44
|
-
|
|
45
|
-
- Game board component
|
|
46
|
-
- AI opponent (minimax algorithm)
|
|
47
|
-
- Score tracking system
|
|
48
|
-
- Reset functionality
|
|
49
|
-
- Responsive Tailwind design
|
|
50
|
-
- Unit tests
|
|
146
|
+
### Build a Component Library
|
|
51
147
|
|
|
52
|
-
|
|
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
|
|
53
165
|
|
|
54
166
|
```bash
|
|
167
|
+
# Once components are validated, build full app
|
|
55
168
|
mycontext build-app \
|
|
56
|
-
--description "E-commerce with product catalog,
|
|
169
|
+
--description "E-commerce with product catalog, cart, and checkout" \
|
|
57
170
|
--interactive \
|
|
58
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
|
|
59
178
|
```
|
|
60
179
|
|
|
61
|
-
|
|
62
|
-
- Product listing & detail pages
|
|
63
|
-
- Shopping cart with persistence
|
|
64
|
-
- Checkout flow
|
|
65
|
-
- Admin dashboard
|
|
66
|
-
- Server actions for CRUD
|
|
67
|
-
- Next.js App Router routes
|
|
68
|
-
- Full TypeScript types
|
|
180
|
+
---
|
|
69
181
|
|
|
70
|
-
|
|
182
|
+
## π― Features
|
|
183
|
+
|
|
184
|
+
### π¨ Visual Component Preview
|
|
185
|
+
|
|
186
|
+
Generate interactive HTML previews of your components before building:
|
|
187
|
+
|
|
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
|
|
71
192
|
|
|
72
193
|
```bash
|
|
73
|
-
mycontext
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
--with-tests
|
|
194
|
+
mycontext preview brand # Preview design system
|
|
195
|
+
mycontext preview components # Preview all components
|
|
196
|
+
mycontext preview authentication # Preview specific group
|
|
77
197
|
```
|
|
78
198
|
|
|
79
|
-
|
|
199
|
+
### β
Zero-Error Component Validation
|
|
80
200
|
|
|
81
|
-
|
|
201
|
+
**Every single component** automatically validated before save:
|
|
82
202
|
|
|
83
|
-
### β
230-Step Validated Workflow
|
|
84
|
-
|
|
85
|
-
Every app goes through **12 validation gates** where you approve:
|
|
86
|
-
1. Features specification
|
|
87
|
-
2. User flows
|
|
88
|
-
3. Edge cases
|
|
89
|
-
4. Technical specs
|
|
90
|
-
5. **PRD (must read entire document)**
|
|
91
|
-
6. TypeScript types
|
|
92
|
-
7. Branding & design system
|
|
93
|
-
8. Build strategy
|
|
94
|
-
9. Component list
|
|
95
|
-
10. Server actions (if full-stack)
|
|
96
|
-
11. Routes (if full-stack)
|
|
97
|
-
12. Final build validation
|
|
98
|
-
|
|
99
|
-
### π¨ Automatic Build Validation
|
|
100
|
-
|
|
101
|
-
**Every component** automatically passes through:
|
|
102
203
|
- β
TypeScript check (`tsc --noEmit`)
|
|
103
204
|
- β
ESLint validation
|
|
104
205
|
- β
Build check (`npm run build`)
|
|
@@ -106,63 +207,169 @@ Every app goes through **12 validation gates** where you approve:
|
|
|
106
207
|
|
|
107
208
|
**Failed components retry automatically** with error context (max 3 attempts).
|
|
108
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
|
|
235
|
+
|
|
236
|
+
# Preview your work
|
|
237
|
+
mycontext preview components
|
|
238
|
+
|
|
239
|
+
# Scale to full app
|
|
240
|
+
mycontext build-app --interactive
|
|
241
|
+
```
|
|
242
|
+
|
|
109
243
|
### π Real-Time Progress Tracking
|
|
110
244
|
|
|
111
|
-
Track
|
|
245
|
+
Track component generation progress via JSON files in `.mycontext/progress/`:
|
|
246
|
+
|
|
112
247
|
```json
|
|
113
248
|
{
|
|
114
249
|
"currentPhase": "component_generation",
|
|
115
|
-
"currentStep":
|
|
116
|
-
"totalSteps":
|
|
117
|
-
"percentComplete":
|
|
250
|
+
"currentStep": 15,
|
|
251
|
+
"totalSteps": 30,
|
|
252
|
+
"percentComplete": 50.0,
|
|
253
|
+
"currentComponent": "LoginForm"
|
|
118
254
|
}
|
|
119
255
|
```
|
|
120
256
|
|
|
121
|
-
**Perfect for VS Code extensions & dashboards.**
|
|
257
|
+
**Perfect for VS Code extensions & build dashboards.**
|
|
122
258
|
|
|
123
|
-
### ποΈ Complete Architecture
|
|
259
|
+
### ποΈ Scale to Complete Architecture
|
|
260
|
+
|
|
261
|
+
When ready, generate full-stack apps with `--complete-architecture`:
|
|
124
262
|
|
|
125
|
-
Generate full-stack apps with `--complete-architecture`:
|
|
126
263
|
- Next.js 15 App Router routes
|
|
127
264
|
- Server actions with validation
|
|
128
265
|
- Self-documenting components
|
|
129
266
|
- Type-safe throughout
|
|
267
|
+
- **Reuses your validated components**
|
|
130
268
|
|
|
131
269
|
---
|
|
132
270
|
|
|
133
271
|
## π Commands
|
|
134
272
|
|
|
135
|
-
###
|
|
273
|
+
### Component Generation (Recommended)
|
|
136
274
|
|
|
137
275
|
```bash
|
|
138
|
-
|
|
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
|
|
139
284
|
|
|
140
285
|
# Options:
|
|
141
|
-
--
|
|
142
|
-
--
|
|
143
|
-
--
|
|
144
|
-
--complete-architecture # Generate server actions + routes
|
|
145
|
-
--architecture-type # nextjs-app-router | nextjs-pages | react-spa
|
|
146
|
-
--max-retries 3 # Max retry attempts
|
|
286
|
+
--with-tests # Generate unit tests for each component
|
|
287
|
+
--group <group> # Specify component group
|
|
288
|
+
--check # Run typecheck, lint, tests after generation
|
|
147
289
|
--verbose # Show detailed output
|
|
148
290
|
```
|
|
149
291
|
|
|
150
|
-
###
|
|
292
|
+
### Visual Preview
|
|
293
|
+
|
|
294
|
+
```bash
|
|
295
|
+
# Preview brand elements
|
|
296
|
+
mycontext preview brand
|
|
297
|
+
|
|
298
|
+
# Preview all components
|
|
299
|
+
mycontext preview components
|
|
300
|
+
|
|
301
|
+
# Preview specific component group
|
|
302
|
+
mycontext preview authentication
|
|
303
|
+
|
|
304
|
+
# Options:
|
|
305
|
+
--no-open # Don't auto-open in browser
|
|
306
|
+
--port <number> # Port for local server (default: 3000)
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
### Component-First Workflow
|
|
151
310
|
|
|
152
311
|
```bash
|
|
153
312
|
# 1. Initialize project
|
|
154
313
|
mycontext init my-app
|
|
155
314
|
|
|
156
|
-
# 2. Generate context files
|
|
315
|
+
# 2. Generate context files
|
|
157
316
|
mycontext generate-context-files --description "Your app"
|
|
158
317
|
|
|
159
|
-
# 3.
|
|
160
|
-
mycontext
|
|
318
|
+
# 3. Generate individual components
|
|
319
|
+
mycontext generate-components LoginForm --with-tests
|
|
320
|
+
mycontext generate-components SignupForm --with-tests
|
|
161
321
|
|
|
162
|
-
# 4.
|
|
163
|
-
mycontext
|
|
322
|
+
# 4. Preview components
|
|
323
|
+
mycontext preview components
|
|
324
|
+
|
|
325
|
+
# 5. Scale to full app (when ready)
|
|
326
|
+
mycontext build-app --interactive
|
|
164
327
|
```
|
|
165
328
|
|
|
329
|
+
### Scale to Complete App
|
|
330
|
+
|
|
331
|
+
**Component-First Mode (NEW - Recommended):**
|
|
332
|
+
|
|
333
|
+
Build apps by reusing existing validated components:
|
|
334
|
+
|
|
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
|
+
```
|
|
350
|
+
|
|
351
|
+
**Traditional Mode (Generate Everything):**
|
|
352
|
+
|
|
353
|
+
```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
|
|
364
|
+
```
|
|
365
|
+
|
|
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
|
+
|
|
166
373
|
### Other Commands
|
|
167
374
|
|
|
168
375
|
```bash
|
|
@@ -170,7 +377,8 @@ mycontext setup # Configure AI providers
|
|
|
170
377
|
mycontext build-strategy # Interactive strategy selection
|
|
171
378
|
mycontext analyze # Analyze existing project
|
|
172
379
|
mycontext list [type] # List components/projects
|
|
173
|
-
mycontext
|
|
380
|
+
mycontext enhance <component> # Enhance component with AI
|
|
381
|
+
mycontext refine <component> # Refine component with AI
|
|
174
382
|
```
|
|
175
383
|
|
|
176
384
|
---
|
|
@@ -226,18 +434,52 @@ my-app/
|
|
|
226
434
|
|
|
227
435
|
---
|
|
228
436
|
|
|
229
|
-
## π How It Works
|
|
437
|
+
## π How It Works (Component-First with Claude Agent SDK)
|
|
230
438
|
|
|
231
|
-
|
|
232
|
-
AI generates detailed context files based on your description. **You approve each one.**
|
|
439
|
+
MyContext uses **Claude Agent SDK** with intelligent component detection and reuse. The workflow automatically adapts based on what exists in your project.
|
|
233
440
|
|
|
234
|
-
###
|
|
235
|
-
Context files are compiled into a comprehensive PRD. **You must read and approve.**
|
|
441
|
+
### 1. Intelligent Component Detection (NEW)
|
|
236
442
|
|
|
237
|
-
|
|
238
|
-
|
|
443
|
+
Claude Agent SDK automatically detects existing components:
|
|
444
|
+
|
|
445
|
+
```bash
|
|
446
|
+
mycontext build-app --interactive --complete-architecture
|
|
239
447
|
```
|
|
240
|
-
|
|
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
|
|
241
483
|
β
Code Generated
|
|
242
484
|
β
TypeScript Check Passed
|
|
243
485
|
β
ESLint Passed
|
|
@@ -245,17 +487,84 @@ Components are generated from PRD. **Each component automatically validated:**
|
|
|
245
487
|
β
Tests Passed
|
|
246
488
|
```
|
|
247
489
|
|
|
248
|
-
###
|
|
249
|
-
|
|
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
|
+
|
|
250
558
|
```
|
|
251
559
|
β TypeScript check failed (3 errors)
|
|
252
|
-
-
|
|
560
|
+
- Button.tsx:12:5 - TS2322: Type 'string' not assignable to 'number'
|
|
253
561
|
|
|
254
562
|
π Retry 1/3 (with error context)
|
|
255
563
|
β
Fixed and validated
|
|
256
564
|
```
|
|
257
565
|
|
|
258
|
-
###
|
|
566
|
+
### 7. Production Deploy
|
|
567
|
+
|
|
259
568
|
```bash
|
|
260
569
|
cd my-app
|
|
261
570
|
npm run build # β
Zero errors guaranteed
|
|
@@ -333,15 +642,26 @@ After successful build:
|
|
|
333
642
|
|
|
334
643
|
## π MyContext vs Others
|
|
335
644
|
|
|
336
|
-
| Feature
|
|
337
|
-
|
|
338
|
-
| **
|
|
339
|
-
| **
|
|
340
|
-
| **
|
|
341
|
-
| **
|
|
342
|
-
| **
|
|
343
|
-
| **
|
|
344
|
-
| **
|
|
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
|
|
345
665
|
|
|
346
666
|
---
|
|
347
667
|
|
|
@@ -356,18 +676,21 @@ After successful build:
|
|
|
356
676
|
## π Troubleshooting
|
|
357
677
|
|
|
358
678
|
**"PRD Validation Failed"**
|
|
679
|
+
|
|
359
680
|
```bash
|
|
360
681
|
# Provide feedback and regenerate
|
|
361
682
|
mycontext compile-prd --force
|
|
362
683
|
```
|
|
363
684
|
|
|
364
685
|
**"Component Build Failed"**
|
|
686
|
+
|
|
365
687
|
```bash
|
|
366
688
|
# Automatic retry with error context (max 3 attempts)
|
|
367
689
|
# Check .mycontext/progress/07-components/<component>.json
|
|
368
690
|
```
|
|
369
691
|
|
|
370
692
|
**"Progress Not Tracking"**
|
|
693
|
+
|
|
371
694
|
```bash
|
|
372
695
|
# Verify progress directory exists
|
|
373
696
|
ls -la .mycontext/progress/
|
|
@@ -385,4 +708,4 @@ MIT Β© MyContext
|
|
|
385
708
|
|
|
386
709
|
---
|
|
387
710
|
|
|
388
|
-
**
|
|
711
|
+
**Start small. Build component by component. Scale when ready. Zero errors guaranteed.** π¨
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClaudeAgentWorkflow.d.ts","sourceRoot":"","sources":["../../../src/agents/implementations/ClaudeAgentWorkflow.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EAEf,MAAM,wBAAwB,CAAC;AAOhC,qBAAa,mBACX,YAAW,QAAQ,CAAC,aAAa,EAAE,cAAc,CAAC;IAElD,IAAI,SAAyB;IAC7B,WAAW,SAC6F;IACxG,WAAW,SACwF;IACnG,WAAW,SAAsB;IACjC,SAAS,WAQP;IAEF,OAAO,CAAC,iBAAiB,CAAoB;IAC7C,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,iBAAiB,CAAwB;IACjD,OAAO,CAAC,cAAc,CAAsB;IAE5C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,eAAe,CAAsB;gBAEjC,gBAAgB,CAAC,EAAE,MAAM;IAOrC;;OAEG;IACH,sBAAsB,IAAI,OAAO;IAI3B,GAAG,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC,cAAc,CAAC;IAmFxD;;OAEG;YACW,qBAAqB;
|
|
1
|
+
{"version":3,"file":"ClaudeAgentWorkflow.d.ts","sourceRoot":"","sources":["../../../src/agents/implementations/ClaudeAgentWorkflow.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,QAAQ,EACR,aAAa,EACb,cAAc,EAEf,MAAM,wBAAwB,CAAC;AAOhC,qBAAa,mBACX,YAAW,QAAQ,CAAC,aAAa,EAAE,cAAc,CAAC;IAElD,IAAI,SAAyB;IAC7B,WAAW,SAC6F;IACxG,WAAW,SACwF;IACnG,WAAW,SAAsB;IACjC,SAAS,WAQP;IAEF,OAAO,CAAC,iBAAiB,CAAoB;IAC7C,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,iBAAiB,CAAwB;IACjD,OAAO,CAAC,cAAc,CAAsB;IAE5C,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,eAAe,CAAsB;gBAEjC,gBAAgB,CAAC,EAAE,MAAM;IAOrC;;OAEG;IACH,sBAAsB,IAAI,OAAO;IAI3B,GAAG,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAAC,cAAc,CAAC;IAmFxD;;OAEG;YACW,qBAAqB;IAsFnC;;OAEG;YACW,sBAAsB;IAgDpC;;OAEG;IACH,OAAO,CAAC,2BAA2B;IA8KnC;;OAEG;YACW,uBAAuB;IAUrC;;OAEG;YACW,0BAA0B;IAkFxC;;OAEG;IACH,OAAO,CAAC,eAAe;IAwBvB;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAgBlC;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAgB/B;;OAEG;IACH,OAAO,CAAC,+BAA+B;IAevC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAiBpC;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAgBtC;;OAEG;IACH,OAAO,CAAC,4BAA4B;IAcpC;;OAEG;YACW,iBAAiB;IA2B/B;;OAEG;YACW,4BAA4B;IAK1C;;OAEG;YACW,yBAAyB;IAKvC;;OAEG;YACW,iCAAiC;IAK/C;;OAEG;YACW,8BAA8B;IAK5C;;OAEG;YACW,gCAAgC;IAK9C;;OAEG;YACW,8BAA8B;IAK5C;;OAEG;IACH,OAAO,CAAC,uBAAuB;CAoBhC"}
|