mycontext-cli 2.0.28 → 2.0.30
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 +106 -14
- package/dist/cli.js +89 -99
- package/dist/cli.js.map +1 -1
- package/dist/commands/generate-components.d.ts +10 -0
- package/dist/commands/generate-components.d.ts.map +1 -1
- package/dist/commands/generate-components.js +300 -3
- 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 +75 -1
- package/dist/commands/generate.js.map +1 -1
- package/dist/commands/init.d.ts +9 -0
- package/dist/commands/init.d.ts.map +1 -1
- package/dist/commands/init.js +223 -68
- 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/package.json +11 -2
- 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/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/templates/instantdb/db.template.ts +14 -0
- package/dist/templates/instantdb/home-client.template.tsx +127 -0
- package/dist/templates/instantdb/page.template.tsx +5 -0
- package/dist/templates/instantdb/perms.template.ts +9 -0
- package/dist/templates/instantdb/schema.template.ts +28 -0
- package/dist/templates/playbooks/instantdb-integration.md +851 -0
- package/dist/templates/playbooks/mpesa-integration.md +652 -0
- package/dist/templates/pm-integration-config.json +20 -0
- package/dist/templates/ui-spec-examples.md +318 -0
- package/dist/templates/ui-spec-templates.json +244 -0
- package/dist/utils/envExampleGenerator.d.ts.map +1 -1
- package/dist/utils/envExampleGenerator.js +9 -3
- package/dist/utils/envExampleGenerator.js.map +1 -1
- 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/package.json +11 -2
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
# UI Specification System Examples
|
|
2
|
+
|
|
3
|
+
The MyContext CLI now includes a powerful UI specification system that converts component descriptions into detailed, plain-English specifications that developers can implement without further clarification.
|
|
4
|
+
|
|
5
|
+
## Quick Start
|
|
6
|
+
|
|
7
|
+
### 1. Standalone UI Spec Generation
|
|
8
|
+
|
|
9
|
+
Generate a UI specification from a simple description:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
# Generate spec from description
|
|
13
|
+
mycontext refine spec RevenueCard --desc "A card showing total revenue prominently with a small subtitle showing percentage change"
|
|
14
|
+
|
|
15
|
+
# Generate spec from JSON file
|
|
16
|
+
mycontext refine spec UserProfile --json-file ./user-profile.json
|
|
17
|
+
|
|
18
|
+
# Generate spec from inline JSON
|
|
19
|
+
mycontext refine spec ContactForm --json-input '{"name":"ContactForm","type":"form","elements":[{"type":"input","label":"Name","required":true}]}'
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 2. Integrated with Component Generation
|
|
23
|
+
|
|
24
|
+
When generating components with verbose mode, UI specs are automatically generated:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
# Generate components with UI specs
|
|
28
|
+
mycontext generate-components all --verbose
|
|
29
|
+
|
|
30
|
+
# Generate specific group with UI specs
|
|
31
|
+
mycontext generate-components dashboard --verbose
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Example Outputs
|
|
35
|
+
|
|
36
|
+
### Compact Specification Example
|
|
37
|
+
|
|
38
|
+
**RevenueCard Component - Compact Spec**
|
|
39
|
+
|
|
40
|
+
**Visual Hierarchy:**
|
|
41
|
+
|
|
42
|
+
- Primary: Total Revenue, $125,430
|
|
43
|
+
- Secondary: +12.5% from last month
|
|
44
|
+
|
|
45
|
+
**Layout:** vertical arrangement
|
|
46
|
+
**Spacing:** medium spacing between elements
|
|
47
|
+
**Colors:** primary, success theme
|
|
48
|
+
**Interactions:** None
|
|
49
|
+
|
|
50
|
+
### Detailed Specification Example
|
|
51
|
+
|
|
52
|
+
**RevenueCard Component - Detailed Implementation Spec**
|
|
53
|
+
|
|
54
|
+
**Component Overview:**
|
|
55
|
+
|
|
56
|
+
- Name: RevenueCard
|
|
57
|
+
- Type: card
|
|
58
|
+
- Description: A card component displaying revenue metrics with primary value prominently and secondary info subtly
|
|
59
|
+
|
|
60
|
+
**Visual Hierarchy:**
|
|
61
|
+
|
|
62
|
+
1. **title**: Total Revenue
|
|
63
|
+
- Prominence: medium (medium (~16px))
|
|
64
|
+
2. **value**: $125,430
|
|
65
|
+
- Prominence: high (large (~32px))
|
|
66
|
+
3. **subtitle**: +12.5% from last month
|
|
67
|
+
- Prominence: low (small (~12px))
|
|
68
|
+
4. **icon**: trending-up
|
|
69
|
+
- Prominence: low (small (~12px))
|
|
70
|
+
|
|
71
|
+
**Layout Specifications:**
|
|
72
|
+
|
|
73
|
+
- Arrangement: vertical
|
|
74
|
+
- Spacing: medium (16px between elements)
|
|
75
|
+
- Alignment: left
|
|
76
|
+
|
|
77
|
+
**Styling Details:**
|
|
78
|
+
|
|
79
|
+
- Theme: modern
|
|
80
|
+
- Color Palette: primary, success
|
|
81
|
+
- Border Radius: lg
|
|
82
|
+
- Shadow: sm
|
|
83
|
+
|
|
84
|
+
**State Behavior:**
|
|
85
|
+
|
|
86
|
+
- Default: clean, minimal appearance
|
|
87
|
+
- Hover: subtle elevation or color change
|
|
88
|
+
|
|
89
|
+
**Accessibility Requirements:**
|
|
90
|
+
|
|
91
|
+
- All interactive elements must have aria-label or aria-labelledby
|
|
92
|
+
- Focus management: tab order follows visual hierarchy
|
|
93
|
+
- Color contrast: minimum 4.5:1 ratio for text
|
|
94
|
+
- Screen reader: semantic HTML structure
|
|
95
|
+
|
|
96
|
+
**Responsive Adjustments:**
|
|
97
|
+
|
|
98
|
+
- Mobile (< 768px):
|
|
99
|
+
- Reduce spacing to 12px
|
|
100
|
+
- Stack elements vertically
|
|
101
|
+
- Increase touch targets to 44px minimum
|
|
102
|
+
- Desktop (> 768px):
|
|
103
|
+
- Standard spacing (16px)
|
|
104
|
+
- Maintain original layout
|
|
105
|
+
- Hover states enabled
|
|
106
|
+
|
|
107
|
+
## JSON Template Examples
|
|
108
|
+
|
|
109
|
+
### Card Component Template
|
|
110
|
+
|
|
111
|
+
```json
|
|
112
|
+
{
|
|
113
|
+
"name": "RevenueCard",
|
|
114
|
+
"type": "card",
|
|
115
|
+
"description": "A card component displaying revenue metrics with primary value prominently and secondary info subtly",
|
|
116
|
+
"elements": [
|
|
117
|
+
{
|
|
118
|
+
"type": "title",
|
|
119
|
+
"content": "Total Revenue",
|
|
120
|
+
"prominence": "medium"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"type": "value",
|
|
124
|
+
"content": "$125,430",
|
|
125
|
+
"prominence": "high"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"type": "subtitle",
|
|
129
|
+
"content": "+12.5% from last month",
|
|
130
|
+
"prominence": "low"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"type": "icon",
|
|
134
|
+
"content": "trending-up",
|
|
135
|
+
"prominence": "low"
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
"layout": "vertical",
|
|
139
|
+
"styling": {
|
|
140
|
+
"theme": "modern",
|
|
141
|
+
"colors": ["primary", "success"],
|
|
142
|
+
"spacing": "medium",
|
|
143
|
+
"borderRadius": "lg",
|
|
144
|
+
"shadow": "sm",
|
|
145
|
+
"alignment": "left"
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Form Component Template
|
|
151
|
+
|
|
152
|
+
```json
|
|
153
|
+
{
|
|
154
|
+
"name": "ContactForm",
|
|
155
|
+
"type": "form",
|
|
156
|
+
"description": "A contact form with input fields and submit button",
|
|
157
|
+
"elements": [
|
|
158
|
+
{
|
|
159
|
+
"type": "input",
|
|
160
|
+
"label": "Name",
|
|
161
|
+
"required": true,
|
|
162
|
+
"prominence": "medium"
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"type": "input",
|
|
166
|
+
"label": "Email",
|
|
167
|
+
"required": true,
|
|
168
|
+
"prominence": "medium"
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"type": "textarea",
|
|
172
|
+
"label": "Message",
|
|
173
|
+
"required": true,
|
|
174
|
+
"prominence": "medium"
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"type": "button",
|
|
178
|
+
"label": "Send Message",
|
|
179
|
+
"variant": "primary",
|
|
180
|
+
"prominence": "high"
|
|
181
|
+
}
|
|
182
|
+
],
|
|
183
|
+
"layout": "vertical",
|
|
184
|
+
"styling": {
|
|
185
|
+
"theme": "modern",
|
|
186
|
+
"colors": ["primary", "secondary"],
|
|
187
|
+
"spacing": "medium",
|
|
188
|
+
"borderRadius": "md",
|
|
189
|
+
"shadow": "none",
|
|
190
|
+
"alignment": "left"
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### Button Component Template
|
|
196
|
+
|
|
197
|
+
```json
|
|
198
|
+
{
|
|
199
|
+
"name": "PrimaryButton",
|
|
200
|
+
"type": "button",
|
|
201
|
+
"description": "A primary action button with hover and focus states",
|
|
202
|
+
"elements": [
|
|
203
|
+
{
|
|
204
|
+
"type": "button",
|
|
205
|
+
"label": "Get Started",
|
|
206
|
+
"variant": "primary",
|
|
207
|
+
"prominence": "high"
|
|
208
|
+
}
|
|
209
|
+
],
|
|
210
|
+
"layout": "horizontal",
|
|
211
|
+
"styling": {
|
|
212
|
+
"theme": "modern",
|
|
213
|
+
"colors": ["primary"],
|
|
214
|
+
"spacing": "none",
|
|
215
|
+
"borderRadius": "md",
|
|
216
|
+
"shadow": "sm",
|
|
217
|
+
"alignment": "center"
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
## Command Options
|
|
223
|
+
|
|
224
|
+
### UI Spec Command Options
|
|
225
|
+
|
|
226
|
+
- `--desc <description>`: Component description
|
|
227
|
+
- `--json-input <json>`: Inline JSON component description
|
|
228
|
+
- `--json-file <path>`: Path to JSON file with component description
|
|
229
|
+
- `--output-format <format>`: Output format (compact, detailed, both)
|
|
230
|
+
- `--template <type>`: Component template (card, form, button, modal, list, custom)
|
|
231
|
+
- `--verbose`: Show detailed output
|
|
232
|
+
|
|
233
|
+
### Output Formats
|
|
234
|
+
|
|
235
|
+
- **compact**: Short usable summary
|
|
236
|
+
- **detailed**: Full implementation guidance
|
|
237
|
+
- **both**: Both compact and detailed (default)
|
|
238
|
+
|
|
239
|
+
## Integration Workflow
|
|
240
|
+
|
|
241
|
+
### 1. Generate UI Spec First
|
|
242
|
+
|
|
243
|
+
```bash
|
|
244
|
+
# Generate spec for a revenue card
|
|
245
|
+
mycontext refine spec RevenueCard --desc "A card showing total revenue prominently with percentage change"
|
|
246
|
+
|
|
247
|
+
# Review the generated specification
|
|
248
|
+
cat components/dashboard/RevenueCard.spec.md
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
### 2. Generate Component with Spec
|
|
252
|
+
|
|
253
|
+
```bash
|
|
254
|
+
# Generate component with verbose mode to include UI spec
|
|
255
|
+
mycontext generate-components dashboard --verbose
|
|
256
|
+
|
|
257
|
+
# This will create:
|
|
258
|
+
# - components/dashboard/RevenueCard.tsx
|
|
259
|
+
# - components/dashboard/RevenueCard.spec.md
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
### 3. Refine Component Using Spec
|
|
263
|
+
|
|
264
|
+
```bash
|
|
265
|
+
# Use the spec to refine the component
|
|
266
|
+
mycontext refine components/dashboard/RevenueCard.tsx --prompt "Implement the UI specification exactly as described"
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
## Best Practices
|
|
270
|
+
|
|
271
|
+
1. **Start with UI Specs**: Always generate UI specs before component generation for complex components
|
|
272
|
+
2. **Use Templates**: Leverage the built-in templates (card, form, button, modal, list) for common patterns
|
|
273
|
+
3. **Iterative Refinement**: Use the spec as a reference for iterative improvements
|
|
274
|
+
4. **Team Communication**: Share UI specs with designers and developers for alignment
|
|
275
|
+
5. **Documentation**: Keep UI specs alongside components for future reference
|
|
276
|
+
|
|
277
|
+
## Advanced Usage
|
|
278
|
+
|
|
279
|
+
### Custom Templates
|
|
280
|
+
|
|
281
|
+
Create custom JSON templates for your specific component patterns:
|
|
282
|
+
|
|
283
|
+
```json
|
|
284
|
+
{
|
|
285
|
+
"name": "CustomComponent",
|
|
286
|
+
"type": "custom",
|
|
287
|
+
"description": "Your custom component description",
|
|
288
|
+
"elements": [
|
|
289
|
+
{
|
|
290
|
+
"type": "custom-element",
|
|
291
|
+
"content": "Custom content",
|
|
292
|
+
"prominence": "high"
|
|
293
|
+
}
|
|
294
|
+
],
|
|
295
|
+
"layout": "custom",
|
|
296
|
+
"styling": {
|
|
297
|
+
"theme": "custom",
|
|
298
|
+
"colors": ["custom-color"],
|
|
299
|
+
"spacing": "custom",
|
|
300
|
+
"borderRadius": "custom",
|
|
301
|
+
"shadow": "custom",
|
|
302
|
+
"alignment": "custom"
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
### Batch Processing
|
|
308
|
+
|
|
309
|
+
Generate specs for multiple components:
|
|
310
|
+
|
|
311
|
+
```bash
|
|
312
|
+
# Generate specs for all components in a group
|
|
313
|
+
for component in $(mycontext list components --format simple); do
|
|
314
|
+
mycontext refine spec $component --desc "Component description"
|
|
315
|
+
done
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
This UI specification system bridges the gap between high-level requirements and implementation details, making component development more efficient and consistent.
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
{
|
|
2
|
+
"card": {
|
|
3
|
+
"name": "RevenueCard",
|
|
4
|
+
"type": "card",
|
|
5
|
+
"description": "A card component displaying revenue metrics with primary value prominently and secondary info subtly",
|
|
6
|
+
"elements": [
|
|
7
|
+
{
|
|
8
|
+
"type": "title",
|
|
9
|
+
"content": "Total Revenue",
|
|
10
|
+
"prominence": "medium"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
"type": "value",
|
|
14
|
+
"content": "$125,430",
|
|
15
|
+
"prominence": "high"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"type": "subtitle",
|
|
19
|
+
"content": "+12.5% from last month",
|
|
20
|
+
"prominence": "low"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"type": "icon",
|
|
24
|
+
"content": "trending-up",
|
|
25
|
+
"prominence": "low"
|
|
26
|
+
}
|
|
27
|
+
],
|
|
28
|
+
"layout": "vertical",
|
|
29
|
+
"styling": {
|
|
30
|
+
"theme": "modern",
|
|
31
|
+
"colors": ["primary", "success"],
|
|
32
|
+
"spacing": "medium",
|
|
33
|
+
"borderRadius": "lg",
|
|
34
|
+
"shadow": "sm",
|
|
35
|
+
"alignment": "left"
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
"form": {
|
|
39
|
+
"name": "ContactForm",
|
|
40
|
+
"type": "form",
|
|
41
|
+
"description": "A contact form with input fields and submit button",
|
|
42
|
+
"elements": [
|
|
43
|
+
{
|
|
44
|
+
"type": "input",
|
|
45
|
+
"inputType": "text",
|
|
46
|
+
"label": "Name",
|
|
47
|
+
"placeholder": "Enter your name",
|
|
48
|
+
"required": true,
|
|
49
|
+
"prominence": "medium"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"type": "input",
|
|
53
|
+
"inputType": "email",
|
|
54
|
+
"label": "Email",
|
|
55
|
+
"placeholder": "your.email@example.com",
|
|
56
|
+
"required": true,
|
|
57
|
+
"prominence": "medium"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"type": "textarea",
|
|
61
|
+
"label": "Message",
|
|
62
|
+
"placeholder": "Your message here...",
|
|
63
|
+
"rows": 4,
|
|
64
|
+
"required": true,
|
|
65
|
+
"prominence": "medium"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"type": "button",
|
|
69
|
+
"label": "Send Message",
|
|
70
|
+
"variant": "primary",
|
|
71
|
+
"prominence": "high"
|
|
72
|
+
}
|
|
73
|
+
],
|
|
74
|
+
"layout": "vertical",
|
|
75
|
+
"styling": {
|
|
76
|
+
"theme": "modern",
|
|
77
|
+
"colors": ["primary", "secondary"],
|
|
78
|
+
"spacing": "medium",
|
|
79
|
+
"borderRadius": "md",
|
|
80
|
+
"shadow": "none",
|
|
81
|
+
"alignment": "left"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
"button": {
|
|
85
|
+
"name": "PrimaryButton",
|
|
86
|
+
"type": "button",
|
|
87
|
+
"description": "A primary action button with hover and focus states",
|
|
88
|
+
"elements": [
|
|
89
|
+
{
|
|
90
|
+
"type": "button",
|
|
91
|
+
"label": "Get Started",
|
|
92
|
+
"variant": "primary",
|
|
93
|
+
"prominence": "high",
|
|
94
|
+
"icon": "arrow-right",
|
|
95
|
+
"iconPosition": "right"
|
|
96
|
+
}
|
|
97
|
+
],
|
|
98
|
+
"layout": "horizontal",
|
|
99
|
+
"styling": {
|
|
100
|
+
"theme": "modern",
|
|
101
|
+
"colors": ["primary"],
|
|
102
|
+
"spacing": "none",
|
|
103
|
+
"borderRadius": "md",
|
|
104
|
+
"shadow": "sm",
|
|
105
|
+
"alignment": "center"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
"modal": {
|
|
109
|
+
"name": "ConfirmationModal",
|
|
110
|
+
"type": "modal",
|
|
111
|
+
"description": "A confirmation modal with title, message, and action buttons",
|
|
112
|
+
"elements": [
|
|
113
|
+
{
|
|
114
|
+
"type": "icon",
|
|
115
|
+
"content": "alert-circle",
|
|
116
|
+
"prominence": "medium",
|
|
117
|
+
"color": "warning"
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"type": "title",
|
|
121
|
+
"content": "Confirm Action",
|
|
122
|
+
"prominence": "high"
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"type": "message",
|
|
126
|
+
"content": "Are you sure you want to proceed? This action cannot be undone.",
|
|
127
|
+
"prominence": "medium"
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"type": "buttonGroup",
|
|
131
|
+
"layout": "horizontal",
|
|
132
|
+
"buttons": [
|
|
133
|
+
{
|
|
134
|
+
"type": "button",
|
|
135
|
+
"label": "Cancel",
|
|
136
|
+
"variant": "secondary",
|
|
137
|
+
"prominence": "medium"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"type": "button",
|
|
141
|
+
"label": "Confirm",
|
|
142
|
+
"variant": "primary",
|
|
143
|
+
"prominence": "high"
|
|
144
|
+
}
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
],
|
|
148
|
+
"layout": "vertical",
|
|
149
|
+
"styling": {
|
|
150
|
+
"theme": "modern",
|
|
151
|
+
"colors": ["primary", "secondary", "danger"],
|
|
152
|
+
"spacing": "medium",
|
|
153
|
+
"borderRadius": "lg",
|
|
154
|
+
"shadow": "xl",
|
|
155
|
+
"alignment": "center",
|
|
156
|
+
"backdrop": "blur"
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
"list": {
|
|
160
|
+
"name": "UserList",
|
|
161
|
+
"type": "list",
|
|
162
|
+
"description": "A list of users with avatar, name, and status",
|
|
163
|
+
"repeatable": true,
|
|
164
|
+
"elements": [
|
|
165
|
+
{
|
|
166
|
+
"type": "avatar",
|
|
167
|
+
"content": "User Avatar",
|
|
168
|
+
"size": "md",
|
|
169
|
+
"prominence": "medium"
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"type": "text",
|
|
173
|
+
"label": "name",
|
|
174
|
+
"content": "John Doe",
|
|
175
|
+
"prominence": "high"
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"type": "badge",
|
|
179
|
+
"label": "status",
|
|
180
|
+
"content": "Online",
|
|
181
|
+
"variant": "success",
|
|
182
|
+
"prominence": "low"
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
"type": "button",
|
|
186
|
+
"label": "View Profile",
|
|
187
|
+
"variant": "ghost",
|
|
188
|
+
"prominence": "medium"
|
|
189
|
+
}
|
|
190
|
+
],
|
|
191
|
+
"layout": "horizontal",
|
|
192
|
+
"styling": {
|
|
193
|
+
"theme": "modern",
|
|
194
|
+
"colors": ["primary", "success"],
|
|
195
|
+
"spacing": "medium",
|
|
196
|
+
"borderRadius": "md",
|
|
197
|
+
"shadow": "none",
|
|
198
|
+
"alignment": "left",
|
|
199
|
+
"divider": true
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
"navigation": {
|
|
203
|
+
"name": "MainNavigation",
|
|
204
|
+
"type": "navigation",
|
|
205
|
+
"description": "A horizontal navigation bar with logo and menu items",
|
|
206
|
+
"elements": [
|
|
207
|
+
{
|
|
208
|
+
"type": "logo",
|
|
209
|
+
"content": "Brand Logo",
|
|
210
|
+
"prominence": "high"
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"type": "navItem",
|
|
214
|
+
"label": "Home",
|
|
215
|
+
"active": true,
|
|
216
|
+
"prominence": "medium"
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"type": "navItem",
|
|
220
|
+
"label": "About",
|
|
221
|
+
"prominence": "medium"
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
"type": "navItem",
|
|
225
|
+
"label": "Services",
|
|
226
|
+
"prominence": "medium"
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"type": "navItem",
|
|
230
|
+
"label": "Contact",
|
|
231
|
+
"prominence": "medium"
|
|
232
|
+
}
|
|
233
|
+
],
|
|
234
|
+
"layout": "horizontal",
|
|
235
|
+
"styling": {
|
|
236
|
+
"theme": "modern",
|
|
237
|
+
"colors": ["primary", "secondary"],
|
|
238
|
+
"spacing": "medium",
|
|
239
|
+
"borderRadius": "none",
|
|
240
|
+
"shadow": "sm",
|
|
241
|
+
"alignment": "space-between"
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"envExampleGenerator.d.ts","sourceRoot":"","sources":["../../src/utils/envExampleGenerator.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,mBAAmB;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,qBAAa,mBAAmB;IAC9B;;OAEG;IACH,MAAM,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM;
|
|
1
|
+
{"version":3,"file":"envExampleGenerator.d.ts","sourceRoot":"","sources":["../../src/utils/envExampleGenerator.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,mBAAmB;IAClC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,eAAe,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,qBAAa,mBAAmB;IAC9B;;OAEG;IACH,MAAM,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM;IA+E5D;;OAEG;WACU,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;CActE"}
|
|
@@ -55,6 +55,10 @@ class EnvExampleGenerator {
|
|
|
55
55
|
envVars.add("# XAI/Grok (Fallback 2)");
|
|
56
56
|
envVars.add("XAI_API_KEY=");
|
|
57
57
|
envVars.add("");
|
|
58
|
+
// Add OpenRouter
|
|
59
|
+
envVars.add("# OpenRouter (Fallback 3 - Free Tier for Testing)");
|
|
60
|
+
envVars.add("MYCONTEXT_OPENROUTER_API_KEY=");
|
|
61
|
+
envVars.add("");
|
|
58
62
|
// Generation settings
|
|
59
63
|
envVars.add("# Optional: Generation Settings");
|
|
60
64
|
envVars.add("MYCONTEXT_TEMPERATURE=0.1");
|
|
@@ -79,17 +83,19 @@ MYCONTEXT_API_KEY=mctx-xxx
|
|
|
79
83
|
|
|
80
84
|
### Option 2: Bring Your Own Keys (Free)
|
|
81
85
|
\`\`\`bash
|
|
82
|
-
ANTHROPIC_API_KEY=sk-ant-xxx
|
|
83
|
-
XAI_API_KEY=xai-xxx
|
|
86
|
+
ANTHROPIC_API_KEY=sk-ant-xxx # Claude (primary)
|
|
87
|
+
XAI_API_KEY=xai-xxx # Grok (fallback 1)
|
|
88
|
+
MYCONTEXT_OPENROUTER_API_KEY=sk-or-xxx # OpenRouter free tier (fallback 2)
|
|
84
89
|
\`\`\`
|
|
85
90
|
|
|
86
91
|
## Provider Chain
|
|
87
|
-
MyContext AI → Claude SDK → XAI (automatic fallback)
|
|
92
|
+
MyContext AI → Claude SDK → XAI → OpenRouter (automatic fallback)
|
|
88
93
|
|
|
89
94
|
## Get API Keys
|
|
90
95
|
|
|
91
96
|
- **Claude**: https://console.anthropic.com/
|
|
92
97
|
- **XAI**: https://console.x.ai/
|
|
98
|
+
- **OpenRouter**: https://openrouter.ai/keys (free tier available)
|
|
93
99
|
- **MyContext AI**: Coming soon at api.mycontext.dev
|
|
94
100
|
|
|
95
101
|
## Environment Variables
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"envExampleGenerator.js","sourceRoot":"","sources":["../../src/utils/envExampleGenerator.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,gDAAwB;AAWxB,MAAa,mBAAmB;IAC9B;;OAEG;IACH,MAAM,CAAC,kBAAkB,CAAC,WAAyB;QACjD,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;QAElC,kEAAkE;QAClE,OAAO,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAC;QAC/D,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAClC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAEhB,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QACzC,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAClC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAEhB,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;QACvC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC5B,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAEhB,sBAAsB;QACtB,OAAO,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;QAC/C,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QACzC,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QAEzC,kCAAkC;QAClC,MAAM,YAAY,GAAG,WAAW;YAC9B,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,YAAY,EAAE,GAAG,WAAW,CAAC,eAAe,EAAE;YACjE,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,YAAY,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACrC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAChB,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;YAC3B,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO
|
|
1
|
+
{"version":3,"file":"envExampleGenerator.js","sourceRoot":"","sources":["../../src/utils/envExampleGenerator.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,gDAAwB;AAWxB,MAAa,mBAAmB;IAC9B;;OAEG;IACH,MAAM,CAAC,kBAAkB,CAAC,WAAyB;QACjD,MAAM,OAAO,GAAG,IAAI,GAAG,EAAU,CAAC;QAElC,kEAAkE;QAClE,OAAO,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAC;QAC/D,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAClC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAEhB,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QACzC,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAClC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAEhB,OAAO,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;QACvC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC5B,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAEhB,iBAAiB;QACjB,OAAO,CAAC,GAAG,CAAC,mDAAmD,CAAC,CAAC;QACjE,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;QAC7C,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAEhB,sBAAsB;QACtB,OAAO,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;QAC/C,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QACzC,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QAEzC,kCAAkC;QAClC,MAAM,YAAY,GAAG,WAAW;YAC9B,CAAC,CAAC,EAAE,GAAG,WAAW,CAAC,YAAY,EAAE,GAAG,WAAW,CAAC,eAAe,EAAE;YACjE,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,YAAY,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACrC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YAChB,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;YAC3B,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BT,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;;;;;;CAW/B,CAAC;IACA,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,WAAmB;QACjD,IAAI,CAAC;YACH,MAAM,eAAe,GAAG,cAAI,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;YAC/D,IAAI,MAAM,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;gBACzC,MAAM,WAAW,GAAG,MAAM,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;gBACvD,OAAO,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,wDAAwD;QAC1D,CAAC;QAED,4BAA4B;QAC5B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;CACF;AApGD,kDAoGC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hybridAIClient.d.ts","sourceRoot":"","sources":["../../src/utils/hybridAIClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"hybridAIClient.d.ts","sourceRoot":"","sources":["../../src/utils/hybridAIClient.ts"],"names":[],"mappings":"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"}
|
|
@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
39
39
|
exports.HybridAIClient = void 0;
|
|
40
40
|
const claudeAgentClient_1 = require("./claudeAgentClient");
|
|
41
41
|
const hostedApiClient_1 = require("./hostedApiClient");
|
|
42
|
+
const openRouterClient_1 = require("./openRouterClient");
|
|
42
43
|
const logger_1 = require("./logger");
|
|
43
44
|
const chalk_1 = __importDefault(require("chalk"));
|
|
44
45
|
const fs = __importStar(require("fs"));
|
|
@@ -120,6 +121,19 @@ class HybridAIClient {
|
|
|
120
121
|
isAvailable: () => claudeAgentClient.checkConnection(),
|
|
121
122
|
});
|
|
122
123
|
}
|
|
124
|
+
// OpenRouter (free tier - testing only)
|
|
125
|
+
const openRouterClient = new openRouterClient_1.OpenRouterClient();
|
|
126
|
+
if (openRouterClient.hasApiKey()) {
|
|
127
|
+
this.providers.push({
|
|
128
|
+
name: "openrouter",
|
|
129
|
+
priority: 3, // Lower than Claude/XAI, higher than hosted
|
|
130
|
+
client: openRouterClient,
|
|
131
|
+
isAvailable: () => openRouterClient.checkConnection(),
|
|
132
|
+
});
|
|
133
|
+
if (!HybridAIClient.hasLoggedInitialization) {
|
|
134
|
+
console.log(chalk_1.default.blue("🆓 Using OpenRouter free tier (DeepSeek-R1)"));
|
|
135
|
+
}
|
|
136
|
+
}
|
|
123
137
|
// Sort providers by priority (lower number = higher priority)
|
|
124
138
|
this.providers.sort((a, b) => a.priority - b.priority);
|
|
125
139
|
// Add hosted API as fallback if no local providers are available
|
|
@@ -239,6 +253,9 @@ class HybridAIClient {
|
|
|
239
253
|
return (this.config?.xai?.models?.["text-generator"]?.name ||
|
|
240
254
|
"grok-4-fast-reasoning");
|
|
241
255
|
}
|
|
256
|
+
if (provider.name === "openrouter") {
|
|
257
|
+
return "deepseek-ai/DeepSeek-R1";
|
|
258
|
+
}
|
|
242
259
|
// Default model name
|
|
243
260
|
return "qwen3-coder";
|
|
244
261
|
}
|
|
@@ -455,6 +472,10 @@ class HybridAIClient {
|
|
|
455
472
|
model: modelName,
|
|
456
473
|
});
|
|
457
474
|
}
|
|
475
|
+
else if (provider.name === "openrouter") {
|
|
476
|
+
const openRouterClient = provider.client;
|
|
477
|
+
return await openRouterClient.generateText(prompt, options);
|
|
478
|
+
}
|
|
458
479
|
else if (provider.name === "hosted") {
|
|
459
480
|
const hostedClient = provider.client;
|
|
460
481
|
const response = await hostedClient.generateText(prompt, options);
|