feat: add mcp package (#6222)

Co-authored-by: Copilot <[email protected]>

Author: joshblack

package-lock.json

@@ -3,6 +3,8 @@
   "private": true,
   "workspaces": [
     "packages/rollup-plugin-import-css",
+    "packages/react",
+    "packages/mcp",
     "packages/*",
     "examples/*"
   ],

package.json

@@ -0,0 +1,43 @@
+# @primer/mcp
+
+> The Primer MCP server connects AI tools to Primer's design system. It provides
+> tools for AI agents to connect with design tokens, components, patterns, and
+> more.
+
+## Getting started
+
+[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install_Server-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect/mcp/install?name=Primer+MCP&config=%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40primer%2Fmcp%40latest%22%5D%7D) [![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install_Server-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect/mcp/install?name=Primer+MCP&config=%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40primer%2Fmcp%40latest%22%5D%7D&quality=insiders)
+
+The `@primer/mcp` package provides a server that can be run in your local
+development environment or can be setup in tools like GitHub Actions to be used
+by AI agents.
+
+### VS Code
+
+To use `@primer/mcp` in VS Code, you can use the button in the section above or
+follow these steps:
+
+1. Open the Command Palette (Cmd/Ctrl + Shift + P)
+2. Type `MCP: Install Server` and select it
+3. Select the `stdio` type
+4. Enter in the following command: `npx @primer/mcp@latest`
+5. Enter the name `Primer MCP` for the server
+
+Your MCP servers configuration should look like:
+
+```json
+{
+  "servers": {
+    "Primer MCP": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["@primer/mcp@latest"]
+    }
+  },
+  "inputs": []
+}
+```
+
+## 🙌 Contributing
+
+We love collaborating with folks inside and outside of GitHub and welcome contributions! If you're interested, check out our [contributing docs](contributor-docs/CONTRIBUTING.md) for more info on how to get started.

packages/mcp/README.md

@@ -0,0 +1,49 @@
+{
+  "name": "@primer/mcp",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "bin": "./dist/stdio.js",
+  "exports": {
+    "./transports/stdio": {
+      "types": "./dist/transports/stdio.d.ts",
+      "default": "./dist/stdio.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "rollup -c",
+    "type-check": "tsc --noEmit",
+    "watch": "rollup -c -w"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.27.0",
+    "@modelcontextprotocol/sdk": "^1.12.0",
+    "@primer/primitives": "10.x || 11.x",
+    "@primer/react": "^37.24.0",
+    "cheerio": "^1.0.0",
+    "turndown": "^7.2.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-typescript": "^7.27.1",
+    "@modelcontextprotocol/inspector": "^0.13.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/turndown": "^5.0.5",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.30.1",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.8.3"
+  }
+}

packages/mcp/package.json

@@ -0,0 +1,51 @@
+import {defineConfig} from 'rollup'
+import babel from '@rollup/plugin-babel'
+import json from '@rollup/plugin-json'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from 'rollup-plugin-typescript2'
+import packageJson from './package.json' with {type: 'json'}
+
+const external = [
+  ...Object.keys(packageJson.peerDependencies ?? {}),
+  ...Object.keys(packageJson.dependencies ?? {}),
+  ...Object.keys(packageJson.devDependencies ?? {}),
+].map(name => {
+  return new RegExp(`^${name}(/.*)?`)
+})
+
+const config = defineConfig({
+  input: ['./src/transports/stdio.ts'],
+  external,
+  plugins: [
+    nodeResolve(),
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig.build.json',
+    }),
+    babel({
+      extensions: ['.js', '.cjs', '.mjs', '.ts', '.tsx'],
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 'current',
+            },
+          },
+        ],
+        '@babel/preset-typescript',
+      ],
+      plugins: ['@babel/plugin-transform-runtime'],
+      babelHelpers: 'runtime',
+    }),
+    json(),
+  ],
+  output: {
+    dir: 'dist',
+    format: 'esm',
+    importAttributesKey: 'with',
+  },
+})
+
+export default config

packages/mcp/rollup.config.js

@@ -0,0 +1,73 @@
+import componentsMetadata from '@primer/react/generated/components.json' with {type: 'json'}
+
+type Component = {
+  id: string
+  name: string
+  importPath: string
+}
+
+const components: Array<Component> = Object.entries(componentsMetadata.components).map(([id, component]) => {
+  return {
+    id,
+    name: component.name,
+    importPath: component.importPath,
+  }
+})
+
+function listComponents(): Array<Component> {
+  return components
+}
+
+type Pattern = {
+  id: string
+  name: string
+}
+
+const patterns: Array<Pattern> = [
+  {
+    id: 'data-visualization',
+    name: 'Data Visualization',
+  },
+  {
+    id: 'degraded-experiences',
+    name: 'Degraded Experiences',
+  },
+  {
+    id: 'empty-states',
+    name: 'Empty States',
+  },
+  {
+    id: 'feature-onboarding',
+    name: 'Feature Onboarding',
+  },
+  {
+    id: 'forms',
+    name: 'Forms',
+  },
+  {
+    id: 'loading',
+    name: 'Loading',
+  },
+  {
+    id: 'navigation',
+    name: 'Navigation',
+  },
+  {
+    id: 'notification-messaging',
+    name: 'Notification message',
+  },
+  {
+    id: 'progressive-disclosure',
+    name: 'Progressive disclosure',
+  },
+  {
+    id: 'saving',
+    name: 'Saving',
+  },
+]
+
+function listPatterns(): Array<Pattern> {
+  return patterns
+}
+
+export {listComponents, listPatterns}