@synergy-design-system/mcp 3.15.0 → 3.16.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 3.16.1
+
+### Patch Changes
+
+- [#1313](https://github.com/synergy-design-system/synergy-design-system/pull/1313) [`89a2022`](https://github.com/synergy-design-system/synergy-design-system/commit/89a2022e49b8f7aad3469ac392e5e5601b7238e8) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-24
+
+  fix: 🐛 dependency updates ([#258](https://github.com/synergy-design-system/synergy-design-system/issues/258))
+
+- Updated dependencies [[`89a2022`](https://github.com/synergy-design-system/synergy-design-system/commit/89a2022e49b8f7aad3469ac392e5e5601b7238e8)]:
+  - @synergy-design-system/assets@2.1.3
+  - @synergy-design-system/metadata@3.16.1
+
+## 3.16.0
+
+### Minor Changes
+
+- [#1301](https://github.com/synergy-design-system/synergy-design-system/pull/1301) [`672f061`](https://github.com/synergy-design-system/synergy-design-system/commit/672f061900dada6eb4bab892ec6bb945dde009be) Thanks [@schilchSICKAG](https://github.com/schilchSICKAG)! - Released on: 2026-06-22
+
+  feat: ✨ Allow the MCP server to create spritesheets for applications ([#923](https://github.com/synergy-design-system/synergy-design-system/issues/923))
+
+  This release adds a new tool `create-spritesheet` that can be used to generate synergy compatible SVG spritesheets. It also includes a prompt `/create-spritesheet` that can be used to create the spritesheet, write it to the filesystem and register the icon library.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @synergy-design-system/metadata@3.16.0
+
 ## 3.15.0
 
 ### Minor Changes

package/README.md

@@ -484,7 +484,7 @@ Resource identifier reference (exact values used by the server):
 
 ## Available Tools
 
-The MCP server currently registers 16 stable tools by default.
+The MCP server currently registers 17 stable tools by default.
 
 ### 1. `component-list`
 
@@ -735,11 +735,25 @@ Example prompts:
 - "Show me the setup instructions for tokens"
 - "Give me the Synergy assets setup and limitations"
 
+### 17. `create-spritesheet`
+
+**Description:** Creates a SVG sprite sheet for a provided set of icons. Only works with the Synergy 2025 icon set.
+
+**Parameters:**
+
+- `icons` (array, required): The icons to include in the sprite sheet. Must be valid icon keys from the Synergy 2025 icon set.
+
+**Example prompts:**
+
+- "Create a spritesheet containing these icons: star, home, settings"
+- "Generate a custom Synergy 2025 sprite sheet for my selected icons"
+- "Build an SVG sprite sheet from this icon list"
+
 ### Experimental Tools (Intent Policy)
 
 The following endpoints are experimental and are only registered when `experimentalFeatures.intentTools` is set to `true`.
 
-### 17. `intent-categories-list` (experimental)
+### 18. `intent-categories-list` (experimental)
 
 **Description:** List available intent categories in the intent policy layer.
 
@@ -752,7 +766,7 @@ The following endpoints are experimental and are only registered when `experimen
 - "List intent categories"
 - "Show experimental intent categories"
 
-### 18. `intent-component-guide` (experimental)
+### 19. `intent-component-guide` (experimental)
 
 **Description:** Answer the question: What can I do with a component in the intent system?
 
@@ -767,7 +781,7 @@ The following endpoints are experimental and are only registered when `experimen
 - "What can I do with syn-button?"
 - "Show intent guide for syn-button in react-web-components"
 
-### 19. `intent-component-validate` (experimental)
+### 20. `intent-component-validate` (experimental)
 
 **Description:** Answer the question: Do I use a component correctly for a specific intent?
 
@@ -784,7 +798,7 @@ The following endpoints are experimental and are only registered when `experimen
 - "Do I use syn-button right for action.submit?"
 - "Validate this syn-button markup for action.submit: <syn-button type=\"submit\" variant=\"filled\">Send</syn-button>"
 
-### 20. `intent-task-recommendations` (experimental)
+### 21. `intent-task-recommendations` (experimental)
 
 **Description:** Answer the question: What does Synergy provide for a specific task intent?
 
@@ -803,7 +817,7 @@ The following endpoints are experimental and are only registered when `experimen
 - "What does Synergy provide to submit a form?"
 - "Recommend components for action.submit"
 
-### 21. `intent-options` (experimental)
+### 22. `intent-options` (experimental)
 
 **Description:** Answer the question: What are my renderable options for a specific intent?
 
@@ -823,7 +837,7 @@ The following endpoints are experimental and are only registered when `experimen
 
 ## Available Prompts
 
-The MCP server currently registers 1 prompt.
+The MCP server currently registers 2 prompts.
 
 ### 1. `explain-component-rules`
 
@@ -839,6 +853,22 @@ The MCP server currently registers 1 prompt.
 - "What are the design and accessibility guidelines for syn-dialog?"
 - "Give me the usage guidance for syn-accordion"
 
+### 2. `create-spritesheet`
+
+**Description:** Generates a task-specific instruction prompt for creating an SVG sprite sheet from icon usage found in a folder, including registration and usage guidance.
+
+**Parameters:**
+
+- `name` (string, optional): The name of the generated sprite sheet. If not provided, the sprite sheet will be registered as the default library.
+- `path` (string, required): The path that should be searched for occurrences of `syn-icon` and `syn-icon-button` elements. Will search the project root if omitted.
+
+**Example prompts:**
+
+- "/mcp.synergy.create-spritesheet"
+- "Create a sprite sheet prompt for icons used in src/components"
+- "Generate create-spritesheet instructions for apps/demo with name app-icons"
+- "Help me produce a spritesheet from icon usage in my UI folder"
+
 ## Usage Examples
 
 ### Command Line Interface
@@ -960,6 +990,7 @@ src/
 │   └── index.ts         # Middleware module entrypoint
 ├── prompts/             # MCP prompt implementations
 │   ├── component-rules.ts
+│   ├── create-spritesheet.ts
 │   └── index.ts
 ├── resources/           # MCP resource implementations (static, read-only data)
 │   ├── component-list.ts
@@ -975,6 +1006,7 @@ src/
 │   ├── component-cluster-list.ts
 │   ├── component-info.ts
 │   ├── component-list.ts
+│   ├── create-spritesheet.ts
 │   ├── davinci-migration-info.ts
 │   ├── davinci-migration-list.ts
 │   ├── intent-categories-list.ts

package/dist/prompts/create-spritesheet.d.ts

@@ -0,0 +1,2 @@
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+export declare const createSpriteSheetPrompt: (server: McpServer) => void;

package/dist/prompts/create-spritesheet.js

@@ -0,0 +1,78 @@
+import { z } from 'zod';
+import { promptHandler, } from '../utilities/index.js';
+export const createSpriteSheetPrompt = (server) => {
+    server.registerPrompt('create-spritesheet', {
+        argsSchema: {
+            name: z
+                .string()
+                .optional()
+                .describe('The name of the generated sprite sheet. If not provided, the sprite sheet will be registered as the default library.'),
+            path: z
+                .string()
+                .optional()
+                .describe('A directory or file that should be searched for occurrences of icons. If omitted, searches in the whole project.'),
+        },
+        description: 'Creates a SVG sprite sheet for a provided set of icons. Only works with the Synergy 2025 icon set.',
+        title: 'Create Sprite Sheet',
+    }, promptHandler('create-spritesheet', async ({ name = 'default', path,
+    // eslint-disable-next-line @typescript-eslint/require-await
+     }) => {
+        // Ensure to use a valid name
+        const resolvedName = name?.trim() || 'default';
+        // Ensure to use a valid path
+        const resolvedPath = !path ? 'the entire project' : path.trim();
+        // Code sample to register the generated sprite sheet as an icon library in the Synergy Design System
+        const registrationCode = `
+import { registerIconLibrary } from '@synergy-design-system/components/components/icon/library.js';
+
+registerIconLibrary('${resolvedName}', {
+  resolver: name => \`/public/${resolvedName}.svg#\${name}\`,
+  spriteSheet: true,
+});
+      `;
+        // Final prompt content for the AI, instructing it to generate the sprite sheet and provide usage instructions
+        const content = `
+You are working with a Synergy Design System project.
+Task:
+Generate an SVG sprite sheet for all synergy icons used in ${resolvedPath}.
+
+Instructions:
+1. Search through the project (or the provided path if specified) and find all occurrences of \`<syn-icon>\` and \`<syn-icon-button>\`.
+2. Extract the value of the "name" attribute from each usage.
+3. If at least one icon name was extracted, call the "create-spritesheet" tool with the extracted icon names as the "icons" argument.
+   If no icons were found, do not call the tool and instead inform the user.
+
+After the tool returns:
+
+1. First, explain briefly that the SVG must be registered before usage.
+2. Second, provide the following code example for registering the sprite sheet:
+    \`\`\`js
+    ${registrationCode.trim()}
+    \`\`\`
+3. Then show how to use an icon:
+    \`\`\`html
+    ${resolvedName === 'default' ? '<syn-icon name="star"></syn-icon>' : `<syn-icon library="${resolvedName}" name="star"></syn-icon>`}
+    \`\`\`
+4. Save the generated SVG sprite sheet as "${resolvedName}.svg" in the public folder of the project, so it can be accessed at "/public/${resolvedName}.svg".
+5. Save the registration code in a file called "${resolvedName}-library.js" in the project, and make sure to import it in the main entry point of the application (e.g., index.js or main.js) to ensure the sprite sheet is registered when the application starts.
+6. If you cannot save files directly:
+   - Output the SVG and the registration code so the user can copy them manually.
+
+Important:
+
+- Call the "create-spritesheet" tool exactly once when valid icons are found.
+- Do not explain the steps.
+- Do not include intermediate results.
+- Do not claim that files were saved unless you are certain the operation succeeded.
+- The final answer must contain:
+  1. Registration instructions
+  2. Example usage
+  3. The generated SVG
+      `.trim();
+        return [
+            content,
+        ];
+    }, {
+        description: ({ name, path, }) => `Creates a SVG sprite sheet for all synergy icons found in ${path} and registers it as ${name ?? 'the default library'}.`,
+    }));
+};

package/dist/prompts/index.d.ts

@@ -1 +1,2 @@
 export * from './component-rules.js';
+export * from './create-spritesheet.js';

package/dist/prompts/index.js

@@ -1 +1,2 @@
 export * from './component-rules.js';
+export * from './create-spritesheet.js';

package/dist/tools/create-spritesheet.d.ts

@@ -0,0 +1,7 @@
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+/**
+ * Simple tool to create a spritesheet for a given set of icons.
+ * This can be used to generate a custom spritesheet for a specific set of icons, which can then be used in the Synergy Design System or in other projects.
+ * @param server - The MCP server instance to register the tool on.
+ */
+export declare const createSpriteSheetTool: (server: McpServer) => void;

package/dist/tools/create-spritesheet.js

@@ -0,0 +1,27 @@
+import { z } from 'zod';
+import { createSpriteSheet, } from '@synergy-design-system/assets';
+import { createToolAnnotations, toolHandler, } from '../utilities/index.js';
+/**
+ * Simple tool to create a spritesheet for a given set of icons.
+ * This can be used to generate a custom spritesheet for a specific set of icons, which can then be used in the Synergy Design System or in other projects.
+ * @param server - The MCP server instance to register the tool on.
+ */
+export const createSpriteSheetTool = (server) => {
+    server.registerTool('create-spritesheet', {
+        annotations: createToolAnnotations(),
+        description: 'Creates a SVG sprite sheet for a provided set of icons. Only works with the Synergy 2025 icon set.',
+        inputSchema: {
+            icons: z
+                .array(z.string())
+                .describe('The icons to include in the sprite sheet. Must be valid icon keys from the Synergy 2025 icon set.'),
+        },
+        title: 'Create Sprite Sheet',
+    }, toolHandler('create-spritesheet', async ({ icons,
+    // eslint-disable-next-line @typescript-eslint/require-await
+     }) => {
+        const iconset = createSpriteSheet(icons, 'sick2025');
+        return [
+            iconset,
+        ];
+    }));
+};

package/dist/tools/index.d.ts

@@ -3,6 +3,7 @@ export * from './asset-list.js';
 export * from './component-cluster-list.js';
 export * from './component-info.js';
 export * from './component-list.js';
+export * from './create-spritesheet.js';
 export * from './davinci-migration-info.js';
 export * from './davinci-migration-list.js';
 export * from './migration-info.js';

package/dist/tools/index.js

@@ -3,6 +3,7 @@ export * from './asset-list.js';
 export * from './component-cluster-list.js';
 export * from './component-info.js';
 export * from './component-list.js';
+export * from './create-spritesheet.js';
 export * from './davinci-migration-info.js';
 export * from './davinci-migration-list.js';
 export * from './migration-info.js';

package/package.json

@@ -9,12 +9,13 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
     "zod": "^4.4.3",
-    "@synergy-design-system/metadata": "3.15.0"
+    "@synergy-design-system/assets": "2.1.3",
+    "@synergy-design-system/metadata": "3.16.1"
   },
   "description": "MCP Server for the Synergy Design System",
   "devDependencies": {
     "@toon-format/toon": "^2.1.0",
-    "@types/node": "^24.12.4",
+    "@types/node": "^24.13.2",
     "eslint": "^9.39.4",
     "tiktoken": "^1.0.22",
     "typescript": "^5.9.3",
@@ -56,7 +57,7 @@
     "directory": "packages/mcp"
   },
   "type": "module",
-  "version": "3.15.0",
+  "version": "3.16.1",
   "scripts": {
     "debug": "npx @modelcontextprotocol/inspector",
     "build": "pnpm run clean && tsc",