PawTec Angular v20 MCP Server Build Angular v20 components instantly via the Model Context Protocol (MCP). This server exposes tools to generate modern, standalone Angular components aligned with the latest 2025 style guide: suffixless filenames, stable Signals, new control flow, optional zoneless hints, and more.

Features

• Angular 20 ready: Stable Signals (signal/computed/effect/linkedSignal)
• Modern templates: New control flow (@if/@for) or legacy (*ngIf/*ngFor)
• Suffixless by default: v20 naming (e.g., user.ts, not user.component.ts)
• Optional extras: httpResource example, zoneless bootstrap snippet
• File output: In-memory results or write to disk when you want

Install Global (recommended for CLI usage):

npm install -g pawtec-mcp-server

Run the server (stdio):

pawtec-mcp

You can also run locally without a global install:

npm install
npm start

Requirements

• Node.js >= 18

Usage with MCP Clients This server speaks MCP over stdio. Start it with pawtec-mcp and connect using any compatible MCP client.

Examples:

• CLI/dev tools: Configure your MCP client to launch pawtec-mcp on demand.
• Editors/agents (e.g., IDEs with MCP support): Add a custom MCP server entry pointing to the pawtec-mcp executable.

Tools

1. hello_world

• Purpose: Quick health check and feature highlights
• Input: none
• Output: text message

2. angular_component

• Purpose: Generate a complete Angular v20 component (TS/HTML/SCSS)
• Input: JSON object with the following fields

| Name | Type | Default | Description | | --- | --- | --- | --- | | name | string (required) | — | Base component name (e.g., "User" or "UserProfile"). Class name will follow suffixless style by default. | | directory | string | "" | Directory to place files if write is true. Defaults to src/app/components/<kebab-name>. | | changeDetection | "OnPush" | "OnPush" | Change detection strategy ("OnPush" or "Default"). | | zoneless | boolean | false | Include zoneless bootstrap snippet in usage notes. | | useSignals | boolean | true | Include Signals examples: signal, computed, effect, input, linkedSignal. | | controlFlow | boolean | true | Use new control flow (@if/@for). If false, use legacy *ngIf/*ngFor. | | tailwind | string | "" | Tailwind classes for the root element of the template. | | template | string | "" | Custom HTML template. If empty, a default template is generated. | | inputs | Array | [] | Component inputs (supports signal inputs via input()/input.required() or classic @Input). | | outputs | Array | [] | Component outputs (EventEmitter-based). | | httpResourceExample | boolean | false | Include an httpResource() example. | | useSuffixes | boolean | false | Use legacy suffix style (e.g., user.component.ts, ClassNameComponent). | | write | boolean | false | When true, write files to disk; otherwise, return content only. |

Input/Output shapes

• Input (Input): { name: string; type?: string; required?: boolean; isSignal?: boolean; default?: string; }
• Output (Output): { name: string; type?: string; }

Generated artifacts

• TypeScript: <kebab-name>.ts (or <kebab-name>.component.ts when useSuffixes = true)
• HTML: <kebab-name>.html
• SCSS: <kebab-name>.scss

Quick Examples Basic, in-memory generation:

{
  "tool": "angular_component",
  "args": { "name": "UserProfile" }
}

Write files to disk in a specific directory:

{
  "tool": "angular_component",
  "args": {
    "name": "UserProfile",
    "directory": "src/app/components/user-profile",
    "write": true
  }
}

Signals with inputs/outputs and httpResource example:

{
  "tool": "angular_component",
  "args": {
    "name": "User",
    "useSignals": true,
    "httpResourceExample": true,
    "inputs": [
      { "name": "title", "type": "string", "isSignal": true, "default": "'Users'" },
      { "name": "page", "type": "number", "isSignal": true, "default": "1" }
    ],
    "outputs": [
      { "name": "submitted", "type": "void" }
    ]
  }
}

File writing behavior

• By default, files are not written. Set write: true to write to disk.
• Target path resolution:
  • If directory is provided, files are written there.
  • Otherwise, files go to ./src/app/components/<kebab-name>.

Angular 20 conventions baked in

• Suffixless filenames/class names by default (you can opt-in to legacy suffixes)
• Standalone components with imports in the parent
• Signals APIs showcased, including linkedSignal
• Optional httpResource() snippet for data fetching
• Optional zoneless bootstrap snippet in usage notes

Troubleshooting

• No output in terminal: MCP servers communicate over stdio. Normal logs are sent to stderr; tool responses go to stdout. Ensure your client is capturing stdout.
• Permission/Path errors when writing files: Check that write is true and the process has permissions to create the target directory.
• Angular version mismatches: Generated code targets Angular v20+ features. Ensure your project version aligns.

Local Development

• Start: npm start (runs node index.js)
• Lint/Tests: none included (bring your own setup)
• Node: >= 18

License ISC PawTec Angular v20 MCP Server This package provides a powerful MCP (Model Context Protocol) server with tools to generate cutting-edge Angular v20 components. It's designed to align with the latest Angular style guides and features. Installation To install this server globally from npm, run the following command: npm install -g pawtec-mcp-server

Usage Once installed, the server can be run from your terminal: pawtec-mcp

The server will start and listen for requests over stdio. You can then connect to it with a compatible MCP client. Tools

1. hello_world A simple tool that returns a welcome message and confirms that the server is ready with the latest Angular 20 features. Input: None Output: A text string with feature highlights.
2. angular_component Generates a complete, standalone Angular v20 component, including the .ts, .html, and .scss files. This tool is highly configurable to match modern development patterns. Input: An object with the following properties: name (string, required): The base name for the component (e.g., UserProfile). directory (string): Subdirectory to write the files to. changeDetection (enum): OnPush (default) or Default. zoneless (boolean): If true, includes a usage snippet for provideZonelessChangeDetection(). useSignals (boolean): If true (default), generates code using stable signal, computed, effect, input, and linkedSignal. controlFlow (boolean): If true (default), uses the new @if/@for control flow syntax. httpResourceExample (boolean): If true, includes an example of the experimental httpResource() function. useSuffixes (boolean): If true, uses legacy naming like user.component.ts. Defaults to false per v20 style guide. inputs (array): Define component inputs, including signal-based inputs. outputs (array): Define component @Output event emitters. write (boolean): If true, writes the generated files to the disk. Output: The generated TypeScript, HTML, and SCSS file contents, along with a detailed usage guide.