@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)

npx -y @letsprogram/ng-oat-mcp

From source

cd mcp-server
npm install
npm run build

Integration

VS Code / GitHub Copilot

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

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

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

Cursor

Add to .cursor/mcp.json:

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

Windsurf

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

{
  "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):

{
  "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. | | list_components | List all components grouped by category (component, directive-wrapper, form). Great for discovery. | | 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.txt | Lightweight overview — component list with selectors, guide links, recipe list. | | ng-oat://llms-full.txt | Complete API reference — all ~40 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. | | build-faq-page | Generate a FAQ page using ng-oat accordion (composition API) from a topic description. |

Publishing to npm

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

After publishing, anyone can use it with:

npx -y @letsprogram/ng-oat-mcp

Development

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

Testing with MCP Inspector

npx @modelcontextprotocol/inspector node dist/index.js

Architecture

mcp-server/
├── src/
│   ├── index.ts          # Server entry — tools, resources, prompts
│   └── data/
│       ├── components.ts  # ~40 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