mcp-angular-cli
This server provides access to Angular CLI commands for managing Angular projects and workspaces via the Model Context Protocol (MCP). You can:
Generate Angular artifacts: Create components, services, etc. using
ng generateAdd packages: Add npm packages to the Angular workspace using
ng addCreate new workspaces: Create new Angular projects using
ng newRun custom architect targets: Execute custom build or other targets using
ng runUpdate Angular packages: Update Angular dependencies and run migrations using
ng update
This allows LLMs and agents to automate Angular CLI and workspace tasks through the MCP integration.
Provides Angular CLI and workspace automation capabilities, allowing for generating components/services, adding packages, creating new workspaces, and running custom architect targets within Angular projects.
Enables package management through Angular CLI commands like 'ng add' to add packages and 'ng update' to update Angular packages and dependencies in the workspace.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@mcp-angular-cligenerate a login component in my project at /home/user/angular-app"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Angular CLI MCP Server 🅰️
A Model Context Protocol server that provides Angular CLI and workspace automation capabilities. This server enables LLMs and agents to interact with Angular projects, generate components/services, add packages, create new workspaces, and run custom architect targets via the Angular CLI.
Features
Run
ng generateto scaffold Angular artifacts (components, services, etc.)Run
ng addto add packages to your Angular workspaceRun
ng newto create new Angular workspacesRun
ng runto execute custom architect targetsRun
ng updateto update Angular packages and dependenciesAll via the Model Context Protocol (MCP) for agent/LLM integration
Related MCP server: Clockify MCP
Installation
You can install the package globally using npm:
npm install -g @talzach/mcp-angular-cliOr use it locally in your project:
npm install --save-dev @talzach/mcp-angular-cliUsage
You can run the server directly:
npx @talzach/mcp-angular-cliOr, if you want to use it as a custom MCP server in your agent or tool, configure it like this:
Example MCP Configuration
{
"mcpServers": {
"angular-cli": {
"command": "npx",
"args": ["-y", "@talzach/mcp-angular-cli"]
}
}
}Example Tool Usage
Generate a component:
{ "schematic": "component", "name": "my-component", "appRoot": "/absolute/path/to/your/angular/project" }Add a package:
{ "package": "@angular/material", "appRoot": "/absolute/path/to/your/angular/project" }Create a new workspace:
{ "name": "my-workspace", "directory": "/absolute/path/to/where/you/want/it" }Run a custom architect target:
{ "target": "app:build:production", "appRoot": "/absolute/path/to/your/angular/project" }
Star this repo if you find it useful!
Publishing to npm
To publish a new version of this package to npm, run:
npm run publish-npmThis will automatically build the project and publish it as a public package.
Develop
If you want to test or develop this server locally, you need to point your MCP server configuration to your local build output. After building the project (e.g., with npm run build), set your MCP server file (e.g., .mcp.json or similar) to use the local dist/index.js file:
{
"angular-cli": {
"command": "node",
"args": ["/path/to/your/mcp-angular-cli/dist/index.js"]
}
}Available Tools
5 toolsng_addC
Run 'ng add' to add a package to the Angular workspace
| Name | Required | Description | Default |
|---|---|---|---|
| package | Yes | The npm package to add (e.g., @angular/material) | |
| appRoot | Yes | The absolute path to the first folder in the 'path' property. For example, if 'path' is 'webui/src/app/modules/alerts', then 'appRoot' should be the absolute path to 'webui'. | |
| options | No | Additional options for ng add |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool runs 'ng add' to add a package, implying a mutation operation that modifies the Angular workspace. However, it doesn't disclose critical behavioral traits such as whether it requires specific permissions, what side effects occur (e.g., changes to configuration files), error handling, or any rate limits. This is a significant gap for a mutation tool with zero annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise and front-loaded, consisting of a single sentence that directly states the tool's purpose without any unnecessary words. Every part of the sentence earns its place by clearly conveying the action and target, making it efficient and easy to understand at a glance.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of a mutation tool that modifies an Angular workspace, the description is incomplete. No annotations are provided to cover safety or behavioral aspects, and there's no output schema to explain return values. The description lacks details on what happens after execution (e.g., success indicators, error messages), making it inadequate for the tool's context despite the concise purpose statement.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, providing clear documentation for all parameters ('package', 'appRoot', 'options'). The description adds no additional meaning beyond what the schema already specifies, as it doesn't elaborate on parameter usage, examples, or constraints. With high schema coverage, the baseline score of 3 is appropriate, as the description doesn't compensate but also doesn't detract.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Run 'ng add' to add a package to the Angular workspace.' It specifies the verb ('add') and resource ('package to the Angular workspace'), making the action clear. However, it doesn't explicitly differentiate from sibling tools like 'ng_update' (which might update packages) or 'ng_generate' (which creates components), leaving some ambiguity in sibling differentiation.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention when to choose 'ng_add' over sibling tools like 'ng_update' for package management or 'ng_generate' for adding components, nor does it specify prerequisites or exclusions. This lack of contextual usage information leaves the agent without clear direction.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ng_generateC
Run 'ng generate' to create a new Angular artifact (component, service, etc.)
| Name | Required | Description | Default |
|---|---|---|---|
| schematic | Yes | The schematic to generate (e.g., component, service) | |
| name | Yes | The name of the artifact to generate | |
| path | No | The path where the artifact should be created, relative to the appRoot (do not include the app folder itself). For example, if the full path is 'webui/src/app/modules/alerts' and appRoot is 'webui', then path should be 'src/app/modules/alerts'. | src/app |
| appRoot | Yes | The absolute path to the first folder in the 'path' property. For example, if 'path' is 'webui/src/app/modules/alerts', then 'appRoot' should be the absolute path to 'webui'. | |
| options | No | Additional options for the schematic |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It mentions creating artifacts but lacks details on permissions, side effects (e.g., file system changes), error handling, or output format. For a tool that likely modifies files, this is a significant gap in behavioral disclosure.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that front-loads the core action and purpose without any wasted words. It directly communicates the tool's function in a structured and clear manner.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (5 parameters, nested objects, no output schema, and no annotations), the description is insufficient. It doesn't explain what happens after generation, error cases, or the impact of options like 'force' or 'dryRun', leaving critical context gaps for a file-creating tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema fully documents all 5 parameters. The description adds no additional meaning beyond implying 'schematic' and 'name' are used for artifact generation, but it doesn't clarify parameter interactions or usage beyond what the schema provides, meeting the baseline for high coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb ('Run ng generate') and resource ('to create a new Angular artifact'), specifying examples like component and service. It distinguishes from siblings like ng_add or ng_new by focusing on artifact generation rather than adding packages or creating new projects, though it doesn't explicitly contrast them.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like ng_add or ng_new, nor does it mention prerequisites or context for generating artifacts. It simply states what the tool does without indicating appropriate scenarios or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ng_newC
Run 'ng new' to create a new Angular workspace
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | The name of the new workspace | |
| directory | No | The directory to create the workspace in | |
| appRoot | No | The absolute path to the first folder in the 'path' property. For example, if 'path' is 'webui/src/app/modules/alerts', then 'appRoot' should be the absolute path to 'webui'. | |
| options | No | Additional options for ng new |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions the tool creates a new workspace, implying a write operation, but doesn't cover critical aspects like side effects (e.g., file system changes), permissions needed, error handling, or output format. This leaves significant gaps for an agent to understand the tool's behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any wasted words. It is appropriately sized and front-loaded, making it easy for an agent to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (creates a new Angular workspace with 4 parameters), lack of annotations, and no output schema, the description is insufficient. It doesn't explain what the tool returns, potential side effects, or how it interacts with the system, leaving the agent with incomplete information for safe and effective use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, with all parameters well-documented in the input schema. The description adds no additional parameter semantics beyond what's in the schema, such as examples or constraints. Since the schema does the heavy lifting, the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Run ng new') and the outcome ('create a new Angular workspace'), providing a specific verb and resource. However, it doesn't differentiate this tool from its siblings (e.g., ng_add, ng_generate), which might also create or modify Angular projects in different ways, so it doesn't reach the highest score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like ng_add or ng_generate, nor does it mention prerequisites or exclusions. It simply states what the tool does without contextual usage information.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ng_runC
Run 'ng run' to execute a custom architect target
| Name | Required | Description | Default |
|---|---|---|---|
| target | Yes | The target to run (e.g., app:build:production) | |
| appRoot | Yes | The absolute path to the first folder in the 'path' property. For example, if 'path' is 'webui/src/app/modules/alerts', then 'appRoot' should be the absolute path to 'webui'. | |
| options | No | Additional options for ng run |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions execution but doesn't clarify if this is a read-only or destructive operation, what permissions are needed, or any side effects like file modifications. This is inadequate for a tool that likely performs builds or similar actions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's function without unnecessary words. It's front-loaded and appropriately sized for its purpose, earning full marks for conciseness.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of executing custom architect targets (likely involving builds or deployments), no annotations, and no output schema, the description is insufficient. It doesn't explain what happens during execution, potential outputs, or error handling, leaving significant gaps for the agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents all parameters thoroughly. The description adds no additional meaning beyond implying 'ng run' execution, which is redundant with the tool name. Baseline 3 is appropriate as the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Run') and resource ('custom architect target'), making the purpose understandable. However, it doesn't differentiate from sibling tools like ng_generate or ng_update, which also execute Angular CLI commands, so it doesn't reach the highest clarity level.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is provided on when to use this tool versus alternatives like ng_generate or ng_add. The description merely states what it does without context about appropriate scenarios or prerequisites, leaving the agent to infer usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
ng_updateC
Run 'ng update' to update Angular packages and run migrations.
| Name | Required | Description | Default |
|---|---|---|---|
| packages | Yes | ||
| appRoot | Yes | The absolute path to the first folder in the 'path' property. For example, if 'path' is 'webui/src/app/modules/alerts', then 'appRoot' should be the absolute path to 'webui'. | |
| next | No | Use the prerelease version, including beta and RCs. | |
| force | No | Ignore peer dependency version mismatches. | |
| allowDirty | No | Allow updating when the repository contains modified or untracked files. | |
| createCommits | No | Create source control commits for updates and migrations. | |
| from | No | Version from which to migrate from (only with migrate-only and single package). | |
| to | No | Version up to which to apply migrations (only with migrate-only and single package). | |
| migrateOnly | No | Only perform a migration, do not update the installed version. | |
| name | No | The name of the migration to run (only with migrate-only and single package). | |
| verbose | No | Display additional details about internal operations during execution. |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden for behavioral disclosure. It mentions that the tool 'updates Angular packages and run migrations' which implies mutation/write operations, but doesn't disclose important behavioral aspects like whether this modifies project files, requires specific permissions, has side effects, or what happens on failure. For a complex update tool with 11 parameters, this is inadequate.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise - a single sentence that directly states the tool's purpose without any fluff or unnecessary elaboration. It's front-loaded with the core functionality and wastes no words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a complex Angular update tool with 11 parameters, no annotations, and no output schema, the description is insufficient. It doesn't explain what 'run migrations' entails, what gets modified, potential risks, or typical use cases. The combination of high complexity and minimal description creates significant gaps for an AI agent.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The description provides no parameter-specific information, but with 91% schema description coverage, the input schema already documents most parameters well. The baseline score of 3 is appropriate since the schema does the heavy lifting, though the description adds no value beyond what's in the structured schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Run ng update') and purpose ('to update Angular packages and run migrations'), providing a specific verb+resource combination. It doesn't explicitly differentiate from sibling tools like ng_add or ng_generate, but the focus on updating packages is reasonably distinct from adding packages or generating code.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like ng_add or ng_generate, nor does it mention prerequisites or typical contexts for running Angular updates. It simply states what the tool does without usage context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Each tool has a clearly distinct purpose corresponding to a specific Angular CLI command: ng_new creates workspaces, ng_add adds packages, ng_generate creates artifacts, ng_run executes targets, and ng_update updates packages. There is no overlap or ambiguity between these functions.
All tool names follow a consistent 'ng_' prefix pattern with a verb suffix (add, generate, new, run, update), using snake_case uniformly. This predictable naming makes it easy to identify and select the correct tool.
With 5 tools, the server is well-scoped for its purpose of exposing key Angular CLI commands. It covers essential operations, though it might be slightly thin if advanced CLI features are excluded, but it's reasonable for core workflows.
The tool set covers major Angular CLI operations: creating workspaces, adding packages, generating artifacts, running targets, and updating packages. Minor gaps may exist, such as missing build or serve commands, but core lifecycle tasks are well-represented.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
A Model Context Protocol server for Wix AI tools
Model Context Protocol server for Studex tools, notifications, and profile integrations
A Model Context Protocol (MCP) server for Selise Blocks Cloud integration
Model Context Protocol server for todo.vu task management and time tracking.
Related MCP Servers
- AlicenseBqualityFmaintenanceClockify Model Context Protocol (MCP) server1714MIT
- AlicenseNot gradedqualityBmaintenanceA Model Context Protocol server that provides Angular project analysis and refactoring capabilities, enabling LLMs to analyze component usage patterns, dependency structures, and perform safe refactoring with breaking change detection.4MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/talzach/mcp-angular-cli'
If you have feedback or need assistance with the MCP directory API, please join our Discord server