# onsystem MCP server

> Enforces design system compliance in React code by catching incorrect colors, components, props, and variants during AI-driven development.

- Repository: https://github.com/dgesteves/onsystem
- Page: https://hostedmcp.org/servers/dgesteves/onsystem
- Transport: stdio
- Stars: 20
- License: MIT
- Latest version: 0.12.1

## Install

### Claude Code

```sh
claude mcp add onsystem -- npx -y onsystem
```

### Cursor (`~/.cursor/mcp.json`)

```json
{
  "mcpServers": {
    "onsystem": {
      "command": "npx",
      "args": [
        "-y",
        "onsystem"
      ]
    }
  }
}
```

### VS Code (`.vscode/mcp.json`)

```json
{
  "servers": {
    "onsystem": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "onsystem"
      ]
    }
  }
}
```

### VS Code CLI

```sh
code --add-mcp '{"name":"onsystem","type":"stdio","command":"npx","args":["-y","onsystem"]}'
```

### Claude Desktop (`claude_desktop_config.json`)

```json
{
  "mcpServers": {
    "onsystem": {
      "command": "npx",
      "args": [
        "-y",
        "onsystem"
      ]
    }
  }
}
```

### Codex

```sh
codex mcp add onsystem -- npx -y onsystem
```

### Codex config.toml (`~/.codex/config.toml`)

```toml
[mcp_servers.onsystem]
command = "npx"
args = ["-y", "onsystem"]
```

### Gemini CLI

```sh
gemini mcp add -s user onsystem npx -- -y onsystem
```

### Gemini settings.json (`~/.gemini/settings.json`)

```json
{
  "mcpServers": {
    "onsystem": {
      "command": "npx",
      "args": [
        "-y",
        "onsystem"
      ]
    }
  }
}
```

## FAQ

### What does onsystem check for?

It detects unknown components, invalid props, incorrect variants, hardcoded colors, hardcoded spacing, and hardcoded radius, while also suggesting design system components over native elements.