@cooperco/cooper-mcp-server

@cooperco/cooper-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/cooper-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/cooper-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/cooper-mcp-server", "/path/to/Cordblood-Component-Library"]
    }
  }
}

Or use an environment variable:

{
  "mcpServers": {
    "cooper-components": {
      "command": "npx",
      "args": ["-y", "@cooperco/cooper-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.