viewgate-mcp 1.0.50 → 1.0.52
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/dist/index.js +46 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -250,6 +250,7 @@ function createMcpServer(apiKey, personalKey) {
|
|
|
250
250
|
properties: {
|
|
251
251
|
id: { type: "string", description: "Internal UI component id." },
|
|
252
252
|
code: { type: "string", description: "Generated component code used for iframe preview." },
|
|
253
|
+
cssContent: { type: "string", description: "Generated CSS styles for the component." },
|
|
253
254
|
props: { type: "object", description: "Props object used for iframe preview." }
|
|
254
255
|
},
|
|
255
256
|
required: ["id", "code"]
|
|
@@ -400,6 +401,34 @@ function createMcpServer(apiKey, personalKey) {
|
|
|
400
401
|
case "generate_ui_components": {
|
|
401
402
|
const args = argsAny;
|
|
402
403
|
const limit = Math.min(args.limit || 1, 10);
|
|
404
|
+
// Fetch project styleHandler from config
|
|
405
|
+
let styleHandler = 'css';
|
|
406
|
+
try {
|
|
407
|
+
const configRes = await fetch(`${BACKEND_URL}/api/mcp/config`, {
|
|
408
|
+
headers: {
|
|
409
|
+
'x-api-key': apiKey,
|
|
410
|
+
'x-mcp-tool-name': 'generate_ui_components',
|
|
411
|
+
...(personalKey ? { 'x-personal-key': personalKey } : {})
|
|
412
|
+
}
|
|
413
|
+
});
|
|
414
|
+
if (configRes.ok) {
|
|
415
|
+
const configData = (await configRes.json());
|
|
416
|
+
styleHandler = configData?.settings?.styleHandler || 'css';
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
catch (e) {
|
|
420
|
+
console.error('[MCP] Could not fetch project config for styleHandler:', e);
|
|
421
|
+
}
|
|
422
|
+
const styleHandlerLabels = {
|
|
423
|
+
'css': 'Plain CSS (vanilla, no framework dependencies)',
|
|
424
|
+
'sass': 'SASS/SCSS (use .scss syntax conventions in comments, output as CSS-in-string or inline styles for compatibility)',
|
|
425
|
+
'tailwind': 'Tailwind CSS (use Tailwind utility classes exclusively for all styling)',
|
|
426
|
+
'css-modules': 'CSS Modules (import styles from a separate .module.css file; use styles.className pattern)',
|
|
427
|
+
'css-in-js': 'CSS-in-JS / styled-components (define all styles as JS template literals using styled.div`...` pattern)',
|
|
428
|
+
'bootstrap': 'Bootstrap 5 (use Bootstrap class names exclusively; no custom CSS unless necessary)',
|
|
429
|
+
'mui': 'Material UI / MUI v5 (use @mui/material components and sx prop for styling; avoid raw CSS)',
|
|
430
|
+
};
|
|
431
|
+
const styleLabel = styleHandlerLabels[styleHandler] ?? styleHandler;
|
|
403
432
|
const fetchUrl = new URL(`${BACKEND_URL}/api/mcp/components`);
|
|
404
433
|
fetchUrl.searchParams.append("limit", limit.toString());
|
|
405
434
|
fetchUrl.searchParams.append("status", "pending");
|
|
@@ -432,12 +461,20 @@ function createMcpServer(apiKey, personalKey) {
|
|
|
432
461
|
htmlContent: item.htmlContent,
|
|
433
462
|
cssContent: item.cssContent,
|
|
434
463
|
sourceType: item.sourceType,
|
|
464
|
+
stylingTechnology: {
|
|
465
|
+
handler: styleHandler,
|
|
466
|
+
instruction: `You MUST use ${styleLabel} for ALL styling. Do not mix or use any other styling approach. The component must be fully styled using this technology and be production-ready.`
|
|
467
|
+
},
|
|
435
468
|
constraints: {
|
|
436
469
|
mustBeFunctional: true,
|
|
437
470
|
mustSupportRequiredProps: true,
|
|
438
471
|
mustSupportCommonProps: true,
|
|
439
472
|
avoidBreakingChanges: true,
|
|
440
|
-
useProvidedHtmlAndCssIfAvailable: true
|
|
473
|
+
useProvidedHtmlAndCssIfAvailable: true,
|
|
474
|
+
mustBeGeneric: true,
|
|
475
|
+
mustBeProductionReady: true,
|
|
476
|
+
mustUseFramerMotionForAnimations: true,
|
|
477
|
+
stylingHandlerIsStrict: true
|
|
441
478
|
}
|
|
442
479
|
};
|
|
443
480
|
results.push({
|
|
@@ -446,6 +483,7 @@ function createMcpServer(apiKey, personalKey) {
|
|
|
446
483
|
requiredProps,
|
|
447
484
|
commonProps,
|
|
448
485
|
db: item._id,
|
|
486
|
+
styleHandler,
|
|
449
487
|
llmInstruction
|
|
450
488
|
});
|
|
451
489
|
}
|
|
@@ -455,7 +493,8 @@ function createMcpServer(apiKey, personalKey) {
|
|
|
455
493
|
text: JSON.stringify({
|
|
456
494
|
ok: true,
|
|
457
495
|
generated: 0,
|
|
458
|
-
|
|
496
|
+
styleHandler,
|
|
497
|
+
instruction: `IMPORTANTE: Este tool NO debe generar código ni escribir archivos. Solo entrega al LLM la especificación (componentType + props + stylingTechnology) para que el LLM implemente un componente GENÉRICO, reutilizable y listo para producción. OBLIGATORIO: usar ${styleLabel} para todos los estilos.`,
|
|
459
498
|
results
|
|
460
499
|
}, null, 2)
|
|
461
500
|
}]
|
|
@@ -474,7 +513,11 @@ function createMcpServer(apiKey, personalKey) {
|
|
|
474
513
|
'x-mcp-tool-name': toolName,
|
|
475
514
|
...(personalKey ? { 'x-personal-key': personalKey } : {})
|
|
476
515
|
},
|
|
477
|
-
body: JSON.stringify({
|
|
516
|
+
body: JSON.stringify({
|
|
517
|
+
code: args.code,
|
|
518
|
+
cssContent: args.cssContent,
|
|
519
|
+
props: args.props
|
|
520
|
+
})
|
|
478
521
|
});
|
|
479
522
|
if (!response.ok) {
|
|
480
523
|
const errorBody = await response.text();
|