npm package: @letsprogram/ng-oat-mcp
Description: MCP server for @letsprogram/ng-oat — helps AI assistants generate correct ng-oat component code, look up design tokens, theming, utilities, and recipes.
Author: SashiKumar Yadav
Latest version: 0.2.2

# @letsprogram/ng-oat-mcp

MCP (Model Context Protocol) server for the **ng-oat** Angular component library. Gives AI coding assistants — like Copilot, Cursor, Windsurf, and others — instant access to every ng-oat component API, design token, theming guide, recipe, and utility class.

## Quick Start

### npm (recommended — works everywhere)

```bash
npx -y @letsprogram/ng-oat-mcp
```

### From source

```bash
cd mcp-server
npm install
npm run build
```

## Integration

### VS Code / GitHub Copilot

Add to `.vscode/mcp.json` (workspace) **or** `~/.vscode/mcp.json` (global):

```jsonc
{
  "servers": {
    "ng-oat": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@letsprogram/ng-oat-mcp"],
    },
  },
}
```

<details>
<summary>Local development (from source)</summary>

```jsonc
{
  "servers": {
    "ng-oat": {
      "type": "stdio",
      "command": "node",
      "args": ["${workspaceFolder}/mcp-server/dist/index.js"],
    },
  },
}
```

</details>

### Cursor

Add to `.cursor/mcp.json`:

```jsonc
{
  "mcpServers": {
    "ng-oat": {
      "command": "npx",
      "args": ["-y", "@letsprogram/ng-oat-mcp"],
    },
  },
}
```

### Windsurf

Add to `~/.codeium/windsurf/mcp_config.json`:

```jsonc
{
  "mcpServers": {
    "ng-oat": {
      "command": "npx",
      "args": ["-y", "@letsprogram/ng-oat-mcp"],
    },
  },
}
```

### Claude Desktop

Add to `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS) or `%APPDATA%\Claude\claude_desktop_config.json` (Windows):

```jsonc
{
  "mcpServers": {
    "ng-oat": {
      "command": "npx",
      "args": ["-y", "@letsprogram/ng-oat-mcp"],
    },
  },
}
```

---

## Tools

| Tool                      | Description                                                                                              |
| ------------------------- | -------------------------------------------------------------------------------------------------------- |
| `get_component`           | Look up any ng-oat component by name or selector. Returns inputs, outputs, slots, and example.           |
| `get_tokens`              | List design tokens (CSS custom properties). Filter by category: color, spacing, radius, typography, etc. |
| `generate_component_code` | Generate a ready-to-paste Angular standalone component using ng-oat.                                     |
| `get_recipe`              | Get full-page layout recipes (login, dashboard, pricing, blog, etc.) with HTML skeletons.                |
| `get_utilities`           | List 300+ CSS utility classes across 30 categories. Includes responsive variants (sm:/md:/lg:/xl:).      |
| `get_setup`               | Installation & setup guide: requirements, CSS, tokens, signal forms, utilities.                          |
| `get_theming`             | Theming docs: provideNgOatTheme, NgOatThemeRef, light-dark(), color tokens, CSS-only theming.            |

## Resources

| URI                      | Description                                                                                                |
| ------------------------ | ---------------------------------------------------------------------------------------------------------- |
| `ng-oat://llms-full.txt` | Complete API reference — all 37 components, 87 tokens, 12 recipes, 300+ utilities, theming & setup guides. |

## Prompts

| Prompt              | Description                                                                               |
| ------------------- | ----------------------------------------------------------------------------------------- |
| `create-page`       | Scaffold a full Angular page using ng-oat components from a natural language description. |
| `style-with-tokens` | Generate CSS using ng-oat design tokens from a description of what to style.              |

---

## Publishing to npm

```bash
cd mcp-server
npm run build
npm publish --access public
```

After publishing, anyone can use it with:

```bash
npx -y @letsprogram/ng-oat-mcp
```

## Development

```bash
npm run dev    # Watch mode — recompiles on save
npm run start  # Run the server directly (for testing)
```

### Testing with MCP Inspector

```bash
npx @modelcontextprotocol/inspector node dist/index.js
```

## Architecture

```
mcp-server/
├── src/
│   ├── index.ts          # Server entry — tools, resources, prompts
│   └── data/
│       ├── components.ts  # 37 component API definitions
│       ├── tokens.ts      # 87 design token definitions
│       ├── recipes.ts     # 12 full-page recipe skeletons
│       ├── utilities.ts   # 300+ CSS utility class catalog
│       ├── setup.ts       # Installation & setup guide
│       └── theming.ts     # Theming documentation
├── dist/                  # Compiled JS (after build)
├── package.json
└── tsconfig.json
```

## License

MIT