@primer/mcp 0.0.5 → 0.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-export { s as server } from './server-Ccnupv1s.js';
+export { s as server } from './server-CjO5UCV7.js';
 import '@modelcontextprotocol/sdk/server/mcp.js';
 import 'cheerio';
 import 'zod';

package/dist/primer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primer.d.ts","sourceRoot":"","sources":["../src/primer.ts"],"names":[],"mappings":"AAGA,KAAK,SAAS,GAAG;IACf,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AA+BD,iBAAS,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAE1C;AAED,KAAK,OAAO,GAAG;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AA6CD,iBAAS,YAAY,IAAI,KAAK,CAAC,OAAO,CAAC,CAEtC;AAED,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACvB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CACvB,CAAA;AAUD,iBAAS,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,CAEhC;AAED,OAAO,EAAC,cAAc,EAAE,YAAY,EAAE,SAAS,EAAC,CAAA"}
+{"version":3,"file":"primer.d.ts","sourceRoot":"","sources":["../src/primer.ts"],"names":[],"mappings":"AAGA,KAAK,SAAS,GAAG;IACf,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AA2BD,iBAAS,cAAc,IAAI,KAAK,CAAC,SAAS,CAAC,CAE1C;AAED,KAAK,OAAO,GAAG;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AA6CD,iBAAS,YAAY,IAAI,KAAK,CAAC,OAAO,CAAC,CAEtC;AAED,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;IACvB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;CACvB,CAAA;AAUD,iBAAS,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,CAEhC;AAED,OAAO,EAAC,cAAc,EAAE,YAAY,EAAE,SAAS,EAAC,CAAA"}

package/dist/{server-BzATDQ5A.js → server-CjO5UCV7.js}

@@ -1,6 +1,6 @@
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import * as cheerio from 'cheerio';
-import { z } from 'zod';
+import * as z from 'zod';
 import TurndownService from 'turndown';
 import componentsMetadata from '@primer/react/generated/components.json' with { type: 'json' };
 import octicons from '@primer/octicons/build/data.json' with { type: 'json' };
@@ -24,9 +24,6 @@ function idToSlug(id) {
   if (id === 'dialog_v2') {
     return 'dialog';
   }
-  if (id.startsWith('skeleton')) {
-    return 'skeleton-loaders';
-  }
   return id.replaceAll('_', '-');
 }
 const components = Object.entries(componentsMetadata.components).map(([id, component]) => {
@@ -163,7 +160,7 @@ function serialize(value) {
   }).join('\n');
 }
 
-var version = "0.1.0-rc.1";
+var version = "0.2.0";
 var packageJson = {
 	version: version};
 
@@ -176,7 +173,9 @@ const turndownService = new TurndownService();
 // -----------------------------------------------------------------------------
 // Project setup
 // -----------------------------------------------------------------------------
