mycontext-cli 2.0.0 → 2.0.1
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 +266 -515
- package/dist/agents/implementations/WorkflowAgent.d.ts +4 -0
- package/dist/agents/implementations/WorkflowAgent.d.ts.map +1 -1
- package/dist/agents/implementations/WorkflowAgent.js +15 -1
- package/dist/agents/implementations/WorkflowAgent.js.map +1 -1
- package/dist/package.json +1 -1
- package/dist/utils/buildValidator.d.ts +72 -0
- package/dist/utils/buildValidator.d.ts.map +1 -0
- package/dist/utils/buildValidator.js +338 -0
- package/dist/utils/buildValidator.js.map +1 -0
- package/dist/utils/progressTracker.d.ts +121 -0
- package/dist/utils/progressTracker.d.ts.map +1 -0
- package/dist/utils/progressTracker.js +334 -0
- package/dist/utils/progressTracker.js.map +1 -0
- package/dist/utils/validationGates.d.ts +58 -0
- package/dist/utils/validationGates.d.ts.map +1 -0
- package/dist/utils/validationGates.js +390 -0
- package/dist/utils/validationGates.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,630 +1,383 @@
|
|
|
1
1
|
# MyContext CLI
|
|
2
2
|
|
|
3
|
-
**🧠
|
|
4
|
-
|
|
5
|
-
AI-powered tool that generates production-ready full-stack applications through an advanced agent-driven workflow that deeply understands your project context.
|
|
3
|
+
**🧠 AI-Powered Full-Stack App Generation with Production-Ready Guarantees**
|
|
6
4
|
|
|
7
5
|
[](https://www.npmjs.com/package/mycontext-cli)
|
|
8
6
|
[](https://opensource.org/licenses/MIT)
|
|
9
7
|
[](https://nodejs.org)
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
Generate complete Next.js applications from natural language with **guaranteed zero linter/build errors** through AI-powered validation gates and automatic build checking.
|
|
10
|
+
|
|
11
|
+
## 🚀 Quick Start
|
|
12
12
|
|
|
13
13
|
```bash
|
|
14
|
+
# Install globally
|
|
14
15
|
npm install -g mycontext-cli
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
yarn global add mycontext-cli
|
|
16
|
+
|
|
17
|
+
# Build a complete app in one command
|
|
18
|
+
mycontext build-app --description "Your app idea" --interactive
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
##
|
|
21
|
+
## 💡 Philosophy: "LLM as Compiler"
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
MyContext treats AI as a **compiler** that transforms requirements into production-ready code:
|
|
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
|
|
26
28
|
|
|
27
|
-
|
|
28
|
-
echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' > .mycontext/.env
|
|
29
|
+
**Result:** Production-ready code with 0 errors guaranteed.
|
|
29
30
|
|
|
30
|
-
|
|
31
|
-
mycontext generate-context-files --description 'Modern e-commerce app'
|
|
31
|
+
---
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
mycontext compile-prd
|
|
33
|
+
## 📖 Examples
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
mycontext generate-components all --complete-architecture
|
|
35
|
+
### Tic-Tac-Toe Game
|
|
38
36
|
|
|
39
|
-
|
|
40
|
-
mycontext build-app
|
|
37
|
+
```bash
|
|
38
|
+
mycontext build-app \
|
|
39
|
+
--description "Tic-tac-toe with AI opponent, score tracking, and responsive design" \
|
|
40
|
+
--interactive \
|
|
41
|
+
--with-tests
|
|
41
42
|
```
|
|
42
43
|
|
|
43
|
-
|
|
44
|
+
**Generated:**
|
|
45
|
+
- Game board component
|
|
46
|
+
- AI opponent (minimax algorithm)
|
|
47
|
+
- Score tracking system
|
|
48
|
+
- Reset functionality
|
|
49
|
+
- Responsive Tailwind design
|
|
50
|
+
- Unit tests
|
|
44
51
|
|
|
45
|
-
###
|
|
52
|
+
### E-Commerce Platform
|
|
46
53
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
-
|
|
52
|
-
|
|
53
|
-
- **🔒 Type-Safe Throughout** - Full TypeScript support across the stack
|
|
54
|
+
```bash
|
|
55
|
+
mycontext build-app \
|
|
56
|
+
--description "E-commerce with product catalog, shopping cart, checkout, and admin dashboard" \
|
|
57
|
+
--interactive \
|
|
58
|
+
--complete-architecture
|
|
59
|
+
```
|
|
54
60
|
|
|
55
|
-
|
|
61
|
+
**Generated:**
|
|
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
|
|
56
69
|
|
|
57
|
-
|
|
58
|
-
- **⚡ Fast Setup**: Initialize projects in seconds with Next.js 15, TypeScript, and Tailwind CSS
|
|
59
|
-
- **🎨 Component Generation**: Create production-ready React components with Shadcn UI
|
|
60
|
-
- **📋 Context-Aware**: Generates PRDs, types, and branding based on your project
|
|
61
|
-
- **🧠 Interactive Strategy Planning**: AI-powered build strategy recommendations
|
|
62
|
-
- **🎯 Smart Planning**: Get personalized development approach recommendations
|
|
63
|
-
- **🔧 Developer-Friendly**: Built-in validation, testing, and preview capabilities
|
|
64
|
-
- **🆓 Free Tier**: Use Qwen3 Coder model for free testing, or premium X.AI/Claude for production
|
|
70
|
+
### Todo App with Auth
|
|
65
71
|
|
|
66
|
-
|
|
72
|
+
```bash
|
|
73
|
+
mycontext build-app \
|
|
74
|
+
--description "Todo app with user auth, categories, due dates, and dark mode" \
|
|
75
|
+
--interactive \
|
|
76
|
+
--with-tests
|
|
77
|
+
```
|
|
67
78
|
|
|
68
|
-
|
|
79
|
+
---
|
|
69
80
|
|
|
70
|
-
|
|
81
|
+
## 🎯 Features
|
|
82
|
+
|
|
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
|
+
- ✅ TypeScript check (`tsc --noEmit`)
|
|
103
|
+
- ✅ ESLint validation
|
|
104
|
+
- ✅ Build check (`npm run build`)
|
|
105
|
+
- ✅ Unit tests (if `--with-tests`)
|
|
106
|
+
|
|
107
|
+
**Failed components retry automatically** with error context (max 3 attempts).
|
|
108
|
+
|
|
109
|
+
### 📊 Real-Time Progress Tracking
|
|
110
|
+
|
|
111
|
+
Track build progress via JSON files in `.mycontext/progress/`:
|
|
112
|
+
```json
|
|
113
|
+
{
|
|
114
|
+
"currentPhase": "component_generation",
|
|
115
|
+
"currentStep": 95,
|
|
116
|
+
"totalSteps": 230,
|
|
117
|
+
"percentComplete": 41.3
|
|
118
|
+
}
|
|
119
|
+
```
|
|
71
120
|
|
|
72
|
-
|
|
121
|
+
**Perfect for VS Code extensions & dashboards.**
|
|
73
122
|
|
|
74
|
-
|
|
75
|
-
- Tools: `Read`, `Write`, `Glob`, `AnalyzeComponent`
|
|
76
|
-
- Expert in: Next.js 15, TypeScript, Shadcn UI, Tailwind CSS
|
|
123
|
+
### 🏗️ Complete Architecture Generation
|
|
77
124
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
125
|
+
Generate full-stack apps with `--complete-architecture`:
|
|
126
|
+
- Next.js 15 App Router routes
|
|
127
|
+
- Server actions with validation
|
|
128
|
+
- Self-documenting components
|
|
129
|
+
- Type-safe throughout
|
|
81
130
|
|
|
82
|
-
|
|
83
|
-
- Tools: `Read`, `Write`, `Glob`, `GenerateDocs`, `AnalyzeComponent`
|
|
84
|
-
- Expert in: API docs, component guides, architecture overviews
|
|
131
|
+
---
|
|
85
132
|
|
|
86
|
-
|
|
87
|
-
- Tools: `Read`, `Write`, `Glob`, `AnalyzeComponent`
|
|
88
|
-
- Expert in: Jest, React Testing Library, E2E testing
|
|
133
|
+
## 📋 Commands
|
|
89
134
|
|
|
90
|
-
|
|
91
|
-
- Tools: `Read`, `Glob`, `Grep`, `ValidatePRD`
|
|
92
|
-
- Expert in: Scalability, folder structure, data flow, API design
|
|
135
|
+
### Build Complete App (Recommended)
|
|
93
136
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
- Expert in: XSS, CSRF, SQL injection, authentication, authorization
|
|
137
|
+
```bash
|
|
138
|
+
mycontext build-app --description "Your app" --interactive
|
|
97
139
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
140
|
+
# Options:
|
|
141
|
+
--output <dir> # Output directory (default: mycontext-app)
|
|
142
|
+
--interactive # Interactive mode with validation prompts
|
|
143
|
+
--with-tests # Generate unit tests
|
|
144
|
+
--complete-architecture # Generate server actions + routes
|
|
145
|
+
--architecture-type # nextjs-app-router | nextjs-pages | react-spa
|
|
146
|
+
--max-retries 3 # Max retry attempts
|
|
147
|
+
--verbose # Show detailed output
|
|
148
|
+
```
|
|
101
149
|
|
|
102
|
-
|
|
103
|
-
- Tools: `Read`, `Glob`, `Grep`, `AnalyzeComponent`
|
|
104
|
-
- Expert in: React performance, Core Web Vitals, bundle optimization
|
|
150
|
+
### Step-by-Step Workflow
|
|
105
151
|
|
|
106
|
-
|
|
152
|
+
```bash
|
|
153
|
+
# 1. Initialize project
|
|
154
|
+
mycontext init my-app
|
|
107
155
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
- Returns: Detailed component report with insights
|
|
156
|
+
# 2. Generate context files (with validation gates)
|
|
157
|
+
mycontext generate-context-files --description "Your app"
|
|
111
158
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
- Returns: Quality score (0-100) with recommendations
|
|
159
|
+
# 3. Compile PRD (requires approval)
|
|
160
|
+
mycontext compile-prd
|
|
115
161
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
162
|
+
# 4. Generate components (with build validation)
|
|
163
|
+
mycontext generate-components all --with-tests
|
|
164
|
+
```
|
|
119
165
|
|
|
120
|
-
|
|
121
|
-
- Generates: Component docs with props, usage, dependencies
|
|
122
|
-
- Returns: Markdown documentation
|
|
166
|
+
### Other Commands
|
|
123
167
|
|
|
124
|
-
|
|
168
|
+
```bash
|
|
169
|
+
mycontext setup # Configure AI providers
|
|
170
|
+
mycontext build-strategy # Interactive strategy selection
|
|
171
|
+
mycontext analyze # Analyze existing project
|
|
172
|
+
mycontext list [type] # List components/projects
|
|
173
|
+
mycontext preview <type> # Preview components
|
|
174
|
+
```
|
|
125
175
|
|
|
126
|
-
|
|
176
|
+
---
|
|
127
177
|
|
|
128
|
-
|
|
129
|
-
|----------------|-------------|-----|
|
|
130
|
-
| `build-app` | **Agent SDK** | Complex workflow + Tools + Streaming |
|
|
131
|
-
| `generate-components` | **Agent SDK** | File operations + Context management |
|
|
132
|
-
| `enhance <file>` | **Agent SDK** | Refactoring agent + File R/W |
|
|
133
|
-
| `agent-flow` | **Agent SDK** | Multi-step workflow orchestration |
|
|
134
|
-
| Simple text gen | **Direct API** | Fast, single-shot operations |
|
|
178
|
+
## ⚙️ Configuration
|
|
135
179
|
|
|
136
|
-
|
|
180
|
+
### API Keys (BYOK Model)
|
|
137
181
|
|
|
138
|
-
|
|
139
|
-
- **🔐 Fine-Grained Tool Permissions**: Granular control over AI capabilities
|
|
140
|
-
- **🔌 MCP Integration**: Model Context Protocol for custom tools
|
|
141
|
-
- **⚡ Enhanced Workflows**: Intelligent agent coordination with error handling
|
|
142
|
-
- **🎯 Smart Fallbacks**: Seamless fallback to standard clients
|
|
143
|
-
- **📊 Real-Time Progress**: Streaming updates with token tracking
|
|
144
|
-
- **🪝 Hook System**: Lifecycle events (PreToolUse, PostToolUse, SessionStart)
|
|
145
|
-
- **📈 Performance Tracking**: Operation statistics and metrics
|
|
182
|
+
MyContext uses **your own API keys** - no billing from us.
|
|
146
183
|
|
|
147
|
-
|
|
184
|
+
**Recommended providers:**
|
|
148
185
|
|
|
149
186
|
```bash
|
|
150
|
-
#
|
|
151
|
-
|
|
152
|
-
# → Uses Refactoring Agent automatically
|
|
153
|
-
|
|
154
|
-
# Component generation with analysis
|
|
155
|
-
mycontext generate-components ProductCard
|
|
156
|
-
# → Uses Component Generator + AnalyzeComponent tool
|
|
187
|
+
# Claude (best for complex reasoning)
|
|
188
|
+
echo 'MYCONTEXT_CLAUDE_API_KEY=sk-ant-xxx' > .mycontext/.env
|
|
157
189
|
|
|
158
|
-
#
|
|
159
|
-
|
|
160
|
-
# → Uses Security Agent with Read/Grep tools
|
|
190
|
+
# X.AI Grok (best for code generation)
|
|
191
|
+
echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' > .mycontext/.env
|
|
161
192
|
|
|
162
|
-
#
|
|
163
|
-
|
|
164
|
-
# → Uses Testing Agent with component analysis
|
|
193
|
+
# OpenAI (most versatile)
|
|
194
|
+
echo 'MYCONTEXT_OPENAI_API_KEY=sk-xxx' > .mycontext/.env
|
|
165
195
|
```
|
|
166
196
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
```typescript
|
|
170
|
-
// MyContext analyzes your operation
|
|
171
|
-
const operation = {
|
|
172
|
-
type: 'enhance',
|
|
173
|
-
target: 'Button.tsx',
|
|
174
|
-
complexity: 'moderate',
|
|
175
|
-
requiresTools: true, // Needs Read/Write
|
|
176
|
-
requiresStreaming: false
|
|
177
|
-
};
|
|
178
|
-
|
|
179
|
-
// Router intelligently selects client
|
|
180
|
-
if (complexity === 'complex' || requiresTools) {
|
|
181
|
-
→ Use Agent SDK with appropriate agent
|
|
182
|
-
} else {
|
|
183
|
-
→ Use Direct API for speed
|
|
184
|
-
}
|
|
197
|
+
**Free tier:**
|
|
185
198
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
-
|
|
189
|
-
- Streams progress in real-time
|
|
190
|
-
- Validates output with CheckTypes
|
|
191
|
-
- Returns enhanced component
|
|
199
|
+
```bash
|
|
200
|
+
# Qwen3 (free via OpenRouter)
|
|
201
|
+
echo 'MYCONTEXT_QWEN_API_KEY=sk-or-xxx' > .mycontext/.env
|
|
192
202
|
```
|
|
193
203
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
### What Gets Generated
|
|
197
|
-
|
|
198
|
-
When using `--complete-architecture`, MyContext generates a **production-ready full-stack application**:
|
|
204
|
+
### Project Structure
|
|
199
205
|
|
|
200
206
|
```
|
|
201
|
-
|
|
207
|
+
my-app/
|
|
202
208
|
├── .mycontext/
|
|
203
|
-
│
|
|
204
|
-
├──
|
|
205
|
-
│
|
|
206
|
-
│
|
|
207
|
-
│
|
|
208
|
-
│
|
|
209
|
-
│
|
|
210
|
-
├──
|
|
211
|
-
│ ├──
|
|
212
|
-
│ ├──
|
|
213
|
-
│ └──
|
|
214
|
-
└──
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
│ ├── layout.tsx
|
|
220
|
-
│ ├── new/
|
|
221
|
-
│ │ └── page.tsx # Create forms
|
|
222
|
-
│ └── [id]/
|
|
223
|
-
│ ├── page.tsx # Dynamic routes
|
|
224
|
-
│ └── edit/
|
|
225
|
-
│ └── page.tsx # Edit forms
|
|
209
|
+
│ ├── 01-prd.md # Product Requirements
|
|
210
|
+
│ ├── 02-a-features.md # Features
|
|
211
|
+
│ ├── 02-b-user-flows.md # User flows
|
|
212
|
+
│ ├── 02-c-edge-cases.md # Edge cases
|
|
213
|
+
│ ├── 02-d-technical-specs.md # Tech specs
|
|
214
|
+
│ ├── 03-types.ts # TypeScript types
|
|
215
|
+
│ ├── 04-branding.md # Branding
|
|
216
|
+
│ ├── 05-component-list.json # Component list
|
|
217
|
+
│ ├── progress/ # Progress tracking
|
|
218
|
+
│ │ ├── master.json # Master progress
|
|
219
|
+
│ │ └── 07-components/ # Per-component progress
|
|
220
|
+
│ └── .env # API keys
|
|
221
|
+
├── components/ # Generated components
|
|
222
|
+
├── actions/ # Server actions (--complete-architecture)
|
|
223
|
+
├── app/ # Routes (--complete-architecture)
|
|
224
|
+
└── package.json
|
|
226
225
|
```
|
|
227
226
|
|
|
228
|
-
|
|
227
|
+
---
|
|
229
228
|
|
|
230
|
-
|
|
231
|
-
# Generate complete architecture with specific type
|
|
232
|
-
mycontext generate-components all --complete-architecture --architecture-type nextjs-app-router
|
|
229
|
+
## 🎓 How It Works
|
|
233
230
|
|
|
234
|
-
|
|
235
|
-
|
|
231
|
+
### 1. Context Generation
|
|
232
|
+
AI generates detailed context files based on your description. **You approve each one.**
|
|
236
233
|
|
|
237
|
-
|
|
238
|
-
|
|
234
|
+
### 2. PRD Compilation
|
|
235
|
+
Context files are compiled into a comprehensive PRD. **You must read and approve.**
|
|
239
236
|
|
|
240
|
-
|
|
241
|
-
|
|
237
|
+
### 3. Component Generation
|
|
238
|
+
Components are generated from PRD. **Each component automatically validated:**
|
|
242
239
|
```
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
### Self-Documenting Components
|
|
251
|
-
|
|
252
|
-
Every generated component includes comprehensive documentation:
|
|
253
|
-
|
|
254
|
-
```typescript
|
|
255
|
-
/**
|
|
256
|
-
* Component: ProductCard
|
|
257
|
-
* Level: 3 (Atomic Component)
|
|
258
|
-
* Type: display
|
|
259
|
-
*
|
|
260
|
-
* Dependencies:
|
|
261
|
-
* - ProductGrid (parent)
|
|
262
|
-
* - ProductCatalog (ancestor)
|
|
263
|
-
*
|
|
264
|
-
* Server Actions:
|
|
265
|
-
* - getProduct: Fetch single product by ID
|
|
266
|
-
*
|
|
267
|
-
* Purpose: Display individual product information in a card format
|
|
268
|
-
*
|
|
269
|
-
* User Expectations:
|
|
270
|
-
* - Users expect clear product images, titles, and prices
|
|
271
|
-
* - Users expect to be able to click to view product details
|
|
272
|
-
* - Users expect loading states while data fetches
|
|
273
|
-
*
|
|
274
|
-
* Data Flow:
|
|
275
|
-
* ProductGrid → ProductCard (product data)
|
|
276
|
-
* ProductCard → getProduct (server action)
|
|
277
|
-
* getProduct → Database.products (Product)
|
|
278
|
-
*/
|
|
279
|
-
export function ProductCard({ product }: ProductCardProps) {
|
|
280
|
-
// Component implementation
|
|
281
|
-
}
|
|
240
|
+
🔨 Generating: LoginForm
|
|
241
|
+
✅ Code Generated
|
|
242
|
+
✅ TypeScript Check Passed
|
|
243
|
+
✅ ESLint Passed
|
|
244
|
+
✅ Build Passed
|
|
245
|
+
✅ Tests Passed
|
|
282
246
|
```
|
|
283
247
|
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
### Project Setup
|
|
287
|
-
|
|
288
|
-
```bash
|
|
289
|
-
mycontext init <project-name> # Initialize new project
|
|
290
|
-
mycontext init . --analyze # Analyze existing project
|
|
291
|
-
mycontext setup # Configure AI providers
|
|
248
|
+
### 4. Error Recovery
|
|
249
|
+
Failed components retry with error context:
|
|
292
250
|
```
|
|
251
|
+
❌ TypeScript check failed (3 errors)
|
|
252
|
+
- LoginForm.tsx:12:5 - TS2322: Type 'string' not assignable to 'number'
|
|
293
253
|
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
```bash
|
|
297
|
-
# Basic build
|
|
298
|
-
mycontext build-app --description "E-commerce platform"
|
|
299
|
-
|
|
300
|
-
# 🆕 Complete architecture build (NEW!)
|
|
301
|
-
mycontext build-app --description "E-commerce platform" --complete-architecture
|
|
302
|
-
|
|
303
|
-
# 🆕 Interactive mode with prompts (NEW!)
|
|
304
|
-
mycontext build-app --description "E-commerce platform" --interactive
|
|
305
|
-
|
|
306
|
-
# 🆕 Specific architecture type (NEW!)
|
|
307
|
-
mycontext build-app --description "Blog" --complete-architecture --architecture-type nextjs-pages
|
|
308
|
-
|
|
309
|
-
# Options:
|
|
310
|
-
# --complete-architecture Generate with actions, routes, full docs
|
|
311
|
-
# --architecture-type nextjs-app-router | nextjs-pages | react-spa
|
|
312
|
-
# --server-actions Generate server actions (default: true)
|
|
313
|
-
# --routes Generate Next.js routes (default: true)
|
|
314
|
-
# --interactive Interactive mode with guided prompts
|
|
254
|
+
🔄 Retry 1/3 (with error context)
|
|
255
|
+
✅ Fixed and validated
|
|
315
256
|
```
|
|
316
257
|
|
|
317
|
-
###
|
|
318
|
-
|
|
258
|
+
### 5. Production Deploy
|
|
319
259
|
```bash
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
mycontext generate components-list # Generate component list
|
|
324
|
-
mycontext compile-prd # Compile PRD from context files
|
|
260
|
+
cd my-app
|
|
261
|
+
npm run build # ✅ Zero errors guaranteed
|
|
262
|
+
vercel deploy # 🚀 Deploy
|
|
325
263
|
```
|
|
326
264
|
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
```bash
|
|
330
|
-
# Basic component generation
|
|
331
|
-
mycontext generate-components <target>
|
|
332
|
-
|
|
333
|
-
# 🆕 Complete architecture generation (NEW!)
|
|
334
|
-
mycontext generate-components all --complete-architecture
|
|
335
|
-
|
|
336
|
-
# 🆕 With specific architecture type (NEW!)
|
|
337
|
-
mycontext generate-components all --complete-architecture --architecture-type nextjs-app-router
|
|
265
|
+
---
|
|
338
266
|
|
|
339
|
-
|
|
340
|
-
mycontext generate-components all --server-actions
|
|
267
|
+
## 🔧 Advanced Usage
|
|
341
268
|
|
|
342
|
-
|
|
343
|
-
mycontext generate-components all --routes
|
|
269
|
+
### Build Strategy Selection
|
|
344
270
|
|
|
345
|
-
|
|
346
|
-
mycontext
|
|
347
|
-
mycontext refine <component> # Refine components with AI
|
|
348
|
-
mycontext preview <type> # Preview components or brand
|
|
349
|
-
```
|
|
271
|
+
```bash
|
|
272
|
+
mycontext build-strategy --recommend
|
|
350
273
|
|
|
351
|
-
|
|
274
|
+
# AI asks about:
|
|
275
|
+
- Project type (client work, personal, MVP, etc.)
|
|
276
|
+
- Complexity (simple, medium, complex)
|
|
277
|
+
- Timeline (urgent, moderate, flexible)
|
|
278
|
+
- Team size (solo, small, large)
|
|
352
279
|
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
mycontext list [type] # List components, projects, or files
|
|
357
|
-
mycontext promote # Promote components to production
|
|
280
|
+
# Recommends best approach:
|
|
281
|
+
🎯 Vertical Slice - Build complete features end-to-end
|
|
282
|
+
⏰ Time to first demo: 2-3 weeks
|
|
358
283
|
```
|
|
359
284
|
|
|
360
|
-
###
|
|
285
|
+
### Complete Architecture
|
|
361
286
|
|
|
362
287
|
```bash
|
|
363
|
-
mycontext build-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
288
|
+
mycontext build-app \
|
|
289
|
+
--description "Blog platform" \
|
|
290
|
+
--complete-architecture \
|
|
291
|
+
--architecture-type nextjs-app-router
|
|
292
|
+
|
|
293
|
+
# Generates:
|
|
294
|
+
# - app/blog/[slug]/page.tsx
|
|
295
|
+
# - actions/createPost.ts
|
|
296
|
+
# - actions/updatePost.ts
|
|
297
|
+
# - components/BlogPost.tsx
|
|
298
|
+
# - Full type system
|
|
371
299
|
```
|
|
372
300
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
MyContext's **AI-Powered Build Strategy** feature helps you choose the right development approach through interactive questions and AI-generated recommendations.
|
|
376
|
-
|
|
377
|
-
### Available Strategies
|
|
378
|
-
|
|
379
|
-
- **🏗️ Foundation First**: Build core infrastructure first (auth, DB, architecture)
|
|
380
|
-
- **🎯 Vertical Slice**: Build complete user journeys end-to-end
|
|
381
|
-
- **📊 Horizontal Slice**: Build feature by feature across the app
|
|
382
|
-
- **🔄 Iterative Scaffolding**: Small chunks everywhere, refine later
|
|
383
|
-
- **⚡ Hybrid Approach**: Combines multiple strategies based on project needs
|
|
384
|
-
|
|
385
|
-
### Example Workflow
|
|
301
|
+
### Existing Project Migration
|
|
386
302
|
|
|
387
303
|
```bash
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
🎯 Getting AI-Powered Strategy Recommendations
|
|
391
|
-
|
|
392
|
-
? What type of project are you building?
|
|
393
|
-
❯ Client Work
|
|
394
|
-
Personal Project
|
|
395
|
-
Team Development
|
|
396
|
-
MVP Development
|
|
397
|
-
Enterprise Application
|
|
398
|
-
|
|
399
|
-
? How complex is your application?
|
|
400
|
-
❯ Simple (few features, single user type)
|
|
401
|
-
Medium (multiple features, some complexity)
|
|
402
|
-
Complex (many features, multiple user types)
|
|
403
|
-
|
|
404
|
-
? What's your timeline?
|
|
405
|
-
❯ Urgent (need demo ASAP)
|
|
406
|
-
Moderate (balanced approach)
|
|
407
|
-
Flexible (quality over speed)
|
|
408
|
-
|
|
409
|
-
✅ Recommended Strategies:
|
|
410
|
-
|
|
411
|
-
🎯 Vertical Slice
|
|
412
|
-
Build complete user journeys end-to-end
|
|
413
|
-
Time to first demo: 2-3 weeks
|
|
414
|
-
Complexity: medium
|
|
415
|
-
|
|
416
|
-
💡 Reasoning:
|
|
417
|
-
Vertical slice approach recommended for balanced development with quick user value
|
|
418
|
-
|
|
419
|
-
💾 Saved to: .mycontext/build-strategy-recommendations-2025-10-02.json
|
|
304
|
+
mycontext analyze # Analyze existing project
|
|
305
|
+
mycontext migrate --all # Migrate to MyContext structure
|
|
420
306
|
```
|
|
421
307
|
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
### AI Providers
|
|
425
|
-
|
|
426
|
-
MyContext supports multiple AI providers with intelligent fallback:
|
|
427
|
-
|
|
428
|
-
#### **Recommended (Premium)**
|
|
429
|
-
|
|
430
|
-
1. **🚀 Claude Agent SDK** (NEW!)
|
|
431
|
-
```bash
|
|
432
|
-
echo 'MYCONTEXT_CLAUDE_API_KEY=sk-ant-xxx' > .mycontext/.env
|
|
433
|
-
```
|
|
434
|
-
- Advanced context management and compaction
|
|
435
|
-
- Fine-grained tool permissions
|
|
436
|
-
- MCP integration
|
|
437
|
-
- Best for complex workflows
|
|
438
|
-
|
|
439
|
-
2. **X.AI (Grok) - Best for Code Generation**
|
|
440
|
-
```bash
|
|
441
|
-
echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' > .mycontext/.env
|
|
442
|
-
```
|
|
443
|
-
|
|
444
|
-
3. **Claude (Anthropic)**
|
|
445
|
-
```bash
|
|
446
|
-
echo 'MYCONTEXT_CLAUDE_API_KEY=sk-ant-xxx' > .mycontext/.env
|
|
447
|
-
```
|
|
448
|
-
|
|
449
|
-
4. **OpenAI (GPT-4)**
|
|
450
|
-
```bash
|
|
451
|
-
echo 'MYCONTEXT_OPENAI_API_KEY=sk-xxx' > .mycontext/.env
|
|
452
|
-
```
|
|
453
|
-
|
|
454
|
-
#### **Testing & Free Tier**
|
|
308
|
+
---
|
|
455
309
|
|
|
456
|
-
|
|
457
|
-
```bash
|
|
458
|
-
echo 'MYCONTEXT_QWEN_API_KEY=sk-or-xxx' > .mycontext/.env
|
|
459
|
-
```
|
|
310
|
+
## 📊 Build Metrics
|
|
460
311
|
|
|
461
|
-
|
|
462
|
-
```bash
|
|
463
|
-
echo 'MYCONTEXT_GITHUB_TOKEN=ghp_xxx' > .mycontext/.env
|
|
464
|
-
```
|
|
465
|
-
|
|
466
|
-
### Project Structure
|
|
312
|
+
After successful build:
|
|
467
313
|
|
|
468
314
|
```
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
│ └── .mycontext/ # MyContext-generated components
|
|
483
|
-
├── actions/ # 🆕 Server actions
|
|
484
|
-
├── app/ # 🆕 Next.js App Router
|
|
485
|
-
└── package.json
|
|
315
|
+
🎉 Workflow Complete!
|
|
316
|
+
|
|
317
|
+
📊 Summary:
|
|
318
|
+
Duration: 12m 34s
|
|
319
|
+
Total Steps: 230/230
|
|
320
|
+
User Approvals: 12
|
|
321
|
+
Retries: 3
|
|
322
|
+
|
|
323
|
+
✅ Build Checks:
|
|
324
|
+
TypeScript: 30 passed, 0 failed
|
|
325
|
+
ESLint: 30 passed, 0 failed
|
|
326
|
+
Build: 30 passed, 0 failed
|
|
327
|
+
Tests: 28 passed, 0 failed
|
|
486
328
|
```
|
|
487
329
|
|
|
488
|
-
|
|
330
|
+
**Zero failures = Production-ready**
|
|
489
331
|
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
```bash
|
|
493
|
-
# Initialize project
|
|
494
|
-
mycontext init ecommerce-app
|
|
332
|
+
---
|
|
495
333
|
|
|
496
|
-
|
|
497
|
-
echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' > ecommerce-app/.mycontext/.env
|
|
498
|
-
cd ecommerce-app
|
|
334
|
+
## 🆚 MyContext vs Others
|
|
499
335
|
|
|
500
|
-
|
|
501
|
-
|
|
336
|
+
| Feature | MyContext | Lovable | v0.dev |
|
|
337
|
+
|---------|-----------|---------|--------|
|
|
338
|
+
| **Code Location** | Your machine | Cloud | Cloud |
|
|
339
|
+
| **Validation Gates** | 12+ checkpoints | None | None |
|
|
340
|
+
| **Build Validation** | Every component | None | None |
|
|
341
|
+
| **TypeScript Guarantee** | 100% | No | No |
|
|
342
|
+
| **Pricing** | BYOK ($0-20/mo) | $20-200/mo | Usage-based |
|
|
343
|
+
| **Deployment** | Anywhere | Limited | Vercel only |
|
|
344
|
+
| **Progress Tracking** | JSON files | None | None |
|
|
502
345
|
|
|
503
|
-
|
|
504
|
-
npm run dev
|
|
505
|
-
```
|
|
346
|
+
---
|
|
506
347
|
|
|
507
|
-
|
|
508
|
-
- Product catalog with server actions
|
|
509
|
-
- Shopping cart functionality
|
|
510
|
-
- Checkout flow with forms
|
|
511
|
-
- Complete Next.js App Router structure
|
|
512
|
-
- Self-documenting components
|
|
348
|
+
## 📚 Documentation
|
|
513
349
|
|
|
514
|
-
|
|
350
|
+
- [Complete Workflow](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/BUILD_APP_PROCESS.md) - 230-step process
|
|
351
|
+
- [Integration Guide](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/IMPLEMENTATION_SUMMARY.md) - VS Code integration
|
|
352
|
+
- [Quick Start](https://github.com/farajabien/mycontext-monorepo/blob/main/docs/QUICK_START_BUILD_APP.md) - User guide
|
|
515
353
|
|
|
516
|
-
|
|
517
|
-
mycontext init . --analyze
|
|
518
|
-
mycontext generate-context-files
|
|
519
|
-
mycontext generate-components all --complete-architecture
|
|
520
|
-
```
|
|
354
|
+
---
|
|
521
355
|
|
|
522
|
-
|
|
356
|
+
## 🐛 Troubleshooting
|
|
523
357
|
|
|
358
|
+
**"PRD Validation Failed"**
|
|
524
359
|
```bash
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
mycontext generate-context-files
|
|
528
|
-
mycontext compile-prd
|
|
529
|
-
mycontext generate-components all --complete-architecture --with-tests
|
|
530
|
-
```
|
|
531
|
-
|
|
532
|
-
## 📊 What Makes MyContext Different?
|
|
533
|
-
|
|
534
|
-
### Traditional Approach
|
|
535
|
-
```
|
|
536
|
-
Time: 8-12 hours
|
|
537
|
-
- Manual server action creation: 2-4 hours
|
|
538
|
-
- Manual route setup: 1-2 hours
|
|
539
|
-
- Manual documentation: 1-2 hours
|
|
540
|
-
- Manual testing setup: 2-3 hours
|
|
541
|
-
- Manual integration: 1-2 hours
|
|
360
|
+
# Provide feedback and regenerate
|
|
361
|
+
mycontext compile-prd --force
|
|
542
362
|
```
|
|
543
363
|
|
|
544
|
-
|
|
545
|
-
```
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
- Review and customize: 1-2 hours
|
|
549
|
-
- Ready for production ✅
|
|
550
|
-
|
|
551
|
-
Savings: 6-10 hours (60-75% reduction)
|
|
364
|
+
**"Component Build Failed"**
|
|
365
|
+
```bash
|
|
366
|
+
# Automatic retry with error context (max 3 attempts)
|
|
367
|
+
# Check .mycontext/progress/07-components/<component>.json
|
|
552
368
|
```
|
|
553
369
|
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
✅ **Production-Ready** - Server actions, routes, validation built-in
|
|
557
|
-
✅ **Self-Documenting** - Components explain themselves
|
|
558
|
-
✅ **Type-Safe** - Full TypeScript throughout
|
|
559
|
-
✅ **Best Practices** - Auth, caching, error handling
|
|
560
|
-
✅ **Scalable** - Proper architecture from start
|
|
561
|
-
|
|
562
|
-
## 🔧 Advanced Features
|
|
563
|
-
|
|
564
|
-
### Claude Agent SDK
|
|
565
|
-
|
|
370
|
+
**"Progress Not Tracking"**
|
|
566
371
|
```bash
|
|
567
|
-
#
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
# MCP integration
|
|
571
|
-
mycontext setup-mcp --provider instantdb
|
|
572
|
-
|
|
573
|
-
# Fine-grained permissions
|
|
574
|
-
mycontext setup
|
|
372
|
+
# Verify progress directory exists
|
|
373
|
+
ls -la .mycontext/progress/
|
|
575
374
|
```
|
|
576
375
|
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
```bash
|
|
580
|
-
# Set up InstantDB with MCP
|
|
581
|
-
mycontext setup-instantdb
|
|
376
|
+
---
|
|
582
377
|
|
|
583
|
-
|
|
584
|
-
```
|
|
378
|
+
## 🤝 Contributing
|
|
585
379
|
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
- [Full Documentation](https://docs.mycontext.fbien.com)
|
|
589
|
-
- [API Reference](https://docs.mycontext.fbien.com/api)
|
|
590
|
-
- [Examples](https://docs.mycontext.fbien.com/examples)
|
|
591
|
-
- [Complete Architecture Guide](https://docs.mycontext.fbien.com/complete-architecture)
|
|
592
|
-
|
|
593
|
-
## 🤝 Support
|
|
594
|
-
|
|
595
|
-
- [GitHub Issues](https://github.com/farajabien/mycontext/issues)
|
|
596
|
-
- [Discord Community](https://discord.gg/mycontext)
|
|
597
|
-
- [Documentation](https://docs.mycontext.fbien.com)
|
|
598
|
-
|
|
599
|
-
## 🎯 Roadmap
|
|
600
|
-
|
|
601
|
-
### Current (v2.0.0) 🆕
|
|
602
|
-
- ✅ **Complete Claude Agent SDK Integration**
|
|
603
|
-
- ✅ 8 Specialized AI agents (Code Review, Testing, Security, etc.)
|
|
604
|
-
- ✅ 4 Custom MCP tools (Component Analysis, PRD Validation, etc.)
|
|
605
|
-
- ✅ Intelligent routing (Agent SDK vs Direct API)
|
|
606
|
-
- ✅ Streaming progress with real-time feedback
|
|
607
|
-
- ✅ Hook system for lifecycle events
|
|
608
|
-
- ✅ Fine-grained tool permissions
|
|
609
|
-
- ✅ Setting sources for reproducible builds
|
|
610
|
-
- ✅ Complete architecture generation
|
|
611
|
-
- ✅ Server actions with validation
|
|
612
|
-
- ✅ Next.js App Router routes
|
|
613
|
-
- ✅ Self-documenting components
|
|
614
|
-
|
|
615
|
-
### Upcoming (v2.1.0)
|
|
616
|
-
- 🔄 Database schema generation (Prisma/Drizzle)
|
|
617
|
-
- 🔄 API documentation (OpenAPI/Swagger)
|
|
618
|
-
- 🔄 E2E test generation (Playwright/Cypress)
|
|
619
|
-
- 🔄 Deployment configuration (Docker, CI/CD)
|
|
620
|
-
- 🔄 More specialized agents (Database, API, DevOps)
|
|
621
|
-
|
|
622
|
-
### Future
|
|
623
|
-
- GraphQL resolver generation
|
|
624
|
-
- tRPC procedure generation
|
|
625
|
-
- WebSocket/real-time actions
|
|
626
|
-
- Monitoring & logging setup
|
|
627
|
-
- Multi-agent collaboration workflows
|
|
380
|
+
See [CONTRIBUTING.md](https://github.com/farajabien/mycontext-monorepo/blob/main/CONTRIBUTING.md)
|
|
628
381
|
|
|
629
382
|
## 📄 License
|
|
630
383
|
|
|
@@ -632,6 +385,4 @@ MIT © MyContext
|
|
|
632
385
|
|
|
633
386
|
---
|
|
634
387
|
|
|
635
|
-
**
|
|
636
|
-
|
|
637
|
-
[⭐ Star us on GitHub](https://github.com/farajabien/mycontext) | [📖 Read the Docs](https://docs.mycontext.fbien.com) | [🐦 Follow on Twitter](https://twitter.com/mycontext)
|
|
388
|
+
**Built by developers, for developers. Your code stays on your machine.** 🚀
|