@nysds/mcp-server 1.21.0 → 1.22.0

package/dist/resources/frameworks.js

@@ -0,0 +1,104 @@
+/**
+ * Framework Resources
+ *
+ * MCP resources for NYSDS framework packages (@nysds/react, @nysds/vue,
+ * @nysds/angular).
+ *
+ * Resources:
+ * - nysds://frameworks - Index of framework packages with version and guide URI
+ * - nysds://frameworks/react - @nysds/react guide (synced from its README)
+ * - nysds://frameworks/vue - @nysds/vue guide (synced from its README)
+ * - nysds://frameworks/angular - @nysds/angular guide (synced from its README)
+ */
+import { readFileSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { getFrameworksIndex } from "../lib/frameworks-data.js";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const GUIDES_DIR = join(__dirname, "../../data/guides/frameworks");
+function loadFrameworkGuide(framework) {
+    try {
+        return readFileSync(join(GUIDES_DIR, `${framework}.md`), "utf-8");
+    }
+    catch {
+        return `Framework guide not found: ${framework}. Run "npm run sync:guides -w @nysds/mcp-server".`;
+    }
+}
+export function registerFrameworkResources(server) {
+    // nysds://frameworks - Index of framework packages
+    server.resource("frameworks", "nysds://frameworks", {
+        description: "Index of NYSDS framework packages (@nysds/react, @nysds/vue, @nysds/angular) with their published version and guide resource URI",
+        mimeType: "application/json",
+    }, async () => {
+        const index = getFrameworksIndex();
+        const list = [
+            {
+                id: "react",
+                packageName: index.react.packageName,
+                version: index.react.version,
+                guideUri: "nysds://frameworks/react",
+            },
+            {
+                id: "vue",
+                packageName: index.vue.packageName,
+                version: index.vue.version,
+                guideUri: "nysds://frameworks/vue",
+            },
+            {
+                id: "angular",
+                packageName: index.angular.packageName,
+                version: index.angular.version,
+                guideUri: "nysds://frameworks/angular",
+            },
+        ];
+        return {
+            contents: [
+                {
+                    uri: "nysds://frameworks",
+                    mimeType: "application/json",
+                    text: JSON.stringify(list, null, 2),
+                },
+            ],
+        };
+    });
+    // nysds://frameworks/react - @nysds/react guide
+    server.resource("frameworks-react", "nysds://frameworks/react", {
+        description: "@nysds/react install, usage, forms, SSR, and troubleshooting guide",
+        mimeType: "text/markdown",
+    }, async () => ({
+        contents: [
+            {
+                uri: "nysds://frameworks/react",
+                mimeType: "text/markdown",
+                text: loadFrameworkGuide("react"),
+            },
+        ],
+    }));
+    // nysds://frameworks/vue - @nysds/vue guide
+    server.resource("frameworks-vue", "nysds://frameworks/vue", {
+        description: "@nysds/vue install, usage, v-model forms, SSR, and troubleshooting guide",
+        mimeType: "text/markdown",
+    }, async () => ({
+        contents: [
+            {
+                uri: "nysds://frameworks/vue",
+                mimeType: "text/markdown",
+                text: loadFrameworkGuide("vue"),
+            },
+        ],
+    }));
+    // nysds://frameworks/angular - @nysds/angular guide
+    server.resource("frameworks-angular", "nysds://frameworks/angular", {
+        description: "@nysds/angular install, usage, forms, SSR, and troubleshooting guide",
+        mimeType: "text/markdown",
+    }, async () => ({
+        contents: [
+            {
+                uri: "nysds://frameworks/angular",
+                mimeType: "text/markdown",
+                text: loadFrameworkGuide("angular"),
+            },
+        ],
+    }));
+}

package/dist/resources/guides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guides.d.ts","sourceRoot":"","sources":["../../src/resources/guides.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAyE9D"}
+{"version":3,"file":"guides.d.ts","sourceRoot":"","sources":["../../src/resources/guides.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAEzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAoF9D"}

package/dist/resources/guides.js

@@ -56,7 +56,18 @@ Then use them in HTML:
 
 ## Framework Integration
 
-For framework-specific setup, use the \`get_guide\` tool with \`topic: "framework"\` and a \`framework\` parameter (angular, react, dotnet, drupal, or vanilla).
+For framework-specific setup, use the \`get_guide\` tool with a \`topic\` and a \`framework\` parameter (angular, react, vue, dotnet, drupal, or vanilla).
+
+React, Vue, and Angular are first-class packages, not wrapper snippets:
+\`@nysds/react\` (\`npm install @nysds/react\`), \`@nysds/vue\`
+(\`npm install @nysds/vue\`), and \`@nysds/angular\`
+(\`npm install @nysds/angular @nysds/components\`) generate typed
+components, props, and events directly from this design system's
+manifest. See the \`nysds://frameworks\` resource for their current
+published versions, \`nysds://frameworks/react\`, \`nysds://frameworks/vue\`, and
+\`nysds://frameworks/angular\` for their full guides, and pass
+\`framework: "react"\` or \`"angular"\` to \`get_component\` for
+per-component import lines and framework-specific code examples.
 
 ## Resources
 

package/dist/resources/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAKzE,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAIzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAMzE,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAKzD"}

package/dist/resources/index.js

@@ -6,8 +6,10 @@
 import { registerComponentResources } from "./components.js";
 import { registerTokenResources } from "./tokens.js";
 import { registerGuideResources } from "./guides.js";
+import { registerFrameworkResources } from "./frameworks.js";
 export function registerResources(server) {
     registerComponentResources(server);
     registerTokenResources(server);
     registerGuideResources(server);
+    registerFrameworkResources(server);
 }

package/dist/tools/component-tools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-tools.d.ts","sourceRoot":"","sources":["../../src/tools/component-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAIzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA+G9D"}
+{"version":3,"file":"component-tools.d.ts","sourceRoot":"","sources":["../../src/tools/component-tools.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAYzE,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CA2I9D"}

package/dist/tools/component-tools.js

@@ -10,6 +10,8 @@
 import { z } from "zod";
 import { getComponent, getAllComponents } from "../lib/cem-parser.js";
 import { searchComponents } from "../lib/search.js";
+import { buildExampleSnippets, } from "../lib/framework-snippets.js";
+import { buildAngularUsageNotes, buildReactUsageNotes, } from "../lib/framework-usage.js";
 export function registerComponentTools(server) {
     // find_components - Search or list all components
     server.tool("find_components", "Search for NYSDS components by name or description. Omit query to list all components.", {
@@ -51,15 +53,19 @@ export function registerComponentTools(server) {
         };
     });
     // get_component - Full documentation for a specific component
-    server.tool("get_component", "Get full documentation for a specific NYSDS component including properties, events, slots, and CSS custom properties", {
+    server.tool("get_component", "Get full documentation for a specific NYSDS component including properties, events, slots, and CSS custom properties. Set framework to 'react' or 'angular' to get that framework's import line, event-prop naming, and forms guidance alongside HTML/React/Angular code examples.", {
         tagName: z
             .string()
             .describe("The tag name of the component (e.g., 'nys-button')"),
         includeExamples: z
             .boolean()
             .default(false)
-            .describe("Include HTML code examples from component JSDoc. Set to true when you need usage patterns."),
-    }, async ({ tagName, includeExamples }) => {
+            .describe("Include code examples from component JSDoc. Set to true when you need usage patterns. Each example carries html, react, and angular snippets."),
+        framework: z
+            .enum(["html", "react", "angular"])
+            .default("html")
+            .describe("Which framework to optimize the response for. 'html' (default) returns plain custom-element usage. 'react' and 'angular' add framework-specific usage notes (import line, event-prop naming, forms binding) and, for a form-control component, transform that framework's example snippets into its idiomatic controlled/reactive-forms pattern."),
+    }, async ({ tagName, includeExamples, framework }) => {
         const component = getComponent(tagName);
         if (!component) {
             return {
@@ -76,16 +82,25 @@ export function registerComponentTools(server) {
         // Attributes contains the HTML API, members duplicates this plus private methods
         const { 
         // members: _members,
-        examples, ...componentWithoutMembers } = component;
+        examples, formControl, ...componentWithoutMembers } = component;
+        const usage = {};
+        if (framework === "react") {
+            usage.react = buildReactUsageNotes(tagName, component.name, formControl);
+        }
+        else if (framework === "angular") {
+            usage.angular = buildAngularUsageNotes(tagName, component.name, formControl);
+        }
         return {
             content: [
                 {
                     type: "text",
                     text: JSON.stringify({
                         ...componentWithoutMembers,
+                        formControl,
                         examples: includeExamples && examples && examples.length > 0
-                            ? examples
+                            ? buildExampleSnippets(examples, framework, formControl)
                             : undefined,
+                        usage: Object.keys(usage).length > 0 ? usage : undefined,
                         resourceUri: `nysds://component/${tagName}`,
                     }, null, 2),
                 },