-server.tool('init', 'Setup or create a project that includes Primer React', async () => {
+server.registerTool('init', {
+  description: 'Setup or create a project that includes Primer React'
+}, async () => {
   const url = new URL(`/product/getting-started/react`, 'https://primer.style');
   const response = await fetch(url);
   if (!response.ok) {
@@ -219,7 +218,9 @@ ${text}
 // -----------------------------------------------------------------------------
 // Components
 // -----------------------------------------------------------------------------
-server.tool('list_components', 'List all of the components available from Primer React', async () => {
+server.registerTool('list_components', {
+  description: 'List all of the components available from Primer React'
+}, async () => {
   const components = listComponents().map(component => {
     return `- ${component.name}`;
   });
@@ -234,8 +235,11 @@ You can use the \`get_component\` tool to get more information about a specific
     }]
   };
 });
-server.tool('get_component', 'Retrieve documentation and usage details for a specific React component from the @primer/react package by its name. This tool provides the official Primer documentation for any listed component, making it easy to inspect, reuse, or integrate components in your project.', {
-  name: z.string().describe('The name of the component to retrieve')
+server.registerTool('get_component', {
+  description: 'Retrieve documentation and usage details for a specific React component from the @primer/react package by its name. This tool provides the official Primer documentation for any listed component, making it easy to inspect, reuse, or integrate components in your project.',
+  inputSchema: {
+    name: z.string().describe('The name of the component to retrieve')
+  }
 }, async ({
   name
 }) => {
@@ -245,12 +249,26 @@ server.tool('get_component', 'Retrieve documentation and usage details for a spe
   });
   if (!match) {
     return {
-      content: [{
-        type: 'text',
-        text: `There is no component named \`${name}\` in the @primer/react package. For a full list of components, use the \`list_components\` tool.`
-      }]
+      isError: true,
+      errorMessage: `There is no component named \`${name}\` in the @primer/react package. For a full list of components, use the \`list_components\` tool.`,
+      content: []
     };
   }
+  const llmsUrl = new URL(`/product/components/${match.slug}/llms.txt`, 'https://primer.style');
+  const llmsResponse = await fetch(llmsUrl);
+  if (llmsResponse.ok) {
+    try {
+      const llmsText = await llmsResponse.text();
+      return {
+        content: [{
+          type: 'text',
+          text: llmsText
+        }]
+      };
+    } catch (_) {
+      // If there's an error fetching or processing the llms.txt, we fall back to the regular documentation
+    }
+  }
   const url = new URL(`/product/components/${match.slug}`, 'https://primer.style');
   const response = await fetch(url);
   if (!response.ok) {
@@ -278,8 +296,11 @@ ${text}`
     }]
   };
 });
-server.tool('get_component_examples', 'Get examples for how to use a component from Primer React', {
-  name: z.string().describe('The name of the component to retrieve')
+server.registerTool('get_component_examples', {
+  description: 'Get examples for how to use a component from Primer React',
+  inputSchema: {
+    name: z.string().describe('The name of the component to retrieve')
+  }
 }, async ({
   name
 }) => {
@@ -323,8 +344,11 @@ ${text}`
     }]
   };
 });
-server.tool('get_component_usage_guidelines', 'Get usage information for how to use a component from Primer', {
-  name: z.string().describe('The name of the component to retrieve')
+server.registerTool('get_component_usage_guidelines', {
+  description: 'Get usage information for how to use a component from Primer',
+  inputSchema: {
+    name: z.string().describe('The name of the component to retrieve')
+  }
 }, async ({
   name
 }) => {
@@ -376,8 +400,11 @@ ${text}`
     }]
   };
 });
-server.tool('get_component_accessibility_guidelines', 'Retrieve accessibility guidelines and best practices for a specific component from the @primer/react package by its name. Use this tool to get official accessibility recommendations, usage tips, and requirements to ensure your UI components are inclusive and meet accessibility standards.', {
-  name: z.string().describe('The name of the component to retrieve')
+server.registerTool('get_component_accessibility_guidelines', {
+  description: 'Retrieve accessibility guidelines and best practices for a specific component from the @primer/react package by its name. Use this tool to get official accessibility recommendations, usage tips, and requirements to ensure your UI components are inclusive and meet accessibility standards.',
+  inputSchema: {
+    name: z.string().describe('The name of the component to retrieve')
+  }
 }, async ({
   name
 }) => {
@@ -433,7 +460,9 @@ ${text}`
 // -----------------------------------------------------------------------------
 // Patterns
 // -----------------------------------------------------------------------------
-server.tool('list_patterns', 'List all of the patterns available from Primer React', async () => {
+server.registerTool('list_patterns', {
+  description: 'List all of the patterns available from Primer React'
+}, async () => {
   const patterns = listPatterns().map(pattern => {
     return `- ${pattern.name}`;
   });
@@ -446,8 +475,11 @@ ${patterns.join('\n')}`
     }]
   };
 });
-server.tool('get_pattern', 'Get a specific pattern by name', {
-  name: z.string().describe('The name of the pattern to retrieve')
+server.registerTool('get_pattern', {
+  description: 'Get a specific pattern by name',
+  inputSchema: {
+    name: z.string().describe('The name of the pattern to retrieve')
+  }
 }, async ({
   name
 }) => {
@@ -495,7 +527,9 @@ ${text}`
 // -----------------------------------------------------------------------------
 // Design Tokens
 // -----------------------------------------------------------------------------
-server.tool('list_tokens', 'List all of the design tokens available from Primer', async () => {
+server.registerTool('list_tokens', {
+  description: 'List all of the design tokens available from Primer'
+}, async () => {
   let text = 'Below is a list of all design tokens available from Primer. Tokens are used in CSS and CSS Modules. To refer to the CSS Custom Property for a design token, wrap it in var(--{name-of-token}). To learn how to use a specific token, use a corresponding usage tool for the category of the token. For example, if a token is a color token look for the get_color_usage tool. \n\n';
   text += serialize(tokens);
   return {
@@ -509,7 +543,9 @@ server.tool('list_tokens', 'List all of the design tokens available from Primer'
 // -----------------------------------------------------------------------------
 // Foundations
 // -----------------------------------------------------------------------------
-server.tool('get_color_usage', 'Get the guidelines for how to apply color to a user interface', async () => {
+server.registerTool('get_color_usage', {
+  description: 'Get the guidelines for how to apply color to a user interface'
+}, async () => {
   const url = new URL(`/product/getting-started/foundations/color-usage`, 'https://primer.style');
   const response = await fetch(url);
   if (!response.ok) {
@@ -536,7 +572,9 @@ server.tool('get_color_usage', 'Get the guidelines for how to apply color to a u
     }]
   };
 });
-server.tool('get_typography_usage', 'Get the guidelines for how to apply typography to a user interface', async () => {
+server.registerTool('get_typography_usage', {
+  description: 'Get the guidelines for how to apply typography to a user interface'
+}, async () => {
   const url = new URL(`/product/getting-started/foundations/typography`, 'https://primer.style');
   const response = await fetch(url);
   if (!response.ok) {
@@ -567,7 +605,9 @@ server.tool('get_typography_usage', 'Get the guidelines for how to apply typogra
 // -----------------------------------------------------------------------------
 // Icons
 // -----------------------------------------------------------------------------
-server.tool('list_icons', 'List all of the icons (octicons) available from Primer Octicons React', async () => {
+server.registerTool('list_icons', {
+  description: 'List all of the icons (octicons) available from Primer Octicons React'
+}, async () => {
   const icons = listIcons().map(icon => {
     const keywords = icon.keywords.map(keyword => {
       return `<keyword>${keyword}</keyword>`;
@@ -588,9 +628,12 @@ You can use the \`get_icon\` tool to get more information about a specific icon.
     }]
   };
 });
-server.tool('get_icon', 'Get a specific icon (octicon) by name from Primer', {
-  name: z.string().describe('The name of the icon to retrieve'),
-  size: z.string().optional().describe('The size of the icon to retrieve, e.g. "16"').default('16')
+server.registerTool('get_icon', {
+  description: 'Get a specific icon (octicon) by name from Primer',
+  inputSchema: {
+    name: z.string().describe('The name of the icon to retrieve'),
+    size: z.string().optional().describe('The size of the icon to retrieve, e.g. "16"').default('16')
+  }
 }, async ({
   name,
   size
@@ -638,7 +681,9 @@ ${text}`
 // -----------------------------------------------------------------------------
 // Coding guidelines
 // -----------------------------------------------------------------------------
-server.tool('primer_coding_guidelines', 'Get the guidelines when writing code that uses Primer or for UI code that you are creating', async () => {
+server.registerTool('primer_coding_guidelines', {
+  description: 'Get the guidelines when writing code that uses Primer or for UI code that you are creating'
+}, async () => {
   return {
     content: [{
       type: 'text',
@@ -682,10 +727,13 @@ The following list of coding guidelines must be followed:
  *
  *
  **/
-server.tool('review_alt_text', 'Evaluates image alt text against accessibility best practices and context relevance.', {
-  surroundingText: z.string().describe('Text surrounding the image, relevant to the image.'),
-  alt: z.string().describe('The alt text of the image being evaluated'),
-  image: z.union([z.instanceof(File).describe('The image src file being evaluated'), z.string().url().describe('The URL of the image src being evaluated'), z.string().describe('The file path of the image src being evaluated')]).describe('The image file, file path, or URL being evaluated')
+server.registerTool('review_alt_text', {
+  description: 'Evaluates image alt text against accessibility best practices and context relevance.',
+  inputSchema: {
+    surroundingText: z.string().describe('Text surrounding the image, relevant to the image.'),
+    alt: z.string().describe('The alt text of the image being evaluated'),
+    image: z.string().describe('The image URL or file path being evaluated')
+  }
 }, async ({
   surroundingText,
   alt,

package/dist/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,yCAAyC,CAAA;AASjE,QAAA,MAAM,MAAM,WAGV,CAAA;AAoqBF,OAAO,EAAC,MAAM,EAAC,CAAA"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,yCAAyC,CAAA;AAUjE,QAAA,MAAM,MAAM,WAGV,CAAA;AAutBF,OAAO,EAAC,MAAM,EAAC,CAAA"}

package/dist/stdio.js

@@ -1,5 +1,5 @@
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
-import { s as server } from './server-Ccnupv1s.js';
+import { s as server } from './server-CjO5UCV7.js';
 import '@modelcontextprotocol/sdk/server/mcp.js';
 import 'cheerio';
 import 'zod';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/mcp",
   "description": "An MCP server that connects AI tools to the Primer Design System",
-  "version": "0.0.5",
+  "version": "0.2.0",
   "type": "module",
   "bin": {
     "mcp": "./bin/mcp.js"
@@ -22,6 +22,10 @@
     "src",
     "README.md"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/primer/react.git"
+  },
   "scripts": {
     "clean": "rimraf dist",
     "build": "rollup -c",
@@ -29,28 +33,28 @@
     "watch": "rollup -c -w"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
-    "@modelcontextprotocol/sdk": "^1.12.0",
+    "@babel/runtime": "^7.28.6",
+    "@modelcontextprotocol/sdk": "^1.24.0",
     "@primer/octicons": "^19.15.5",
     "@primer/primitives": "10.x || 11.x",
-    "@primer/react": "^38.0.0-rc.3",
+    "@primer/react": "^38.12.0",
     "cheerio": "^1.0.0",
     "turndown": "^7.2.0",
-    "zod": "^3.23.8"
+    "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/plugin-transform-runtime": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/core": "^7.29.0",
+    "@babel/plugin-transform-runtime": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-typescript": "^7.28.5",
     "@modelcontextprotocol/inspector": "^0.16.6",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@types/turndown": "^5.0.5",
     "rimraf": "^6.0.1",
-    "rollup": "^4.50.1",
+    "rollup": "^4.56.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.9.2"
   }

package/src/primer.ts

@@ -21,10 +21,6 @@ function idToSlug(id: string): string {
     return 'dialog'
   }
 
-  if (id.startsWith('skeleton')) {
-    return 'skeleton-loaders'
-  }
-
   return id.replaceAll('_', '-')
 }