@ncds/ui-admin-mcp 1.0.0-alpha.3 → 1.0.0-alpha.5

package/bin/definitions/instructions.md

@@ -2,12 +2,15 @@
 
 You are an agent that builds UI using NCUA (NCDS UI Admin) design system components from NHN Commerce.
 
-## Absolute Rules
+## Absolute Rules (VIOLATION = CRITICAL FAILURE)
 
-1. You MUST generate NCUA component HTML using the render_to_html tool only. Never write HTML/CSS manually.
-2. Do NOT define or guess CSS variables (--ncua-\*), color values, or BEM classes. They are all included in the CDN CSS.
-3. Do NOT write SVG icons manually. Use search_icon or list_icons to find icons.
-4. If an NCUA component exists for the use case, you MUST use it. Do NOT recreate it manually.
+1. Call ping ONCE at the start of every session before using any other tool. This loads version info and usage rules.
+2. NEVER define, invent, or guess CSS variables, design tokens, or color values. Use ONLY tokens returned by get_design_tokens. If you write a custom CSS variable (e.g. --custom-anything) or hardcode a hex/rgb value (e.g. #5B5BD6, rgb(91,91,214)), you have FAILED.
+3. NEVER write SVG icons or icon markup manually. ALL icons MUST come from search_icon or list_icons. If you write a single <svg> tag by hand, you have FAILED.
+4. NEVER use emoji in generated HTML, CSS, or any output. No exceptions.
+5. You MUST generate NCUA component HTML using render_to_html or render_to_html_batch only. Never write component HTML/CSS manually.
+6. If an NCUA component exists for the use case, you MUST use it. Do NOT recreate it manually.
+7. For custom areas not covered by NCUA, use ONLY tokens from get_design_tokens for all colors, spacing, typography, and shadows. Call get_design_tokens BEFORE writing any custom CSS.
 
 ## Required Workflow (follow this order strictly)
 
@@ -38,7 +41,8 @@ You are an agent that builds UI using NCUA (NCDS UI Admin) design system compone
 
 ### Step 3: HTML Generation
 
-- Use **render_to_html** to get the exact HTML for each component
+- When building a page with multiple components, use **render_to_html_batch** to render them all in one call (max 30). This is much more efficient than calling render_to_html repeatedly.
+- For a single component, use **render_to_html**.
 - Use the returned html as-is. Do NOT modify class names, structure, or attributes.
 
 ### Step 4: CDN Inclusion

package/bin/definitions/rules.json

@@ -3,7 +3,8 @@
     "You MUST generate component HTML using the render_to_html tool. Never write HTML/CSS manually.",
     "Use the HTML returned by render_to_html as-is. Do NOT modify class names, structure, or attributes.",
     "Use search_component to find the right component by Korean/English keywords before building any UI.",
-    "Use list_components to browse available components by category and choose the appropriate one."
+    "Use list_components to browse available components by category and choose the appropriate one.",
+    "When building a page with multiple components, use render_to_html_batch to render them all in one call instead of calling render_to_html repeatedly."
   ],
   "componentSelection": [
     "For password fields, you MUST use password-input. The input component is for plain text only.",

package/bin/definitions/tool-definitions.json

@@ -24,6 +24,9 @@
     "render_to_html": {
       "description": "Generate exact HTML for an NCUA component with given props. Returns html, appliedProps, defaultsUsed, js, cdn."
     },
+    "render_to_html_batch": {
+      "description": "Render multiple NCUA components in a single call (max 30). Pass an array of {name, props} objects. Returns an array of render results. Use this instead of calling render_to_html repeatedly when building a page."
+    },
     "get_design_tokens": {
       "description": "Get available design tokens (CSS variables) for colors, typography, spacing, and shadows. Use when building custom areas to pick real tokens instead of guessing."
     }
@@ -37,6 +40,7 @@
     { "tool": "get_component_props", "description": "Get component props spec" },
     { "tool": "validate_html", "description": "Validate HTML BEM classes + design system compliance score + auto-fix" },
     { "tool": "render_to_html", "description": "Props-based dynamic HTML rendering" },
+    { "tool": "render_to_html_batch", "description": "Batch render multiple components in one call (max 30)" },
     { "tool": "get_design_tokens", "description": "Design token (CSS variable) lookup by category" }
   ]
 }

package/bin/server.js

@@ -23,6 +23,7 @@ const ping_js_1 = require("./tools/ping.js");
 const listIcons_js_1 = require("./tools/listIcons.js");
 const searchIcon_js_1 = require("./tools/searchIcon.js");
 const renderToHtml_js_1 = require("./tools/renderToHtml.js");
+const response_js_1 = require("./utils/response.js");
 const getDesignTokens_js_1 = require("./tools/getDesignTokens.js");
 const version_js_1 = require("./version.js");
 const domEnvironment_js_1 = require("./utils/domEnvironment.js");
@@ -145,6 +146,34 @@ const main = async () => {
         name,
         props: props,
     }));
+    server.registerTool('render_to_html_batch', {
+        description: descriptions['render_to_html_batch'],
+        inputSchema: {
+            components: zod_1.z
+                .array(zod_1.z.object({
+                name: zod_1.z.string().min(1).describe('Component name'),
+                props: zod_1.z.record(zod_1.z.string(), zod_1.z.unknown()).optional().describe('Component props'),
+            }))
+                .min(1)
+                .max(30)
+                .describe('Array of components to render (max 30)'),
+        },
+    }, ({ components }) => {
+        const results = components.map(({ name, props }) => (0, renderToHtml_js_1.renderToHtml)({
+            componentMap,
+            bundle,
+            cdnMeta,
+            iconMeta,
+            reactRuntime,
+            name,
+            props: props,
+        }));
+        const parsed = results.map((r) => {
+            const text = r.content[0].text;
+            return r.isError ? { error: JSON.parse(text) } : JSON.parse(text);
+        });
+        return (0, response_js_1.successResponse)(parsed);
+    });
     server.registerTool('get_design_tokens', {
         description: descriptions['get_design_tokens'],
         inputSchema: {

package/bin/tools/renderToHtml.js

@@ -151,7 +151,7 @@ const renderToHtml = (params) => {
         const userProps = componentData.props ? sanitizeProps(safeProps, componentData.props) : safeProps;
         const element = reactRuntime.createElement(Component, userProps);
         const rawHtml = reactRuntime.renderToStaticMarkup(element);
-        const html = `<!-- ncua:${normalized} -->\n${rawHtml}\n<!-- /ncua:${normalized} -->`;
+        const html = `<!-- ncua:${normalized} start -->\n${rawHtml}\n<!-- ncua:${normalized} end -->`;
         const defaultsUsed = componentData.props ? calcDefaultsUsed(componentData.props, userProps) : {};
         const react = buildReactOutput(componentData, userProps, iconMeta);
         const dataVersion = buildDataVersion(cdnMeta, iconMeta);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin-mcp",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.5",
   "description": "NCDS UI Admin MCP 서버 — AI 에이전트가 NCUA 컴포넌트를 조회하고 HTML을 검증할 수 있는 MCP 서버",
   "bin": {
     "ncua-mcp": "./bin/server.mjs"