package/dist/tools/guide-tools.js

@@ -56,7 +56,7 @@ export function registerGuideTools(server) {
         ])
             .describe("The guide topic to retrieve"),
         framework: z
-            .enum(["angular", "react", "dotnet", "drupal", "vanilla"])
+            .enum(["angular", "react", "vue", "dotnet", "drupal", "vanilla"])
             .optional()
             .describe("When provided, returns framework-specific setup guide instead of the topic guide. Use with topic 'installation' to get framework install instructions."),
     }, async ({ topic, framework }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/mcp-server",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "MCP server for the New York State Design System. Exposes components, tokens, and documentation to AI assistants.",
   "type": "module",
   "bin": {
@@ -20,18 +20,20 @@
   ],
   "scripts": {
     "copy-data": "mkdir -p data/cem data/tokens && cp ../../custom-elements.json data/cem/ && cp ../tokens/src/tokens.json data/tokens/ && cp ../tokens/dist/tokens.css data/tokens/",
-    "build": "npm run copy-data && tsc",
+    "sync:guides": "node scripts/sync-guides.mjs",
+    "build": "npm run copy-data && npm run sync:guides && tsc",
     "dev": "tsc --watch",
     "start": "node dist/index.js",
     "inspect": "npx -y @modelcontextprotocol/inspector node dist/index.js"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.26.0",
+    "@nysds/codegen": "^1.20.1",
     "zod": "^3.25"
   },
   "devDependencies": {
-    "@nysds/styles": "^1.21.0",
-    "@nysds/tokens": "^1.21.0",
+    "@nysds/styles": "^1.22.0",
+    "@nysds/tokens": "^1.22.0",
     "@types/node": "^22.0.0",
     "typescript": "^5.9.3"
   },