diff --git a/docs/concepts/mcp.md b/docs/concepts/mcp.md index 0ad7f21c1..fef17452e 100644 --- a/docs/concepts/mcp.md +++ b/docs/concepts/mcp.md @@ -20,24 +20,26 @@ This page is a guide to the Defang MCP Server detailing its installation, tools, ## Installation -First, make sure you have the [npm package manager](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) installed so that you can use `npx` commands. +Ensure that you have the [npm package manager](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) installed, as `npx` commands are required for setup. + +:::warning +At this time, the Defang MCP Server can only be installed using `npx`. Other methods are not yet supported. +::: Connect the Defang MCP Server with your IDE by running the following command in your terminal: ```bash -npx -y defang mcp setup --client= +npx -y defang@latest mcp setup --client= ``` -Replace `` with the name of your preferred IDE. See our list of [Supported IDEs](#supported-ides). After setup, you can start the MCP Server with the command: +Replace `` with the name of your [preferred IDE](#supported-ides). After setup, you can start the MCP Server with the command: ```bash -npx -y defang mcp serve +npx -y defang@latest mcp serve ``` Once the MCP Server is running, you can access the Defang MCP tools directly through the AI agent chat in your IDE. -![IDE Screenshot](/img/mcp-concept/ide.png) - That's it! Feel free to explore our [Example Prompts](#example-prompts) to get ideas on how to interact with the AI agent and make the most of the Defang MCP Server. ## Supported IDEs @@ -45,29 +47,38 @@ That's it! Feel free to explore our [Example Prompts](#example-prompts) to get i ### Cursor ```bash -npx -y defang mcp setup --client=cursor +npx -y defang@latest mcp setup --client=cursor ``` +![Cursor](/img/mcp-concept/cursor.png) + ### Windsurf ```bash -npx -y defang mcp setup --client=windsurf +npx -y defang@latest mcp setup --client=windsurf ``` -### VS Code +![Windsurf](/img/mcp-concept/windsurf.png) + +### VS Code / VS Code Insiders + ```bash -npx -y defang mcp setup --client=vscode +npx -y defang@latest mcp setup --client=vscode ``` +![VS Code](/img/mcp-concept/vscode.png) + ### Claude Desktop -(While this is not an IDE in the traditional sense, it can support MCP servers.) +While this is not an IDE in the traditional sense, it can support MCP servers. For a smoother experience, consider specifying a project name or directory when making chat prompts to this platform. ```bash -npx -y defang mcp setup --client=claude +npx -y defang@latest mcp setup --client=claude ``` +![Claude Desktop](/img/mcp-concept/claude.png) + ## MCP Tools Below are the tools available in the Defang MCP Server. diff --git a/static/img/mcp-concept/claude.png b/static/img/mcp-concept/claude.png new file mode 100644 index 000000000..58bebf0c7 Binary files /dev/null and b/static/img/mcp-concept/claude.png differ diff --git a/static/img/mcp-concept/ide.png b/static/img/mcp-concept/cursor.png similarity index 53% rename from static/img/mcp-concept/ide.png rename to static/img/mcp-concept/cursor.png index 949296812..77d00193a 100644 Binary files a/static/img/mcp-concept/ide.png and b/static/img/mcp-concept/cursor.png differ diff --git a/static/img/mcp-concept/vscode.png b/static/img/mcp-concept/vscode.png new file mode 100644 index 000000000..ea1ac8182 Binary files /dev/null and b/static/img/mcp-concept/vscode.png differ diff --git a/static/img/mcp-concept/windsurf.png b/static/img/mcp-concept/windsurf.png new file mode 100644 index 000000000..c9e690d6a Binary files /dev/null and b/static/img/mcp-concept/windsurf.png differ