MCP Server

@letsprogram/ng-oat-mcp is a Model Context Protocol server that gives AI coding assistants , Copilot, Cursor, Windsurf, Claude, and others , full access to every ng-oat component API, design token, utility class, recipe, and theming guide.

What it does

Instead of pasting documentation into prompts, the MCP server lets your AI assistant query the ng-oat library programmatically. It knows about all 37 components, 87 design tokens, 300+ utility classes, 12 page recipes, and the complete theming API , so it generates correct, idiomatic code on the first try.

🔍 Component lookup

Ask for any component by name or selector and get the full API , inputs, outputs, slots, and a working example.

🎨 Design tokens

Query all 87 CSS custom properties by category , colors, spacing, typography, radius, shadows, and transitions.

⚡ Code generation

Describe a UI in plain English and get a complete Angular standalone component with correct ng-oat imports.

🧱 Utility classes

Browse 300+ CSS utilities across 30+ categories including responsive variants (sm:/md:/lg:/xl:).

📖 Recipes

Full-page layout templates , login, dashboard, pricing, blog, settings, and more , ready to scaffold.

🌗 Theming

Complete dark/light mode docs , provideNgOatTheme, NgOatThemeRef, light-dark(), and CSS-only approaches.

Install

No global install needed. Your IDE runs the server automatically via npx:

bash

npx -y @letsprogram/ng-oat-mcp

Or install globally if you prefer:

bash

npm install -g @letsprogram/ng-oat-mcp

IDE Setup

VS Code / GitHub Copilot

Create .vscode/mcp.json in your workspace root (or ~/.vscode/mcp.json for global access):

json

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

Cursor

Add to .cursor/mcp.json in your project:

json

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

Windsurf

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

json

// ~/.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):

json

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

Available Tools

The MCP server exposes 7 tools that your AI assistant can call:

Tool	Description	Parameters
`get_component`	Look up any component by name or selector , returns inputs, outputs, slots, and example	`query` (string)
`get_tokens`	List design tokens filtered by category	`category` (color \| spacing \| radius \| typography \| shadow \| transition)
`generate_component_code`	Generate a complete Angular standalone component from a natural language description	`description` (string)
`get_recipe`	Get full-page layout recipes with HTML skeletons	`query` (string)
`get_utilities`	List 300+ CSS utility classes , filterable by category	`category` (optional, 30+ categories)
`get_setup`	Installation & configuration guide	`topic` (optional)
`get_theming`	Theming and dark/light mode documentation	`topic` (optional)

Resources & Prompts

In addition to tools, the server provides an MCP resource and two prompt templates:

Resource

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

Example Usage

Once the MCP server is connected, just ask your AI assistant naturally. Here are some example prompts:

"Create a settings page with a form, card layout, and save button using ng-oat"
"What inputs does the NgOatTable component accept?"
"Show me all spacing design tokens"
"Generate a dashboard layout with sidebar navigation"
"How do I set up dark mode with ng-oat?"
"List all flexbox utility classes"
"What's the recipe for a pricing page?"

The assistant will call the appropriate MCP tool behind the scenes and use the returned API data to generate accurate, up-to-date code.

Testing the server

You can inspect and test all tools interactively using the MCP Inspector:

bash

npx @modelcontextprotocol/inspector npx -y @letsprogram/ng-oat-mcp

This opens a web UI where you can call each tool, view the resource, and test the prompt templates , useful for verifying the server works before connecting it to your IDE.