@primer/mcp 0.3.3 → 0.4.0-rc.2d1806208

package/dist/stdio.js

@@ -1,23 +1,7 @@
-import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
-import { s as server } from './server-C2QaEv-c.js';
-import '@modelcontextprotocol/sdk/server/mcp.js';
-import 'cheerio';
-import 'zod';
-import 'turndown';
-import '@primer/react/generated/components.json' with { type: 'json' };
-import '@primer/octicons/build/data.json' with { type: 'json' };
-import 'node:fs';
-import 'node:module';
-import 'child_process';
-import '@primer/primitives/dist/docs/base/motion/motion.json' with { type: 'json' };
-import '@primer/primitives/dist/docs/base/size/size.json' with { type: 'json' };
-import '@primer/primitives/dist/docs/base/typography/typography.json' with { type: 'json' };
-import '@primer/primitives/dist/docs/functional/size/border.json' with { type: 'json' };
-import '@primer/primitives/dist/docs/functional/size/size-coarse.json' with { type: 'json' };
-import '@primer/primitives/dist/docs/functional/size/size-fine.json' with { type: 'json' };
-import '@primer/primitives/dist/docs/functional/size/size.json' with { type: 'json' };
-import '@primer/primitives/dist/docs/functional/themes/light.json' with { type: 'json' };
-import '@primer/primitives/dist/docs/functional/typography/typography.json' with { type: 'json' };
-
+import { t as server } from "./server-BTJ9W5jN.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+//#region src/transports/stdio.ts
 const transport = new StdioServerTransport();
 await server.connect(transport);
+//#endregion
+export {};

package/dist/transports/stdio.d.ts

@@ -0,0 +1 @@
+export { };

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.3.3",
+  "version": "0.4.0-rc.2d1806208",
   "type": "module",
   "bin": {
     "mcp": "./bin/mcp.js"
@@ -28,34 +28,25 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "rollup -c",
+    "build": "rolldown -c",
     "type-check": "tsc --noEmit",
-    "watch": "rollup -c -w"
+    "watch": "rolldown -c -w"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.6",
     "@modelcontextprotocol/sdk": "^1.24.0",
     "@primer/octicons": "^19.15.5",
     "@primer/primitives": "10.x || 11.x",
-    "@primer/react": "^38.20.0",
+    "@primer/react": "^38.30.0",
     "cheerio": "^1.0.0",
     "turndown": "^7.2.0",
     "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@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.1.0",
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
     "@types/turndown": "^5.0.5",
     "rimraf": "^6.0.1",
-    "rollup": "^4.59.0",
-    "rollup-plugin-typescript2": "^0.36.0",
+    "rolldown": "^1.1.2",
+    "rolldown-plugin-dts": "^0.26.0",
     "typescript": "^6.0.3"
   }
 }

package/src/primer.ts

