@cooperco/component-library-mcp-server

MCP (Model Context Protocol) server for the Cooper Component Library. Gives AI assistants like Claude Code access to component documentation, prop types, color palettes, passthrough configs, and scaffolding tools.

Install

npm install -g @cooperco/component-library-mcp-server
# or use npx (no install needed)

Configure Claude Code

Add to your project's .claude/settings.json:

{
  "mcpServers": {
    "cooper-components": {
      "command": "npx",
      "args": ["-y", "@cooperco/component-library-mcp-server"]
    }
  }
}

The server auto-detects the project root by walking up from the working directory looking for src/components/components.ts.

Explicit project path

If auto-detection doesn't work (e.g., you're in a monorepo), pass the path explicitly:

{
  "mcpServers": {
    "cooper-components": {
      "command": "npx",
      "args": ["-y", "@cooperco/component-library-mcp-server", "/path/to/Cordblood-Component-Library"]
    }
  }
}

Or use an environment variable:

{
  "mcpServers": {
    "cooper-components": {
      "command": "npx",
      "args": ["-y", "@cooperco/component-library-mcp-server"],
      "env": {
        "COOPER_PROJECT_ROOT": "/path/to/Cordblood-Component-Library"
      }
    }
  }
}

Local development (within this repo)

When working in the component library repo itself, use the local build:

{
  "mcpServers": {
    "cooper-components": {
      "command": "node",
      "args": ["mcp/dist/index.js"]
    }
  }
}

Tools

| Tool | Description | |------|-------------| | list-components | List all components with categories, variants, and descriptions | | get-component | Full docs for a component: props, events, slots, passthrough, and source code | | get-component-props | Focused prop table with types, defaults, and required status | | get-color-palettes | Color palette system: available palettes, structure, and usage | | get-passthrough-config | Passthrough keys and default Tailwind classes for a component | | search-components | Search components by name, category, or prop names | | scaffold-component | Generate a new component with .vue, .ts, and .stories.ts files |

Examples

Once configured, Claude Code can use the tools automatically:

• "What components are available?" → calls list-components
• "Show me the props for ContainerModule" → calls get-component
• "What color palettes can I use?" → calls get-color-palettes
• "Create a new BannerModule component" → calls scaffold-component

How it works

The server reads your component library source files at runtime:

• Parses TypeScript interfaces from ComponentName.ts files using the TypeScript Compiler API
• Extracts withDefaults, defineEmits, and <slot> usage from .vue files
• Reads passthrough configurations from src/config/defaultPassthrough/index.ts
• Reads color palettes from src/config/colorPalettes.ts
• Discovers components from src/components/components.ts barrel exports

Results are cached in memory and invalidated when source files change, so documentation is always current.