Skip to content

Commit 39cdde3

Browse files
clydinclydin
committed
docs: update MCP server documentation for 20.2
This commit updates the MCP server documentation with the following changes: - Updates the description of the `ng mcp` command behavior. - Adds a configuration example for the Gemini CLI. - Adds a new section for command options, including `--read-only` and `--local-only`. - Alphabetizes the IDE configuration sections for better readability. - Alphabetizes the "Available Tools" table.
1 parent 91b3466 commit 39cdde3

File tree

1 file changed

+66
-24
lines changed

1 file changed

+66
-24
lines changed

‎adev/src/content/ai/mcp-server-setup.md‎

Lines changed: 66 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# Angular CLI MCP Server setup
2+
23
The Angular CLI includes an experimental [Model Context Protocol (MCP) server](https://modelcontextprotocol.io/) enabling AI assistants in your development environment to interact with the Angular CLI. We've included support for CLI powered code generation, adding packages, and more.
34

45
To get started, run the following command in your terminal:
@@ -7,14 +8,45 @@ To get started, run the following command in your terminal:
78
ng mcp
89
```
910

10-
Use this command to create the base JSON configuration for your environment. Note that the file structure differs depending on your IDE. The following sections provide the configurations for several popular editors.
11+
When run from an interactive terminal, this command will display instructions on how to configure a host environment to use the MCP server. The following sections provide example configurations for several popular editors and tools.
1112

12-
### VS Code
13-
In your project's root, create a file named `.vscode/mcp.json` and add the following configuration. Note the use of the `servers` property.
13+
### Cursor
14+
15+
Create a file named `.cursor/mcp.json` in your project's root and add the following configuration. You can also configure it globally in `~/.cursor/mcp.json`.
1416

1517
```json
1618
{
17-
"servers": {
19+
"mcpServers": {
20+
"angular-cli": {
21+
"command": "npx",
22+
"args": ["@angular/cli", "mcp"]
23+
}
24+
}
25+
}
26+
```
27+
28+
### Firebase Studio
29+
30+
Create a file named `.idx/mcp.json` in your project's root and add the following configuration:
31+
32+
```json
33+
{
34+
"mcpServers": {
35+
"angular-cli": {
36+
"command": "npx",
37+
"args": ["@angular/cli", "mcp"]
38+
}
39+
}
40+
}
41+
```
42+
43+
### Gemini CLI
44+
45+
Create a file named `.gemini/settings.json` in your project's root and add the following configuration:
46+
47+
```json
48+
{
49+
"mcpServers": {
1850
"angular-cli": {
1951
"command": "npx",
2052
"args": ["@angular/cli", "mcp"]
@@ -24,6 +56,7 @@ In your project's root, create a file named `.vscode/mcp.json` and add the follo
2456
```
2557

2658
### JetBrains IDEs
59+
2760
In JetBrains IDEs (like IntelliJ IDEA or WebStorm), after installing the JetBrains AI Assistant plugin, go to `Settings | Tools | AI Assistant | Model Context Protocol (MCP)`. Add a new server and select `As JSON`. Paste the following configuration, which does not use a top-level property for the server list.
2861

2962
```json
@@ -37,11 +70,13 @@ In JetBrains IDEs (like IntelliJ IDEA or WebStorm), after installing the JetBrai
3770
}
3871
```
3972

40-
### Firebase Studio
41-
Create a file named `.idx/mcp.json` in your project's root and add the following configuration:
73+
### VS Code
74+
75+
In your project's root, create a file named `.vscode/mcp.json` and add the following configuration. Note the use of the `servers` property.
76+
4277
```json
4378
{
44-
"mcpServers": {
79+
"servers": {
4580
"angular-cli": {
4681
"command": "npx",
4782
"args": ["@angular/cli", "mcp"]
@@ -51,9 +86,8 @@ Create a file named `.idx/mcp.json` in your project's root and add the following
5186
```
5287

5388
### Other IDEs
54-
For these IDEs, create a configuration file and add the following snippet. Note the use of the `mcpServers` property.
55-
* **Cursor:** Create a file named `.cursor/mcp.json` in your project's root. You can also configure it globally in `~/.cursor/mcp.json`.
56-
* **Other IDEs:** Check your IDE's documentation for the proper location of the MCP configuration file (often `mcp.json`).
89+
90+
For other IDEs, check your IDE's documentation for the proper location of the MCP configuration file (often `mcp.json`). The configuration should contain the following snippet.
5791

5892
```json
5993
{
@@ -66,27 +100,35 @@ For these IDEs, create a configuration file and add the following snippet. Note
66100
}
67101
```
68102

69-
## Available Tools
70-
71-
The Angular CLI MCP server provides several tools to assist you in your development workflow. Here's an overview of the available tools:
72-
73-
### Get Angular Coding Best Practices Guide (`get_best_practices`)
74-
75-
This tool provides a guide on modern Angular coding best practices. Before you start writing or modifying code, you can use this tool to ensure your work aligns with current standards, such as using standalone components, typed forms, and the latest control flow syntax.
103+
## Command Options
76104

77-
* **Outputs:** The content of the best practices guide.
105+
The `mcp` command can be configured with the following options passed as arguments in your IDE's MCP configuration:
78106

79-
### Search Angular Documentation (`search_documentation`)
107+
- `--read-only`: (boolean, default: `false`) Only register tools that do not make changes to the project. Your editor or coding agent may still perform edits.
108+
- `--local-only`: (boolean, default: `false`) Only register tools that do not require an internet connection. Your editor or coding agent may still send data over the network.
80109

81-
This tool allows you to search the official Angular documentation at [angular.dev](https://angular.dev). It's the recommended way to find up-to-date information on Angular APIs, tutorials, and guides.
110+
For example, to run the server in read-only mode in VS Code, you would update your `mcp.json` like this:
82111

83-
* **Outputs:** A list of search results, including title, breadcrumbs, and URL. May also include the content of the top-ranked page.
112+
```json
113+
{
114+
"servers": {
115+
"angular-cli": {
116+
"command": "npx",
117+
"args": ["@angular/cli", "mcp", "--read-only"]
118+
}
119+
}
120+
}
121+
```
84122

85-
### List Angular Projects (`list_projects`)
123+
## Available Tools
86124

87-
This tool lists all the applications and libraries in your current Angular workspace. It reads the `angular.json` file to identify and provide details about each project.
125+
The Angular CLI MCP server provides several tools to assist you in your development workflow. By default, the following tools are enabled:
88126

89-
* **Outputs:** A list of project objects, with details for each project like its name, type (`application` or `library`), root directory, and component selector prefix.
127+
| Name | Description | `local-only` | `read-only` |
128+
| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------: | :---------: |
129+
| `get_best_practices` | Retrieves the Angular Best Practices Guide. This guide is essential for ensuring that all code adheres to modern standards, including standalone components, typed forms, and modern control flow. | ✅ | ✅ |
130+
| `list_projects` | Lists the names of all applications and libraries defined within an Angular workspace. It reads the `angular.json` configuration file to identify the projects. | ✅ | ✅ |
131+
| `search_documentation` | Searches the official Angular documentation at https://angular.dev. This tool should be used to answer any questions about Angular, such as for APIs, tutorials, and best practices. | ❌ | ✅ |
90132

91133
## Feedback and New Ideas
92134

0 commit comments

Comments
 (0)