mycontext-cli 2.0.27 → 2.0.29
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 +71 -342
- 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 +111 -56
- 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 +11 -0
- package/dist/commands/generate-components.d.ts.map +1 -1
- package/dist/commands/generate-components.js +342 -12
- package/dist/commands/generate-components.js.map +1 -1
- package/dist/commands/generate-context-files.d.ts +9 -0
- package/dist/commands/generate-context-files.d.ts.map +1 -1
- package/dist/commands/generate-context-files.js +57 -0
- package/dist/commands/generate-context-files.js.map +1 -1
- package/dist/commands/generate.d.ts +5 -0
- package/dist/commands/generate.d.ts.map +1 -1
- package/dist/commands/generate.js +109 -2
- package/dist/commands/generate.js.map +1 -1
- package/dist/commands/init.d.ts +1 -0
- package/dist/commands/init.d.ts.map +1 -1
- package/dist/commands/init.js +32 -10
- package/dist/commands/init.js.map +1 -1
- package/dist/commands/preview-components.d.ts +12 -0
- package/dist/commands/preview-components.d.ts.map +1 -0
- package/dist/commands/preview-components.js +122 -0
- package/dist/commands/preview-components.js.map +1 -0
- package/dist/commands/refine-component.d.ts +43 -0
- package/dist/commands/refine-component.d.ts.map +1 -0
- package/dist/commands/refine-component.js +313 -0
- package/dist/commands/refine-component.js.map +1 -0
- package/dist/commands/review-context.d.ts +47 -0
- package/dist/commands/review-context.d.ts.map +1 -0
- package/dist/commands/review-context.js +335 -0
- package/dist/commands/review-context.js.map +1 -0
- 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 +12 -1
- package/dist/services/ContextValidator.d.ts +99 -0
- package/dist/services/ContextValidator.d.ts.map +1 -0
- package/dist/services/ContextValidator.js +433 -0
- package/dist/services/ContextValidator.js.map +1 -0
- 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/services/MutationLogger.d.ts +54 -0
- package/dist/services/MutationLogger.d.ts.map +1 -0
- package/dist/services/MutationLogger.js +164 -0
- package/dist/services/MutationLogger.js.map +1 -0
- package/dist/services/RegressionRunner.d.ts +49 -0
- package/dist/services/RegressionRunner.d.ts.map +1 -0
- package/dist/services/RegressionRunner.js +285 -0
- package/dist/services/RegressionRunner.js.map +1 -0
- package/dist/services/TriggerLogger.d.ts +101 -0
- package/dist/services/TriggerLogger.d.ts.map +1 -0
- package/dist/services/TriggerLogger.js +263 -0
- package/dist/services/TriggerLogger.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 +41 -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/hybridAIClient.d.ts.map +1 -1
- package/dist/utils/hybridAIClient.js +21 -0
- package/dist/utils/hybridAIClient.js.map +1 -1
- package/dist/utils/openRouterClient.d.ts +10 -0
- package/dist/utils/openRouterClient.d.ts.map +1 -0
- package/dist/utils/openRouterClient.js +61 -0
- package/dist/utils/openRouterClient.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 +12 -1
package/README.md
CHANGED
|
@@ -1,409 +1,138 @@
|
|
|
1
|
-
# MyContext CLI +
|
|
1
|
+
# MyContext CLI + MyContext AI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**AI-Powered Context & Component Library Generation for Your Next.js App**
|
|
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 your context files and component library. That's it. Use it inside Cursor or any IDE. Built on top of shadcn/ui with our 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
|
|
43
|
-
|
|
44
|
-
# 4. Generate individual components
|
|
45
|
-
mycontext generate types
|
|
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
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
### **Option 3: AI-Powered Workflow Analysis**
|
|
61
|
-
|
|
62
|
-
```bash
|
|
63
|
-
# Install globally
|
|
64
|
-
npm install -g mycontext-cli
|
|
65
|
-
|
|
66
|
-
# 1. AI analyzes your project requirements
|
|
67
|
-
|
|
68
|
-
# 2. AI generates contextual workflow and executes it
|
|
69
|
-
mycontext workflow generate --description "E-commerce platform with payments"
|
|
70
|
-
|
|
71
|
-
# 3. Or use interactive workflow planning
|
|
72
|
-
mycontext workflow --interactive
|
|
73
|
-
|
|
74
|
-
# 4. AI creates complete project structure with components
|
|
75
|
-
# 5. Continue development with AI-generated architecture
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
## 💡 Philosophy: Component-First Development
|
|
79
|
-
|
|
80
|
-
**Start Small, Scale Gradually:**
|
|
81
|
-
|
|
82
|
-
1. **Context Files** → Define your app (PRD, features, technical specs)
|
|
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
|
|
88
|
-
|
|
89
|
-
**Result:** Production-ready apps with 0 errors, built incrementally.
|
|
90
|
-
|
|
91
|
-
## 🏗️ System Architecture
|
|
92
|
-
|
|
93
|
-
```
|
|
94
|
-
┌─────────────────┐ ┌─────────────────┐
|
|
95
|
-
│ Client Input │───▶│ MyContext CLI │
|
|
96
|
-
│ │ │ │
|
|
97
|
-
│ • Requirements │ │ • Code Generation│
|
|
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
|
-
-->
|
|
134
|
-
|
|
135
|
-
## 🎯 Key Features
|
|
136
|
-
|
|
137
|
-
<!-- Future: mycontext PM (Coming Soon)
|
|
138
|
-
- Intelligent Project Planning - AI decomposes requirements into epics, user stories, and tasks
|
|
139
|
-
- Real-time Progress Monitoring - Hourly checks, blocker detection, timeline adjustments
|
|
140
|
-
- Client Brief Processing - Parse contracts, budgets, and timelines into structured plans
|
|
141
|
-
- Task Assignment & Tracking - Automated task management with priority and dependency handling
|
|
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**
|
|
21
|
+
# Configure your AI provider
|
|
22
|
+
echo 'ANTHROPIC_API_KEY=your-key' > .mycontext/.env
|
|
155
23
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
- **Component Recommendations** - AI suggests appropriate components and features
|
|
159
|
-
- **Architecture Guidance** - Recommends best tech stack and project structure
|
|
24
|
+
# Generate context files
|
|
25
|
+
mycontext generate:context
|
|
160
26
|
|
|
161
|
-
|
|
27
|
+
# Generate InstantDB schema
|
|
28
|
+
mycontext generate:schema
|
|
162
29
|
|
|
163
|
-
|
|
30
|
+
# Generate types from schema
|
|
31
|
+
mycontext generate:types --from-schema
|
|
164
32
|
|
|
165
|
-
|
|
166
|
-
mycontext
|
|
167
|
-
mycontext setup-complete --name "MyApp" # Direct setup with options
|
|
168
|
-
```
|
|
33
|
+
# Generate core 10 components
|
|
34
|
+
mycontext generate:components --core-only
|
|
169
35
|
|
|
170
|
-
|
|
36
|
+
# Preview and validate components
|
|
37
|
+
mycontext preview:components
|
|
171
38
|
|
|
172
|
-
|
|
173
|
-
mycontext
|
|
174
|
-
mycontext workflow generate # Generate and execute workflow
|
|
175
|
-
mycontext workflow --interactive # Interactive workflow planning
|
|
39
|
+
# Generate all remaining components
|
|
40
|
+
mycontext generate:components --all
|
|
176
41
|
```
|
|
177
42
|
|
|
178
|
-
|
|
43
|
+
## ✨ What You Get
|
|
179
44
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
45
|
+
- **Context Files** - PRD, branding, tech stack from your project analysis
|
|
46
|
+
- **InstantDB Schema** - Database schema generated from your requirements
|
|
47
|
+
- **TypeScript Types** - Generated from schema for type safety
|
|
48
|
+
- **Component Library** - Mobile + desktop variants built on shadcn/ui
|
|
49
|
+
- **Preview System** - Validate components before using in your app
|
|
50
|
+
- **Zero Hallucination** - Intent Dictionary maps natural language to exact components
|
|
51
|
+
- **Clarification System** - Detects gaps and tracks auto-generated features for approval
|
|
186
52
|
|
|
187
|
-
|
|
53
|
+
## 💰 Pricing
|
|
188
54
|
|
|
189
|
-
|
|
190
|
-
|
|
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
|
-
```
|
|
55
|
+
- **MyContext CLI** - Free and open source (MIT License)
|
|
56
|
+
- **MyContext AI API** - Hosted fine-tuned model (beta)
|
|
201
57
|
|
|
202
|
-
|
|
58
|
+
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.
|
|
203
59
|
|
|
204
|
-
|
|
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
|
-
```
|
|
60
|
+
## 📚 Full Documentation
|
|
209
61
|
|
|
210
|
-
|
|
62
|
+
**Complete guides, tutorials, and API reference available on GitHub:**
|
|
211
63
|
|
|
212
|
-
|
|
213
|
-
mycontext setup # Configure AI providers
|
|
214
|
-
mycontext build-strategy # Choose build approach
|
|
215
|
-
mycontext health-check # Verify installation
|
|
216
|
-
```
|
|
64
|
+
👉 **[View Full Documentation](https://github.com/farajabien/mycontext-cli/tree/main/docs)**
|
|
217
65
|
|
|
218
|
-
|
|
66
|
+
- [Getting Started Guide](https://github.com/farajabien/mycontext-cli/blob/main/docs/01-getting-started/quick-start.md)
|
|
67
|
+
- [AI Agents System](https://github.com/farajabien/mycontext-cli/blob/main/docs/02-core-features/ai-agents.md)
|
|
68
|
+
- [Intent Dictionary](https://github.com/farajabien/mycontext-cli/blob/main/docs/02-core-features/intent-dictionary-system.md)
|
|
69
|
+
- [Command Reference](https://github.com/farajabien/mycontext-cli/blob/main/docs/03-reference/commands.md)
|
|
70
|
+
- [Architecture](https://github.com/farajabien/mycontext-cli/blob/main/docs/06-architecture/system-overview.md)
|
|
219
71
|
|
|
220
|
-
|
|
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)
|
|
72
|
+
## 🎯 Key Features
|
|
234
73
|
|
|
235
|
-
|
|
74
|
+
- **Component-First Workflow** - Generate context → schema → types → core 10 → validate → all components
|
|
75
|
+
- **Mobile + Desktop Variants** - Separate files for easy debugging and validation
|
|
76
|
+
- **Schema-Driven Types** - TypeScript types generated from InstantDB schema
|
|
77
|
+
- **Preview & Validation** - Interactive component gallery with quality checks
|
|
78
|
+
- **Intent Dictionary** - 30+ UI patterns with type-safe natural language mapping
|
|
79
|
+
- **shadcn/ui Foundation** - Built on top of shadcn/ui, respecting its design principles
|
|
80
|
+
- **Clarification System** - Prevents vague requests by detecting gaps and tracking assumptions
|
|
236
81
|
|
|
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
|
-
```
|
|
82
|
+
## 🔍 How MyContext Ensures Accuracy
|
|
258
83
|
|
|
259
|
-
|
|
84
|
+
### Gap Detection
|
|
260
85
|
|
|
261
|
-
|
|
86
|
+
MyContext analyzes your requirements and detects missing critical information:
|
|
262
87
|
|
|
263
88
|
```bash
|
|
264
|
-
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
**Output:**
|
|
89
|
+
❌ Critical information missing:
|
|
268
90
|
|
|
91
|
+
1. What type of game is this?
|
|
92
|
+
- a) Turn-based (Tic-tac-toe, Chess)
|
|
93
|
+
- b) Real-time (Racing, Shooting)
|
|
94
|
+
- c) Puzzle (Matching, Strategy)
|
|
269
95
|
```
|
|
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
96
|
|
|
322
|
-
|
|
97
|
+
### Auto-Generated Feature Tracking
|
|
323
98
|
|
|
324
|
-
|
|
99
|
+
All assumptions are tracked for your approval:
|
|
325
100
|
|
|
326
101
|
```bash
|
|
327
|
-
|
|
328
|
-
```
|
|
329
|
-
|
|
330
|
-
**"Component Build Failed"**
|
|
102
|
+
📋 Auto-generated Features Review
|
|
331
103
|
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
104
|
+
1. Real-time multiplayer with Socket.io
|
|
105
|
+
Reasoning: You mentioned "play against each other"
|
|
106
|
+
Confidence: Medium
|
|
107
|
+
[Y] Accept [N] Reject [E] Edit
|
|
335
108
|
```
|
|
336
109
|
|
|
337
|
-
|
|
110
|
+
### Interactive Approval System
|
|
338
111
|
|
|
339
|
-
|
|
340
|
-
mycontext setup # Reconfigure API keys
|
|
341
|
-
mycontext health-check # Verify setup
|
|
342
|
-
```
|
|
343
|
-
|
|
344
|
-
**"UI Spec Generation Failed"**
|
|
112
|
+
Review and approve features before component generation:
|
|
345
113
|
|
|
346
114
|
```bash
|
|
347
|
-
|
|
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
|
|
115
|
+
mycontext review:context
|
|
355
116
|
```
|
|
356
117
|
|
|
357
|
-
|
|
118
|
+
### Iterative Refinement
|
|
358
119
|
|
|
359
|
-
|
|
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"**
|
|
120
|
+
Refine components with AI suggestions:
|
|
368
121
|
|
|
369
122
|
```bash
|
|
370
|
-
|
|
371
|
-
mycontext export-progress --format summary
|
|
372
|
-
|
|
373
|
-
# Ensure .mycontext directory exists with todos.json
|
|
374
|
-
ls -la .mycontext/
|
|
123
|
+
mycontext refine:component UserCard --in-place
|
|
375
124
|
```
|
|
376
125
|
|
|
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)
|
|
394
|
-
|
|
395
126
|
## 🤝 Contributing
|
|
396
127
|
|
|
397
|
-
Contributions
|
|
128
|
+
Contributions welcome! See our [Contributing Guide](https://github.com/farajabien/mycontext-cli/blob/main/CONTRIBUTING.md).
|
|
398
129
|
|
|
399
130
|
## 📄 License
|
|
400
131
|
|
|
401
|
-
MIT © MyContext
|
|
132
|
+
MIT © MyContext - See [LICENSE](https://github.com/farajabien/mycontext-cli/blob/main/LICENSE) for details.
|
|
402
133
|
|
|
403
134
|
---
|
|
404
135
|
|
|
405
|
-
**🤖 The future of AI-powered development: From requirements to production with intelligent automation.**
|
|
406
|
-
|
|
407
136
|
**Built by developers, for developers. Your code stays on your machine.** 🚀
|
|
408
137
|
|
|
409
|
-
|
|
138
|
+
[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}
|