mycontext-cli 2.0.27 → 2.0.28
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 +35 -369
- package/dist/agents/implementations/CodeGenSubAgent.d.ts.map +1 -1
- package/dist/agents/implementations/CodeGenSubAgent.js +67 -14
- package/dist/agents/implementations/CodeGenSubAgent.js.map +1 -1
- package/dist/agents/implementations/DesignPipelineAgent.d.ts +80 -0
- package/dist/agents/implementations/DesignPipelineAgent.d.ts.map +1 -0
- package/dist/agents/implementations/DesignPipelineAgent.js +1406 -0
- package/dist/agents/implementations/DesignPipelineAgent.js.map +1 -0
- package/dist/agents/implementations/FeatureAssemblyAgent.d.ts +67 -0
- package/dist/agents/implementations/FeatureAssemblyAgent.d.ts.map +1 -0
- package/dist/agents/implementations/FeatureAssemblyAgent.js +564 -0
- package/dist/agents/implementations/FeatureAssemblyAgent.js.map +1 -0
- package/dist/agents/implementations/PromptConstructorAgent.d.ts +10 -0
- package/dist/agents/implementations/PromptConstructorAgent.d.ts.map +1 -1
- package/dist/agents/implementations/PromptConstructorAgent.js +172 -12
- package/dist/agents/implementations/PromptConstructorAgent.js.map +1 -1
- package/dist/agents/implementations/RoleBasedGenerator.d.ts +52 -0
- package/dist/agents/implementations/RoleBasedGenerator.d.ts.map +1 -0
- package/dist/agents/implementations/RoleBasedGenerator.js +370 -0
- package/dist/agents/implementations/RoleBasedGenerator.js.map +1 -0
- package/dist/cli.js +65 -0
- package/dist/cli.js.map +1 -1
- package/dist/clients/ClaudeSDKClient.d.ts +48 -0
- package/dist/clients/ClaudeSDKClient.d.ts.map +1 -0
- package/dist/clients/ClaudeSDKClient.js +158 -0
- package/dist/clients/ClaudeSDKClient.js.map +1 -0
- package/dist/clients/MyContextAIClient.d.ts +73 -0
- package/dist/clients/MyContextAIClient.d.ts.map +1 -0
- package/dist/clients/MyContextAIClient.js +280 -0
- package/dist/clients/MyContextAIClient.js.map +1 -0
- package/dist/clients/ProviderChain.d.ts +87 -0
- package/dist/clients/ProviderChain.d.ts.map +1 -0
- package/dist/clients/ProviderChain.js +246 -0
- package/dist/clients/ProviderChain.js.map +1 -0
- package/dist/clients/XAIClient.d.ts +48 -0
- package/dist/clients/XAIClient.d.ts.map +1 -0
- package/dist/clients/XAIClient.js +152 -0
- package/dist/clients/XAIClient.js.map +1 -0
- package/dist/commands/assemble-features.d.ts +40 -0
- package/dist/commands/assemble-features.d.ts.map +1 -0
- package/dist/commands/assemble-features.js +383 -0
- package/dist/commands/assemble-features.js.map +1 -0
- package/dist/commands/clone-starter.d.ts +32 -0
- package/dist/commands/clone-starter.d.ts.map +1 -0
- package/dist/commands/clone-starter.js +218 -0
- package/dist/commands/clone-starter.js.map +1 -0
- package/dist/commands/design-analyze.d.ts +46 -0
- package/dist/commands/design-analyze.d.ts.map +1 -0
- package/dist/commands/design-analyze.js +232 -0
- package/dist/commands/design-analyze.js.map +1 -0
- package/dist/commands/generate-components.d.ts +1 -0
- package/dist/commands/generate-components.d.ts.map +1 -1
- package/dist/commands/generate-components.js +42 -9
- package/dist/commands/generate-components.js.map +1 -1
- package/dist/commands/generate.d.ts.map +1 -1
- package/dist/commands/generate.js +34 -1
- package/dist/commands/generate.js.map +1 -1
- package/dist/commands/setup-complete.d.ts.map +1 -1
- package/dist/commands/setup-complete.js +38 -2
- package/dist/commands/setup-complete.js.map +1 -1
- package/dist/commands/workflow.d.ts.map +1 -1
- package/dist/commands/workflow.js +86 -7
- package/dist/commands/workflow.js.map +1 -1
- package/dist/config/intent-dictionary.json +3700 -0
- package/dist/package.json +3 -1
- package/dist/services/IntentEnricher.d.ts +61 -0
- package/dist/services/IntentEnricher.d.ts.map +1 -0
- package/dist/services/IntentEnricher.js +318 -0
- package/dist/services/IntentEnricher.js.map +1 -0
- package/dist/services/IntentValidator.d.ts +114 -0
- package/dist/services/IntentValidator.d.ts.map +1 -0
- package/dist/services/IntentValidator.js +680 -0
- package/dist/services/IntentValidator.js.map +1 -0
- package/dist/types/design-pipeline.d.ts +300 -0
- package/dist/types/design-pipeline.d.ts.map +1 -0
- package/dist/types/design-pipeline.js +9 -0
- package/dist/types/design-pipeline.js.map +1 -0
- package/dist/types/feature-bundle.d.ts +239 -0
- package/dist/types/feature-bundle.d.ts.map +1 -0
- package/dist/types/feature-bundle.js +9 -0
- package/dist/types/feature-bundle.js.map +1 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/index.js +2 -0
- package/dist/types/index.js.map +1 -1
- package/dist/types/intent-dictionary.d.ts +525 -0
- package/dist/types/intent-dictionary.d.ts.map +1 -0
- package/dist/types/intent-dictionary.js +11 -0
- package/dist/types/intent-dictionary.js.map +1 -0
- package/dist/types/role-permissions.d.ts +167 -0
- package/dist/types/role-permissions.d.ts.map +1 -0
- package/dist/types/role-permissions.js +9 -0
- package/dist/types/role-permissions.js.map +1 -0
- package/dist/utils/contextEnricher.d.ts +41 -0
- package/dist/utils/contextEnricher.d.ts.map +1 -0
- package/dist/utils/contextEnricher.js +327 -0
- package/dist/utils/contextEnricher.js.map +1 -0
- package/dist/utils/designFallbacks.d.ts +48 -0
- package/dist/utils/designFallbacks.d.ts.map +1 -0
- package/dist/utils/designFallbacks.js +885 -0
- package/dist/utils/designFallbacks.js.map +1 -0
- package/dist/utils/designManifestManager.d.ts +89 -0
- package/dist/utils/designManifestManager.d.ts.map +1 -0
- package/dist/utils/designManifestManager.js +533 -0
- package/dist/utils/designManifestManager.js.map +1 -0
- package/dist/utils/designPipelineStateManager.d.ts +63 -0
- package/dist/utils/designPipelineStateManager.d.ts.map +1 -0
- package/dist/utils/designPipelineStateManager.js +174 -0
- package/dist/utils/designPipelineStateManager.js.map +1 -0
- package/dist/utils/envExampleGenerator.d.ts.map +1 -1
- package/dist/utils/envExampleGenerator.js +35 -171
- package/dist/utils/envExampleGenerator.js.map +1 -1
- package/dist/utils/featureBundleManager.d.ts +90 -0
- package/dist/utils/featureBundleManager.d.ts.map +1 -0
- package/dist/utils/featureBundleManager.js +340 -0
- package/dist/utils/featureBundleManager.js.map +1 -0
- package/dist/utils/githubCloner.d.ts +93 -0
- package/dist/utils/githubCloner.d.ts.map +1 -0
- package/dist/utils/githubCloner.js +305 -0
- package/dist/utils/githubCloner.js.map +1 -0
- package/dist/utils/rolePermissionMapper.d.ts +89 -0
- package/dist/utils/rolePermissionMapper.d.ts.map +1 -0
- package/dist/utils/rolePermissionMapper.js +337 -0
- package/dist/utils/rolePermissionMapper.js.map +1 -0
- package/dist/utils/unifiedDesignContextLoader.d.ts +76 -0
- package/dist/utils/unifiedDesignContextLoader.d.ts.map +1 -0
- package/dist/utils/unifiedDesignContextLoader.js +344 -0
- package/dist/utils/unifiedDesignContextLoader.js.map +1 -0
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -1,409 +1,75 @@
|
|
|
1
|
-
# MyContext CLI +
|
|
1
|
+
# MyContext CLI + MyContext AI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Open Source AI-Powered Component Generation**
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
<!-- Future: mycontext PM - Intelligent project planning, task decomposition, and real-time monitoring using Claude Agent SDK -->
|
|
12
|
-
|
|
13
|
-
**Result:** From client requirements to production deployment - fully automated with AI oversight.
|
|
9
|
+
Generate production-ready React components from natural language descriptions. Built with 11 specialized AI agents and our proprietary Intent Dictionary System for 95%+ accuracy.
|
|
14
10
|
|
|
15
11
|
## 🚀 Quick Start
|
|
16
12
|
|
|
17
|
-
### **Option 1: Complete Guided Setup (⭐ Recommended for New Projects)**
|
|
18
|
-
|
|
19
|
-
```bash
|
|
20
|
-
# Install globally
|
|
21
|
-
npm install -g mycontext-cli
|
|
22
|
-
|
|
23
|
-
# Single command complete setup with AI guidance
|
|
24
|
-
mycontext setup-complete --interactive
|
|
25
|
-
|
|
26
|
-
# That's it! Project is ready for development.
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
### **Option 2: Step-by-Step Development**
|
|
30
|
-
|
|
31
13
|
```bash
|
|
32
14
|
# Install globally
|
|
33
15
|
npm install -g mycontext-cli
|
|
34
16
|
|
|
35
|
-
#
|
|
17
|
+
# Initialize a new project
|
|
36
18
|
mycontext init my-app
|
|
19
|
+
cd my-app
|
|
37
20
|
|
|
38
|
-
#
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
# 3. Compile PRD (requires approval)
|
|
42
|
-
mycontext compile-prd
|
|
21
|
+
# Configure your AI provider
|
|
22
|
+
echo 'ANTHROPIC_API_KEY=your-key' > .mycontext/.env
|
|
43
23
|
|
|
44
|
-
#
|
|
45
|
-
mycontext generate
|
|
46
|
-
mycontext generate brand
|
|
47
|
-
mycontext generate components-list
|
|
48
|
-
mycontext generate project-structure
|
|
49
|
-
|
|
50
|
-
# 5. Generate components with validation
|
|
51
|
-
mycontext generate-components all --with-tests
|
|
52
|
-
|
|
53
|
-
# 6. Preview components visually
|
|
54
|
-
mycontext preview components
|
|
55
|
-
|
|
56
|
-
# 7. Build complete app when ready
|
|
57
|
-
mycontext build-app --interactive
|
|
24
|
+
# Generate your first component
|
|
25
|
+
mycontext generate:component "Create a login form with email and password"
|
|
58
26
|
```
|
|
59
27
|
|
|
60
|
-
|
|
28
|
+
## ✨ What You Get
|
|
61
29
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
# 2. AI generates contextual workflow and executes it
|
|
69
|
-
mycontext workflow generate --description "E-commerce platform with payments"
|
|
30
|
+
- **Production-Ready Components** - TypeScript + shadcn/ui + Tailwind CSS
|
|
31
|
+
- **Zero Hallucination** - Intent Dictionary maps natural language to exact components
|
|
32
|
+
- **Type Safety** - Complete TypeScript definitions with proper interfaces
|
|
33
|
+
- **Accessibility First** - Built-in ARIA compliance and semantic HTML
|
|
34
|
+
- **Design System** - Automatic shadcn/ui adherence with design tokens
|
|
70
35
|
|
|
71
|
-
|
|
72
|
-
mycontext workflow --interactive
|
|
36
|
+
## 💰 Pricing
|
|
73
37
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
## 💡 Philosophy: Component-First Development
|
|
38
|
+
- **MyContext CLI** - Free and open source (MIT License)
|
|
39
|
+
- **MyContext AI API** - Coming soon - Fine-tuned model for 95%+ accuracy
|
|
79
40
|
|
|
80
|
-
|
|
41
|
+
Use the CLI with your own AI provider keys (Claude, OpenAI, XAI) for free, or upgrade to our hosted API for best-in-class quality.
|
|
81
42
|
|
|
82
|
-
|
|
83
|
-
2. **Component List** → AI automatically generates list of needed components
|
|
84
|
-
3. **Build Strategy** → Choose how to approach development
|
|
85
|
-
4. **Component Generation** → Build components one by one with validation
|
|
86
|
-
5. **Visual Preview** → See components in browser before integration
|
|
87
|
-
6. **Scale to App** → Assemble validated components into full application
|
|
43
|
+
## 📚 Full Documentation
|
|
88
44
|
|
|
89
|
-
**
|
|
45
|
+
**Complete guides, tutorials, and API reference available on GitHub:**
|
|
90
46
|
|
|
91
|
-
|
|
47
|
+
👉 **[View Full Documentation](https://github.com/farajabien/mycontext-cli/tree/main/docs)**
|
|
92
48
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
│ • Description │ │ • Component │
|
|
99
|
-
│ • Tech Stack │ │ Creation │
|
|
100
|
-
└─────────────────┘ └─────────────────┘
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
<!-- Future PM Architecture:
|
|
104
|
-
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
|
105
|
-
│ Client Input │───▶│ mycontext PM │───▶│ MyContext CLI │
|
|
106
|
-
│ │ │ (Next.js App) │ │ │
|
|
107
|
-
│ • Requirements │ │ │ │ • Code Generation│
|
|
108
|
-
│ • Budget │ │ • Task Planning │ │ • Component │
|
|
109
|
-
│ • Timeline │ │ • Progress Mgmt │ │ Creation │
|
|
110
|
-
└─────────────────┘ │ • Real-time │ └─────────────────┘
|
|
111
|
-
│ Monitoring │
|
|
112
|
-
└─────────────────┘
|
|
113
|
-
│
|
|
114
|
-
▼
|
|
115
|
-
┌─────────────────┐
|
|
116
|
-
│ Progress Sync │
|
|
117
|
-
│ (Webhooks) │
|
|
118
|
-
└─────────────────┘
|
|
119
|
-
-->
|
|
120
|
-
|
|
121
|
-
### **Data Flow:**
|
|
122
|
-
|
|
123
|
-
1. **Client Requirements** → AI analyzes and generates project structure
|
|
124
|
-
2. **Code Generation** → MyContext builds production-ready components
|
|
125
|
-
3. **AI Oversight** → Intelligent suggestions and validation throughout development
|
|
126
|
-
|
|
127
|
-
<!-- Future PM Data Flow:
|
|
128
|
-
1. Client Requirements → mycontext PM analyzes and decomposes into structured JSON
|
|
129
|
-
2. mycontext PM Plan → MyContext CLI imports and generates project structure
|
|
130
|
-
3. Code Generation → MyContext builds production-ready components
|
|
131
|
-
4. Progress Updates → Real-time sync back to mycontext PM dashboard
|
|
132
|
-
5. AI Oversight → Continuous monitoring and intelligent suggestions
|
|
133
|
-
-->
|
|
49
|
+
- [Getting Started Guide](https://github.com/farajabien/mycontext-cli/blob/main/docs/01-getting-started/quick-start.md)
|
|
50
|
+
- [AI Agents System](https://github.com/farajabien/mycontext-cli/blob/main/docs/02-core-features/ai-agents.md)
|
|
51
|
+
- [Intent Dictionary](https://github.com/farajabien/mycontext-cli/blob/main/docs/02-core-features/intent-dictionary-system.md)
|
|
52
|
+
- [Command Reference](https://github.com/farajabien/mycontext-cli/blob/main/docs/03-reference/commands.md)
|
|
53
|
+
- [Architecture](https://github.com/farajabien/mycontext-cli/blob/main/docs/06-architecture/system-overview.md)
|
|
134
54
|
|
|
135
55
|
## 🎯 Key Features
|
|
136
56
|
|
|
137
|
-
|
|
138
|
-
-
|
|
139
|
-
-
|
|
140
|
-
-
|
|
141
|
-
-
|
|
142
|
-
- Progress Synchronization - Webhook integration for live dashboard updates
|
|
143
|
-
-->
|
|
144
|
-
|
|
145
|
-
### ✅ **MyContext CLI (Component-First Development)**
|
|
146
|
-
|
|
147
|
-
- **Streamlined Workflow** - Single `setup-complete` command for full project setup
|
|
148
|
-
- **Smart Next Steps** - Context-aware suggestions guide you through the development process
|
|
149
|
-
- **Zero-Error Guarantee** - TypeScript/ESLint/build validation on every component
|
|
150
|
-
- **UI Specification System** - Plain-English specs with accessibility & responsive guidance
|
|
151
|
-
- **Visual Preview** - Figma-like component board for testing
|
|
152
|
-
- **BYOK Model** - Use your own Claude/X.AI/OpenAI API keys (~$20/month)
|
|
153
|
-
|
|
154
|
-
### 🤖 **AI Workflow Analysis**
|
|
155
|
-
|
|
156
|
-
- **Intelligent Project Analysis** - AI understands your requirements and suggests optimal workflows
|
|
157
|
-
- **Contextual Workflow Generation** - Custom workflows tailored to your specific project needs
|
|
158
|
-
- **Component Recommendations** - AI suggests appropriate components and features
|
|
159
|
-
- **Architecture Guidance** - Recommends best tech stack and project structure
|
|
160
|
-
|
|
161
|
-
## 📋 Commands
|
|
162
|
-
|
|
163
|
-
### Complete Project Setup (⭐ NEW)
|
|
164
|
-
|
|
165
|
-
```bash
|
|
166
|
-
mycontext setup-complete --interactive # Complete guided project setup
|
|
167
|
-
mycontext setup-complete --name "MyApp" # Direct setup with options
|
|
168
|
-
```
|
|
169
|
-
|
|
170
|
-
### AI Workflow Analysis (NEW)
|
|
171
|
-
|
|
172
|
-
```bash
|
|
173
|
-
mycontext workflow analyze # Analyze project with AI
|
|
174
|
-
mycontext workflow generate # Generate and execute workflow
|
|
175
|
-
mycontext workflow --interactive # Interactive workflow planning
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
### Streamlined Workflow (Recommended)
|
|
179
|
-
|
|
180
|
-
```bash
|
|
181
|
-
mycontext init <project-name> # Initialize project
|
|
182
|
-
mycontext generate-context-files # Generate PRD, features, specs
|
|
183
|
-
mycontext generate architecture # Generate complete architecture
|
|
184
|
-
mycontext build-app # Build complete application
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
### Traditional Component-First Workflow
|
|
188
|
-
|
|
189
|
-
```bash
|
|
190
|
-
mycontext init <project-name> # Initialize project
|
|
191
|
-
mycontext generate-context-files # Generate PRD, features, specs
|
|
192
|
-
mycontext compile-prd # Compile context into PRD
|
|
193
|
-
mycontext generate types # Generate TypeScript types
|
|
194
|
-
mycontext generate brand # Generate brand guidelines
|
|
195
|
-
mycontext generate components-list # Generate component list
|
|
196
|
-
mycontext generate project-structure # Generate project structure
|
|
197
|
-
mycontext generate-components <name|all> # Generate components
|
|
198
|
-
mycontext preview <type> # Preview components/app
|
|
199
|
-
mycontext build-app # Build complete application
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
### UI Specification
|
|
203
|
-
|
|
204
|
-
```bash
|
|
205
|
-
mycontext refine spec <component> --desc "description" # Generate UI spec from description
|
|
206
|
-
mycontext refine spec <component> --json-file <path> # Generate UI spec from JSON
|
|
207
|
-
mycontext generate-components all --verbose # Auto-generate specs with components
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
### Setup & Configuration
|
|
211
|
-
|
|
212
|
-
```bash
|
|
213
|
-
mycontext setup # Configure AI providers
|
|
214
|
-
mycontext build-strategy # Choose build approach
|
|
215
|
-
mycontext health-check # Verify installation
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
## ⚙️ Configuration
|
|
219
|
-
|
|
220
|
-
### API Keys (Required)
|
|
221
|
-
|
|
222
|
-
```bash
|
|
223
|
-
# Create .mycontext/.env file
|
|
224
|
-
echo 'MYCONTEXT_CLAUDE_API_KEY=sk-ant-xxx' > .mycontext/.env
|
|
225
|
-
echo 'MYCONTEXT_XAI_API_KEY=xai-xxx' >> .mycontext/.env
|
|
226
|
-
```
|
|
227
|
-
|
|
228
|
-
**Recommended providers:**
|
|
229
|
-
|
|
230
|
-
- **Claude** (best for complex reasoning)
|
|
231
|
-
- **X.AI Grok** (best for code generation)
|
|
232
|
-
- **OpenAI** (most versatile)
|
|
233
|
-
- **Qwen3** (free via OpenRouter)
|
|
234
|
-
|
|
235
|
-
## 📊 Project Structure
|
|
236
|
-
|
|
237
|
-
```
|
|
238
|
-
my-app/
|
|
239
|
-
├── .mycontext/
|
|
240
|
-
│ ├── 01-prd.md # Product Requirements
|
|
241
|
-
│ ├── 02-a-features.md # Features specification
|
|
242
|
-
│ ├── 02-b-user-flows.md # User flows
|
|
243
|
-
│ ├── 02-c-edge-cases.md # Edge cases
|
|
244
|
-
│ ├── 02-d-technical-specs.md # Technical specifications
|
|
245
|
-
│ ├── 03-types.ts # TypeScript types
|
|
246
|
-
│ ├── 04-branding.md # Branding & design system
|
|
247
|
-
│ ├── 05-component-list.json # Generated component list
|
|
248
|
-
│ └── .env # API keys
|
|
249
|
-
├── components/ # Generated components
|
|
250
|
-
│ └── dashboard/
|
|
251
|
-
│ ├── RevenueCard.tsx # Component file
|
|
252
|
-
│ ├── RevenueCard.spec.md # UI specification
|
|
253
|
-
│ └── index.ts # Export file
|
|
254
|
-
├── actions/ # Server actions (if full-stack)
|
|
255
|
-
├── app/ # Next.js routes (if full-stack)
|
|
256
|
-
└── package.json
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
## 📋 UI Specification Example
|
|
260
|
-
|
|
261
|
-
Generate detailed, plain-English specifications from simple descriptions:
|
|
262
|
-
|
|
263
|
-
```bash
|
|
264
|
-
mycontext refine spec RevenueCard --desc "A card showing total revenue prominently with percentage change"
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
**Output:**
|
|
268
|
-
|
|
269
|
-
```
|
|
270
|
-
📋 UI Specification for RevenueCard
|
|
271
|
-
|
|
272
|
-
📝 Compact Specification:
|
|
273
|
-
**RevenueCard Component - Compact Spec**
|
|
274
|
-
|
|
275
|
-
**Visual Hierarchy:**
|
|
276
|
-
- Primary: Total Revenue, $125,430
|
|
277
|
-
- Secondary: +12.5% from last month
|
|
278
|
-
|
|
279
|
-
**Layout:** vertical arrangement
|
|
280
|
-
**Spacing:** medium spacing between elements
|
|
281
|
-
**Colors:** primary, success theme
|
|
282
|
-
|
|
283
|
-
📋 Detailed Specification:
|
|
284
|
-
**RevenueCard Component - Detailed Implementation Spec**
|
|
285
|
-
|
|
286
|
-
**Component Overview:**
|
|
287
|
-
- Name: RevenueCard
|
|
288
|
-
- Type: card
|
|
289
|
-
- Description: A card component displaying revenue metrics...
|
|
290
|
-
|
|
291
|
-
**Visual Hierarchy:**
|
|
292
|
-
1. **title**: Total Revenue
|
|
293
|
-
- Prominence: medium (medium (~16px))
|
|
294
|
-
2. **value**: $125,430
|
|
295
|
-
- Prominence: high (large (~32px))
|
|
296
|
-
3. **subtitle**: +12.5% from last month
|
|
297
|
-
- Prominence: low (small (~12px))
|
|
298
|
-
|
|
299
|
-
**Accessibility Requirements:**
|
|
300
|
-
- All interactive elements must have aria-label or aria-labelledby
|
|
301
|
-
- Focus management: tab order follows visual hierarchy
|
|
302
|
-
- Color contrast: minimum 4.5:1 ratio for text
|
|
303
|
-
|
|
304
|
-
**Responsive Adjustments:**
|
|
305
|
-
- Mobile (< 768px): Reduce spacing to 12px, stack vertically
|
|
306
|
-
- Desktop (> 768px): Standard spacing, maintain layout
|
|
307
|
-
```
|
|
308
|
-
|
|
309
|
-
## 🆚 MyContext CLI vs Others
|
|
310
|
-
|
|
311
|
-
| Feature | MyContext CLI | Lovable | v0.dev | Bolt |
|
|
312
|
-
| ------------------------- | ---------------------- | ---------- | ----------- | ----------- |
|
|
313
|
-
| **AI Project Management** | 🚧 Coming Soon | ❌ None | ❌ None | ❌ None |
|
|
314
|
-
| **Code Location** | Your machine | Cloud | Cloud | Cloud |
|
|
315
|
-
| **End-to-End Automation** | ✅ Requirements→Deploy | ❌ Manual | ❌ Manual | ❌ Manual |
|
|
316
|
-
| **Progress Monitoring** | ✅ Context-Aware | ❌ None | ❌ None | ❌ None |
|
|
317
|
-
| **Validation Gates** | 12+ checkpoints | None | None | None |
|
|
318
|
-
| **TypeScript Guarantee** | 100% | No | No | No |
|
|
319
|
-
| **PM Integration** | 🚧 Coming Soon | ❌ None | ❌ None | ❌ None |
|
|
320
|
-
| **Pricing** | BYOK ($0-20/mo) | $20-200/mo | Usage-based | Usage-based |
|
|
321
|
-
|
|
322
|
-
## 🐛 Troubleshooting
|
|
323
|
-
|
|
324
|
-
**"PRD Validation Failed"**
|
|
325
|
-
|
|
326
|
-
```bash
|
|
327
|
-
mycontext compile-prd --force
|
|
328
|
-
```
|
|
329
|
-
|
|
330
|
-
**"Component Build Failed"**
|
|
331
|
-
|
|
332
|
-
```bash
|
|
333
|
-
# Automatic retry with error context (max 3 attempts)
|
|
334
|
-
# Check .mycontext/progress/07-components/<component>.json
|
|
335
|
-
```
|
|
336
|
-
|
|
337
|
-
**"API Key Issues"**
|
|
338
|
-
|
|
339
|
-
```bash
|
|
340
|
-
mycontext setup # Reconfigure API keys
|
|
341
|
-
mycontext health-check # Verify setup
|
|
342
|
-
```
|
|
343
|
-
|
|
344
|
-
**"UI Spec Generation Failed"**
|
|
345
|
-
|
|
346
|
-
```bash
|
|
347
|
-
# Check if templates exist
|
|
348
|
-
ls src/templates/ui-spec-templates.json
|
|
349
|
-
|
|
350
|
-
# Generate spec with verbose output
|
|
351
|
-
mycontext refine spec ComponentName --desc "description" --verbose
|
|
352
|
-
|
|
353
|
-
# Use JSON input instead of description
|
|
354
|
-
mycontext refine spec ComponentName --json-file component.json
|
|
355
|
-
```
|
|
356
|
-
|
|
357
|
-
**"PM Plan Import Failed"**
|
|
358
|
-
|
|
359
|
-
```bash
|
|
360
|
-
# Validate PM plan structure first
|
|
361
|
-
mycontext import-project-plan ./pm-plan.json --validate
|
|
362
|
-
|
|
363
|
-
# Check for required fields in PM plan
|
|
364
|
-
# Required: project.name, project.description, breakdown.tasks, myContext.framework
|
|
365
|
-
```
|
|
366
|
-
|
|
367
|
-
**"Progress Export Issues"**
|
|
368
|
-
|
|
369
|
-
```bash
|
|
370
|
-
# Check if project has been initialized
|
|
371
|
-
mycontext export-progress --format summary
|
|
372
|
-
|
|
373
|
-
# Ensure .mycontext directory exists with todos.json
|
|
374
|
-
ls -la .mycontext/
|
|
375
|
-
```
|
|
376
|
-
|
|
377
|
-
<!-- Future: mycontext PM Synchronization (Coming Soon)
|
|
378
|
-
# Test webhook connectivity
|
|
379
|
-
curl -X POST https://mycontext-pm.example.com/webhook \
|
|
380
|
-
-H "Content-Type: application/json" \
|
|
381
|
-
-d '{"test": "connection"}'
|
|
382
|
-
|
|
383
|
-
# Check webhook URL format
|
|
384
|
-
mycontext export-progress --webhook https://mycontext-pm.example.com/webhook
|
|
385
|
-
-->
|
|
386
|
-
|
|
387
|
-
## 📚 Documentation
|
|
388
|
-
|
|
389
|
-
- [Getting Started](https://github.com/farajabien/mycontext-cli#quick-start)
|
|
390
|
-
- [AI Workflow Analysis](https://github.com/farajabien/mycontext-cli#ai-workflow-analysis-new)
|
|
391
|
-
- [Component Generation](https://github.com/farajabien/mycontext-cli#traditional-component-first-workflow)
|
|
392
|
-
- [System Architecture](https://github.com/farajabien/mycontext-cli#system-architecture)
|
|
393
|
-
- [Build Strategies](https://github.com/farajabien/mycontext-cli#philosophy-component-first-development)
|
|
57
|
+
- **11 Specialized AI Agents** - Expert AI for design, validation, and generation
|
|
58
|
+
- **Intent Dictionary** - 30+ UI patterns with type-safe natural language mapping
|
|
59
|
+
- **Design Pipeline** - 8-phase design analysis for rich, contextual components
|
|
60
|
+
- **Feature Assembly** - Combine components into working features with auth & permissions
|
|
61
|
+
- **Zero-Error Guarantee** - 12+ validation checkpoints ensure production quality
|
|
394
62
|
|
|
395
63
|
## 🤝 Contributing
|
|
396
64
|
|
|
397
|
-
Contributions
|
|
65
|
+
Contributions welcome! See our [Contributing Guide](https://github.com/farajabien/mycontext-cli/blob/main/CONTRIBUTING.md).
|
|
398
66
|
|
|
399
67
|
## 📄 License
|
|
400
68
|
|
|
401
|
-
MIT © MyContext
|
|
69
|
+
MIT © MyContext - See [LICENSE](https://github.com/farajabien/mycontext-cli/blob/main/LICENSE) for details.
|
|
402
70
|
|
|
403
71
|
---
|
|
404
72
|
|
|
405
|
-
**🤖 The future of AI-powered development: From requirements to production with intelligent automation.**
|
|
406
|
-
|
|
407
73
|
**Built by developers, for developers. Your code stays on your machine.** 🚀
|
|
408
74
|
|
|
409
|
-
|
|
75
|
+
[Full Documentation](https://github.com/farajabien/mycontext-cli/tree/main/docs) • [GitHub](https://github.com/farajabien/mycontext-cli) • [Issues](https://github.com/farajabien/mycontext-cli/issues)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeGenSubAgent.d.ts","sourceRoot":"","sources":["../../../src/agents/implementations/CodeGenSubAgent.ts"],"names":[],"mappings":"AAeA,OAAO,EACL,QAAQ,EACR,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AA6FhC,qBAAa,eACX,YAAW,QAAQ,CAAC,wBAAwB,EAAE,yBAAyB,CAAC;IAExE,IAAI,SAAqB;IACzB,WAAW,
|
|
1
|
+
{"version":3,"file":"CodeGenSubAgent.d.ts","sourceRoot":"","sources":["../../../src/agents/implementations/CodeGenSubAgent.ts"],"names":[],"mappings":"AAeA,OAAO,EACL,QAAQ,EACR,wBAAwB,EACxB,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AA6FhC,qBAAa,eACX,YAAW,QAAQ,CAAC,wBAAwB,EAAE,yBAAyB,CAAC;IAExE,IAAI,SAAqB;IACzB,WAAW,SAC+F;IAC1G,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;;IAkBf,GAAG,CACP,KAAK,EAAE,wBAAwB,GAC9B,OAAO,CAAC,yBAAyB,CAAC;IAuC/B,QAAQ,CAAC,KAAK,EAAE,wBAAwB,GAAG,OAAO,CAAC,OAAO,CAAC;IAc3D,SAAS,IAAI,OAAO,CAAC;QACzB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;QACnD,OAAO,CAAC,EAAE,IAAI,CAAC;QACf,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;YASY,gCAAgC;IAqN9C;;OAEG;YACW,sBAAsB;IA2IpC;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA8I5B;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAuHlC;;OAEG;IACH,OAAO,CAAC,6BAA6B;IAyGrC,OAAO,CAAC,4BAA4B;IA4BpC,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,sBAAsB;IA0B9B,OAAO,CAAC,uBAAuB;IAoI/B,OAAO,CAAC,uBAAuB;IAqB/B,OAAO,CAAC,uBAAuB;IA2E/B,OAAO,CAAC,4BAA4B;IAmIpC,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,kCAAkC;IA4E1C,OAAO,CAAC,gCAAgC;IAwIxC,OAAO,CAAC,8BAA8B;IAyetC,OAAO,CAAC,iCAAiC;IA4QzC,OAAO,CAAC,mBAAmB;IA6B3B,OAAO,CAAC,uBAAuB;IAe/B,OAAO,CAAC,qBAAqB;IAoC7B,OAAO,CAAC,qBAAqB;YASf,oBAAoB;CAiCnC"}
|
|
@@ -38,10 +38,10 @@ exports.CodeGenSubAgent = void 0;
|
|
|
38
38
|
* CodeGenSubAgent Implementation
|
|
39
39
|
*
|
|
40
40
|
* Specialized sub-agent for generating production-ready React components and TypeScript code.
|
|
41
|
-
* Uses
|
|
41
|
+
* Uses MyContext AI (fine-tuned GPT-4o Mini) for 95%+ accurate component generation.
|
|
42
42
|
* Enhanced with shadcn/ui primitives and modern React patterns for Next.js 14+.
|
|
43
43
|
*/
|
|
44
|
-
const
|
|
44
|
+
const ProviderChain_1 = require("../../clients/ProviderChain");
|
|
45
45
|
const PromptConstructorAgent_1 = require("./PromptConstructorAgent");
|
|
46
46
|
const fs = __importStar(require("fs"));
|
|
47
47
|
const path = __importStar(require("path"));
|
|
@@ -137,7 +137,7 @@ const CANONICAL_SHADCN_LIST = [
|
|
|
137
137
|
class CodeGenSubAgent {
|
|
138
138
|
constructor() {
|
|
139
139
|
this.name = "CodeGenSubAgent";
|
|
140
|
-
this.description = "Expert React/TypeScript developer
|
|
140
|
+
this.description = "Expert React/TypeScript developer using MyContext AI for 95%+ accurate shadcn/ui component generation";
|
|
141
141
|
const personality = (0, subAgentPersonalities_1.getSubAgentPersonality)(this.name);
|
|
142
142
|
if (!personality) {
|
|
143
143
|
throw new Error(`Personality not found for ${this.name}`);
|
|
@@ -203,9 +203,9 @@ class CodeGenSubAgent {
|
|
|
203
203
|
};
|
|
204
204
|
}
|
|
205
205
|
async generateProductionReadyComponent(component, group, options) {
|
|
206
|
-
//
|
|
206
|
+
// Use MyContext AI (fine-tuned GPT-4o Mini) with fallbacks to Claude SDK and XAI
|
|
207
207
|
try {
|
|
208
|
-
const ai =
|
|
208
|
+
const ai = (0, ProviderChain_1.getProviderChain)();
|
|
209
209
|
const compObj = typeof component === "string"
|
|
210
210
|
? {
|
|
211
211
|
name: this.generateComponentName(component),
|
|
@@ -300,7 +300,14 @@ class CodeGenSubAgent {
|
|
|
300
300
|
console.log("❌ PromptConstructorAgent failed, trying LLM-based prompt construction...");
|
|
301
301
|
try {
|
|
302
302
|
// Option 2: Use LLM for prompt construction
|
|
303
|
-
constructedPrompt = await this.constructPromptWithLLM(compObj, group, {
|
|
303
|
+
constructedPrompt = await this.constructPromptWithLLM(compObj, group, {
|
|
304
|
+
prd,
|
|
305
|
+
types,
|
|
306
|
+
enhancedContext,
|
|
307
|
+
designSystem: options?.context?.designSystem,
|
|
308
|
+
designIntent: options?.context?.designIntent,
|
|
309
|
+
visualTokens: options?.context?.visualTokens,
|
|
310
|
+
});
|
|
304
311
|
console.log(`✅ Intelligent prompt constructed via LLM: ${constructedPrompt.contextSummary}`);
|
|
305
312
|
}
|
|
306
313
|
catch (llmPromptError) {
|
|
@@ -316,7 +323,16 @@ class CodeGenSubAgent {
|
|
|
316
323
|
}
|
|
317
324
|
const prompt = `${constructedPrompt.systemPrompt}\n\n${constructedPrompt.userPrompt}`;
|
|
318
325
|
console.log("🔍 DEBUG: About to call AI for component generation");
|
|
319
|
-
const
|
|
326
|
+
const code = await ai.generateComponent(prompt, {
|
|
327
|
+
prd,
|
|
328
|
+
types,
|
|
329
|
+
brand: options?.context?.branding,
|
|
330
|
+
componentList: options?.context?.componentList,
|
|
331
|
+
projectStructure: options?.context?.projectStructure,
|
|
332
|
+
previousOutputs: options?.context?.previousOutputs,
|
|
333
|
+
userPrompt: prompt,
|
|
334
|
+
workingDirectory: options?.context?.workingDirectory,
|
|
335
|
+
}, {
|
|
320
336
|
temperature: this.temperature,
|
|
321
337
|
maxTokens: Math.max(this.maxTokens, 8000), // Ensure minimum 8000 tokens
|
|
322
338
|
});
|
|
@@ -343,7 +359,7 @@ class CodeGenSubAgent {
|
|
|
343
359
|
* Uses LLM to construct intelligent prompts for component generation
|
|
344
360
|
*/
|
|
345
361
|
async constructPromptWithLLM(component, group, context) {
|
|
346
|
-
const ai =
|
|
362
|
+
const ai = (0, ProviderChain_1.getProviderChain)();
|
|
347
363
|
const promptConstructionRequest = `
|
|
348
364
|
You are a specialist in creating optimal prompts for React/TypeScript component generation.
|
|
349
365
|
|
|
@@ -405,18 +421,18 @@ Focus on:
|
|
|
405
421
|
- Modern React patterns (hooks, etc.)
|
|
406
422
|
- Server Component architecture for page.tsx files
|
|
407
423
|
`;
|
|
408
|
-
const response = await ai.generateComponent(promptConstructionRequest, {
|
|
424
|
+
const response = await ai.generateComponent(promptConstructionRequest, {}, {
|
|
409
425
|
temperature: 0.3, // Lower temperature for more consistent prompt construction
|
|
410
426
|
maxTokens: 2000,
|
|
411
427
|
});
|
|
412
428
|
try {
|
|
413
|
-
console.log("🔍 DEBUG: CodeGen prompt construction response length:", response.
|
|
414
|
-
console.log("🔍 DEBUG: CodeGen prompt construction response preview:", response.
|
|
429
|
+
console.log("🔍 DEBUG: CodeGen prompt construction response length:", response.length);
|
|
430
|
+
console.log("🔍 DEBUG: CodeGen prompt construction response preview:", response.substring(0, 200));
|
|
415
431
|
// Extract JSON from the response
|
|
416
|
-
const jsonMatch = response.
|
|
432
|
+
const jsonMatch = response.match(/\{[\s\S]*\}/);
|
|
417
433
|
if (!jsonMatch) {
|
|
418
434
|
console.warn("❌ DEBUG: No JSON found in LLM response, using fallback prompt construction");
|
|
419
|
-
console.log("❌ DEBUG: Full response:", response
|
|
435
|
+
console.log("❌ DEBUG: Full response:", response);
|
|
420
436
|
return this.createFallbackPrompt(component, group, context);
|
|
421
437
|
}
|
|
422
438
|
console.log("✅ DEBUG: Found JSON match:", jsonMatch[0].substring(0, 100) + "...");
|
|
@@ -444,6 +460,43 @@ Focus on:
|
|
|
444
460
|
createFallbackPrompt(component, group, context) {
|
|
445
461
|
const componentName = component.name || "Component";
|
|
446
462
|
const componentDescription = component.description || "A React component";
|
|
463
|
+
// Add design system context if available
|
|
464
|
+
let designSystemContext = "";
|
|
465
|
+
if (context.designSystem || context.designIntent || context.visualTokens) {
|
|
466
|
+
designSystemContext = "\n\n🎨 **DESIGN SYSTEM CONTEXT**:\n";
|
|
467
|
+
if (context.designSystem) {
|
|
468
|
+
designSystemContext += `\n**Visual Tokens:**
|
|
469
|
+
- Primary Color: ${context.designSystem.colors?.primary || "Not specified"}
|
|
470
|
+
- Secondary Color: ${context.designSystem.colors?.secondary || "Not specified"}
|
|
471
|
+
- Typography: ${context.designSystem.typography?.heading || "Not specified"} (headings), ${context.designSystem.typography?.body || "Not specified"} (body)
|
|
472
|
+
- Spacing Scale: ${context.designSystem.spacing?.base || "Not specified"}px base unit
|
|
473
|
+
- Border Radius: ${context.designSystem.borderRadius?.base || "Not specified"}px
|
|
474
|
+
- Shadows: ${context.designSystem.shadows?.base || "Not specified"}`;
|
|
475
|
+
}
|
|
476
|
+
if (context.designIntent) {
|
|
477
|
+
designSystemContext += `\n\n**Design Principles:**
|
|
478
|
+
- Design Anchors: ${context.designIntent.design_anchors?.join(", ") || "Not specified"}
|
|
479
|
+
- Key Principles: ${context.designIntent.key_principles?.join(", ") || "Not specified"}
|
|
480
|
+
- User Experience Focus: ${context.designIntent.user_experience_focus || "Not specified"}`;
|
|
481
|
+
}
|
|
482
|
+
if (context.visualTokens) {
|
|
483
|
+
designSystemContext += `\n\n**Component Tokens:**
|
|
484
|
+
- Button Styles: ${JSON.stringify(context.visualTokens.buttons || {})}
|
|
485
|
+
- Input Styles: ${JSON.stringify(context.visualTokens.inputs || {})}
|
|
486
|
+
- Card Styles: ${JSON.stringify(context.visualTokens.cards || {})}`;
|
|
487
|
+
}
|
|
488
|
+
designSystemContext += "\n\n**Design Implementation Requirements:**\n";
|
|
489
|
+
designSystemContext +=
|
|
490
|
+
"- Use the specified color palette for all UI elements\n";
|
|
491
|
+
designSystemContext +=
|
|
492
|
+
"- Apply consistent typography scale throughout the component\n";
|
|
493
|
+
designSystemContext +=
|
|
494
|
+
"- Follow the established spacing and border radius patterns\n";
|
|
495
|
+
designSystemContext +=
|
|
496
|
+
"- Implement component tokens for buttons, inputs, and cards\n";
|
|
497
|
+
designSystemContext +=
|
|
498
|
+
"- Ensure visual consistency with the overall design system";
|
|
499
|
+
}
|
|
447
500
|
const systemPrompt = `You are an expert React/TypeScript developer specializing in production-ready Next.js 14+ components with shadcn/ui.
|
|
448
501
|
|
|
449
502
|
📱 **MOBILE-FIRST DESIGN REQUIREMENTS**:
|
|
@@ -479,7 +532,7 @@ CRITICAL REQUIREMENTS:
|
|
|
479
532
|
- Server Components for page.tsx files (no "use client")
|
|
480
533
|
- Client Components for interactive functionality
|
|
481
534
|
|
|
482
|
-
Generate production-ready, maintainable code that follows industry best practices
|
|
535
|
+
Generate production-ready, maintainable code that follows industry best practices.${designSystemContext}`;
|
|
483
536
|
const userPrompt = `Create a React component: ${componentName}
|
|
484
537
|
|
|
485
538
|
Description: ${componentDescription}
|