@@ -40,48 +40,81 @@ function listComponents(): Array<Component> {
 type Pattern = {
   id: string
   name: string
+  // 'scenario' maps to the /product/scenario-patterns/ base path, 'ui' to /product/ui-patterns/
+  category: 'scenario' | 'ui'
 }
 
+// Scenario patterns are listed first so name resolution favours them over UI patterns.
 const patterns: Array<Pattern> = [
+  {
+    id: 'copy',
+    name: 'Copy',
+    category: 'scenario',
+  },
+  {
+    id: 'delete',
+    name: 'Delete',
+    category: 'scenario',
+  },
+  {
+    id: 'filter',
+    name: 'Filter',
+    category: 'scenario',
+  },
+  {
+    id: 'search',
+    name: 'Search',
+    category: 'scenario',
+  },
   {
     id: 'data-visualization',
     name: 'Data Visualization',
+    category: 'ui',
   },
   {
     id: 'degraded-experiences',
     name: 'Degraded Experiences',
+    category: 'ui',
   },
   {
     id: 'empty-states',
     name: 'Empty States',
+    category: 'ui',
   },
   {
     id: 'feature-onboarding',
     name: 'Feature Onboarding',
+    category: 'ui',
   },
   {
     id: 'forms',
     name: 'Forms',
+    category: 'ui',
   },
   {
     id: 'loading',
     name: 'Loading',
+    category: 'ui',
   },
   {
     id: 'navigation',
     name: 'Navigation',
+    category: 'ui',
   },
   {
     id: 'notification-messaging',
     name: 'Notification message',
+    category: 'ui',
   },
   {
     id: 'progressive-disclosure',
     name: 'Progressive disclosure',
+    category: 'ui',
   },
   {
     id: 'saving',
     name: 'Saving',
+    category: 'ui',
   },
 ]
 

package/src/server.ts

@@ -39,6 +39,7 @@ server.registerTool(
   'init',
   {
     description: 'Setup or create a project that includes Primer React',
+    annotations: {readOnlyHint: true},
   },
   async () => {
     const url = new URL(`/product/getting-started/react`, 'https://primer.style')
@@ -92,7 +93,7 @@ ${text}
 // -----------------------------------------------------------------------------
 server.registerTool(
   'list_components',
-  {description: 'List all of the components available from Primer React'},
+  {description: 'List all of the components available from Primer React', annotations: {readOnlyHint: true}},
   async () => {
     const components = listComponents().map(component => {
       return `- ${component.name}`
@@ -120,6 +121,7 @@ server.registerTool(
     inputSchema: {
       name: z.string().describe('The name of the component to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const components = listComponents()
@@ -166,6 +168,7 @@ server.registerTool(
     inputSchema: {
       name: z.string().describe('The name of the component to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const components = listComponents()
@@ -226,6 +229,7 @@ server.registerTool(
     inputSchema: {
       name: z.string().describe('The name of the component to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const components = listComponents()
@@ -298,6 +302,7 @@ server.registerTool(
     inputSchema: {
       name: z.string().describe('The name of the component to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const components = listComponents()
@@ -367,18 +372,28 @@ ${text}`,
 // -----------------------------------------------------------------------------
 server.registerTool(
   'list_patterns',
-  {description: 'List all of the patterns available from Primer React'},
+  {
+    description:
+      'List all of the patterns available from Primer React. Scenario patterns describe specific user tasks (copy, delete, filter, search). Prefer a scenario pattern when one fits the task, and fall back to the more generic UI patterns otherwise.',
+    annotations: {readOnlyHint: true},
+  },
   async () => {
-    const patterns = listPatterns().map(pattern => {
-      return `- ${pattern.name}`
-    })
+    const all = listPatterns()
+    const scenario = all.filter(pattern => pattern.category === 'scenario').map(pattern => `- ${pattern.name}`)
+    const ui = all.filter(pattern => pattern.category === 'ui').map(pattern => `- ${pattern.name}`)
     return {
       content: [
         {
           type: 'text',
-          text: `The following patterns are available in the @primer/react in TypeScript projects:
+          text: `The following patterns are available from \`@primer/react\` for use in TypeScript projects. Scenario patterns describe specific user tasks. Prefer a scenario pattern when one fits the task, and fall back to the UI patterns otherwise.
 
-${patterns.join('\n')}`,
+## Scenario patterns
+
+${scenario.join('\n')}
+
+## UI patterns
+
+${ui.join('\n')}`,
         },
       ],
     }
@@ -388,16 +403,19 @@ ${patterns.join('\n')}`,
 server.registerTool(
   'get_pattern',
   {
-    description: 'Get a specific pattern by name',
+    description:
+      'Get a specific pattern by name. Scenario patterns describe specific user tasks (copy, delete, filter, search). Prefer a scenario pattern when one fits the task, and fall back to the more generic UI patterns otherwise.',
     inputSchema: {
       name: z.string().describe('The name of the pattern to retrieve'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name}) => {
     const patterns = listPatterns()
-    const match = patterns.find(pattern => {
-      return pattern.name === name
-    })
+    // Resolve scenario patterns first so a name clash favours the scenario pattern.
+    const match =
+      patterns.find(pattern => pattern.category === 'scenario' && pattern.name === name) ??
+      patterns.find(pattern => pattern.name === name)
     if (!match) {
       return {
         content: [
@@ -409,7 +427,8 @@ server.registerTool(
       }
     }
 
-    const url = new URL(`/product/ui-patterns/${match.id}`, 'https://primer.style')
+    const basePath = match.category === 'scenario' ? 'scenario-patterns' : 'ui-patterns'
+    const url = new URL(`/product/${basePath}/${match.id}`, 'https://primer.style')
     const response = await fetch(url)
     if (!response.ok) {
       throw new Error(`Failed to fetch ${url} - ${response.statusText}`)
@@ -469,6 +488,7 @@ server.registerTool(
         .default(15)
         .describe('Maximum results to return to stay within context limits'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({query, group, limit}) => {
     // Resolve group via aliases
@@ -566,6 +586,7 @@ server.registerTool(
     inputSchema: {
       groups: z.array(z.string()).describe('Array of group names (e.g., ["overlay", "shadow", "focus"])'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({groups}) => {
     // Normalize and resolve aliases
@@ -608,6 +629,7 @@ server.registerTool(
   {
     description:
       'CRITICAL: CALL THIS FIRST. Provides the logic matrix and the list of valid group names. You cannot search accurately without this map.',
+    annotations: {readOnlyHint: true},
   },
   async () => {
     const groups = listTokenGroups()
@@ -631,6 +653,7 @@ server.registerTool(
   {
     description:
       'Provides "Golden Example" CSS for core patterns: Button (Interactions) and Stack (Layout). Use this to understand how to apply the Logic Matrix, Motion, and Spacing scales.',
+    annotations: {readOnlyHint: true},
   },
   async () => {
     const customPatterns = getTokenUsagePatternsText()
@@ -659,6 +682,7 @@ server.registerTool(
     description:
       'REQUIRED FINAL STEP. Use this to validate your CSS. You cannot complete a task involving CSS without a successful run of this tool.',
     inputSchema: {css: z.string()},
+    annotations: {readOnlyHint: true},
   },
   async ({css}) => {
     try {
@@ -694,7 +718,7 @@ server.registerTool(
 // -----------------------------------------------------------------------------
 server.registerTool(
   'get_color_usage',
-  {description: 'Get the guidelines for how to apply color to a user interface'},
+  {description: 'Get the guidelines for how to apply color to a user interface', annotations: {readOnlyHint: true}},
   async () => {
     const url = new URL(`/product/getting-started/foundations/color-usage`, 'https://primer.style')
     const response = await fetch(url)
@@ -732,7 +756,10 @@ server.registerTool(
 
 server.registerTool(
   'get_typography_usage',
-  {description: 'Get the guidelines for how to apply typography to a user interface'},
+  {
+    description: 'Get the guidelines for how to apply typography to a user interface',
+    annotations: {readOnlyHint: true},
+  },
   async () => {
     const url = new URL(`/product/getting-started/foundations/typography`, 'https://primer.style')
     const response = await fetch(url)
@@ -773,7 +800,10 @@ server.registerTool(
 // -----------------------------------------------------------------------------
 server.registerTool(
   'list_icons',
-  {description: 'List all of the icons (octicons) available from Primer Octicons React'},
+  {
+    description: 'List all of the icons (octicons) available from Primer Octicons React',
+    annotations: {readOnlyHint: true},
+  },
   async () => {
     const icons = listIcons().map(icon => {
       const keywords = icon.keywords.map(keyword => {
@@ -808,6 +838,7 @@ server.registerTool(
       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'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({name, size}) => {
     const icons = listIcons()
@@ -865,7 +896,10 @@ ${text}`,
 // -----------------------------------------------------------------------------
 server.registerTool(
   'primer_coding_guidelines',
-  {description: 'Get the guidelines when writing code that uses Primer or for UI code that you are creating'},
+  {
+    description: 'Get the guidelines when writing code that uses Primer or for UI code that you are creating',
+    annotations: {readOnlyHint: true},
+  },
   async () => {
     return {
       content: [
@@ -922,6 +956,7 @@ server.registerTool(
       alt: z.string().describe('The alt text of the image being evaluated'),
       image: z.string().describe('The image URL or file path being evaluated'),
     },
+    annotations: {readOnlyHint: true},
   },
   async ({surroundingText, alt, image}) => {
     // Call the LLM through MCP sampling