# c2n Web Components MCP server

> Exposes c2n Lit web component APIs, theme tokens, usage examples, and markup validation to AI agents.

- Repository: https://github.com/code2nguyen/web-components
- Page: https://hostedmcp.org/servers/code2nguyen/c2n
- Transport: stdio
- Stars: 5
- License: MIT
- Latest version: 1.0.26

## Install

### Claude Code

```sh
claude mcp add c2n -- npx -y @c2n/mcp
```

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

```json
{
  "mcpServers": {
    "c2n": {
      "command": "npx",
      "args": [
        "-y",
        "@c2n/mcp"
      ]
    }
  }
}
```

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

```json
{
  "servers": {
    "c2n": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@c2n/mcp"
      ]
    }
  }
}
```

### VS Code CLI

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

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

```json
{
  "mcpServers": {
    "c2n": {
      "command": "npx",
      "args": [
        "-y",
        "@c2n/mcp"
      ]
    }
  }
}
```

### Codex

```sh
codex mcp add c2n -- npx -y @c2n/mcp
```

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

```toml
[mcp_servers.c2n]
command = "npx"
args = ["-y", "@c2n/mcp"]
```

### Gemini CLI

```sh
gemini mcp add -s user c2n npx -- -y @c2n/mcp
```

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

```json
{
  "mcpServers": {
    "c2n": {
      "command": "npx",
      "args": [
        "-y",
        "@c2n/mcp"
      ]
    }
  }
}
```

## Environment variables

| Name | Required | Secret | Description |
|---|---|---|---|
| `C2N_PROJECT_ROOT` | no | no | Project whose installed @c2n/* packages the server reports. Defaults to the working directory. |

## Tools (10)

- `list_components`
- `search_components`
- `get_component`
- `get_examples`
- `search_examples`
- `get_presets`
- `get_theme`
- `generate_variant`
- `validate_markup`
- `get_workflow_guide`

## FAQ

### Does the server require an internet connection to work?

No, the registry is bundled locally in data/registry.json, allowing it to work offline in any project.

### Can the server validate my code?

Yes, the validate_markup tool checks HTML, JSX/TSX, Vue, Svelte, Astro, Angular, and Lit templates against installed component APIs.

### Does this server install the web components for me?

No, the server provides structured component facts but does not perform installations or direct application edits.