Skip to content

Commit 21b521b

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 21b521b

File tree

1 file changed

+61
-21
lines changed

1 file changed

+61
-21
lines changed

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

Lines changed: 61 additions & 21 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,30 @@ 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+
### Firebase Studio
14+
15+
Create a file named `.idx/mcp.json` in your project's root and add the following configuration:
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+
### Gemini CLI
29+
30+
Create a file named `.gemini/settings.json` in your project's root and add the following configuration:
31+
32+
```json
33+
{
34+
"mcpServers": {
1835
"angular-cli": {
1936
"command": "npx",
2037
"args": ["@angular/cli", "mcp"]
@@ -24,6 +41,7 @@ In your project's root, create a file named `.vscode/mcp.json` and add the follo
2441
```
2542

2643
### JetBrains IDEs
44+
2745
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.
2846

2947
```json
@@ -37,11 +55,13 @@ In JetBrains IDEs (like IntelliJ IDEA or WebStorm), after installing the JetBrai
3755
}
3856
```
3957

40-
### Firebase Studio
41-
Create a file named `.idx/mcp.json` in your project's root and add the following configuration:
58+
### VS Code
59+
60+
In your project's root, create a file named `.vscode/mcp.json` and add the following configuration. Note the use of the `servers` property.
61+
4262
```json
4363
{
44-
"mcpServers": {
64+
"servers": {
4565
"angular-cli": {
4666
"command": "npx",
4767
"args": ["@angular/cli", "mcp"]
@@ -51,9 +71,11 @@ Create a file named `.idx/mcp.json` in your project's root and add the following
5171
```
5272

5373
### Other IDEs
74+
5475
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`).
76+
77+
- **Cursor:** Create a file named `.cursor/mcp.json` in your project's root. You can also configure it globally in `~/.cursor/mcp.json`.
78+
- **Other IDEs:** Check your IDE's documentation for the proper location of the MCP configuration file (often `mcp.json`).
5779

5880
```json
5981
{
@@ -66,28 +88,46 @@ For these IDEs, create a configuration file and add the following snippet. Note
6688
}
6789
```
6890

69-
## Available Tools
91+
## Command Options
7092

71-
The Angular CLI MCP server provides several tools to assist you in your development workflow. Here's an overview of the available tools:
93+
The `mcp` command can be configured with the following options passed as arguments in your IDE's MCP configuration:
7294

73-
### Get Angular Coding Best Practices Guide (`get_best_practices`)
95+
- `--read-only`: (boolean, default: `false`) Only register tools that do not make changes to the project.
96+
- `--local-only`: (boolean, default: `false`) Only register tools that do not require an internet connection.
7497

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.
98+
For example, to run the server in read-only mode in VS Code, you would update your `mcp.json` like this:
7699

77-
* **Outputs:** The content of the best practices guide.
100+
```json
101+
{
102+
"servers": {
103+
"angular-cli": {
104+
"command": "npx",
105+
"args": ["@angular/cli", "mcp", "--read-only"]
106+
}
107+
}
108+
}
109+
```
110+
111+
## Available Tools
78112

79-
### Search Angular Documentation (`search_documentation`)
113+
The Angular CLI MCP server provides several tools to assist you in your development workflow. By default, the following tools are enabled:
80114

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.
115+
| Name | Description |
116+
| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
117+
| `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. |
118+
| `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. |
119+
| `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. |
82120

83-
* **Outputs:** A list of search results, including title, breadcrumbs, and URL. May also include the content of the top-ranked page.
121+
### Tools Enabled by Options
84122

85-
### List Angular Projects (`list_projects`)
123+
The set of available tools can be modified by the command options:
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+
- **`--read-only`**: This option restricts the available tools to only those that do not modify project files. All default tools are currently read-only.
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+
- **`--local-only`**: This option restricts the available tools to only those that do not require an internet connection. When this option is used, the following tools are available:
128+
- `get_best_practices`
129+
- `list_projects`
90130

91131
## Feedback and New Ideas
92132

93-
The Angular team welcomes your feedback on the existing MCP capabilities and any ideas you have for new tools or features. Please share your thoughts by opening an issue on the [angular/angular GitHub repository](https://github.com/angular/angular/issues).
133+
The Angular team welcomes your feedback on the existing MCP capabilities and any ideas you have for new tools or features. Please share your thoughts by opening an issue on the [angular/angular GitHub repository](https://github.com/angular/angular/issues).

0 commit comments

Comments
 (0)