@spaced-out/ui-design-system/mcp/README.md

Sense UI components library

# Genesis MCP Server

MCP server for AI assistants to access the Genesis UI Design System.

## Quick Setup

### Cursor / Claude Desktop

1. Find your `npx` path:

```bash
which npx
```

2. Add to MCP settings:

```json
{
  "mcpServers": {
    "genesis-design-system": {
      "command": "/opt/homebrew/bin/npx",
      "args": ["-y", "@spaced-out/genesis-mcp@latest"]
    }
  }
}
```

> Replace `/opt/homebrew/bin/npx` with your actual path from step 1.

3. Restart the app.

## Available Tools

| Tool                             | Description                   |
| -------------------------------- | ----------------------------- |
| `list_components`                | List all components           |
| `get_component`                  | Get component details & types |
| `search_components`              | Search by name                |
| `list_hooks`                     | List all hooks                |
| `get_hook`                       | Get hook details              |
| `get_design_tokens`              | Get design tokens             |
| `get_component_template`         | New component template        |
| `get_css_module_guidelines`      | CSS Module patterns           |
| `analyze_component_dependencies` | Dependency analysis           |

## Development

```bash
yarn install
yarn build        # Generate design-system.json
node index.js     # Test locally
```

## Troubleshooting

**"spawn npx ENOENT"**: Use full path to `npx` (see setup above).

**Package not found**: Run `npm view @spaced-out/genesis-mcp` to verify.

**Node version**: Requires Node.js >= 18.0.0