diff --git a/docs/concepts/mcp.md b/docs/concepts/mcp.md index fef17452e..7776388d4 100644 --- a/docs/concepts/mcp.md +++ b/docs/concepts/mcp.md @@ -25,18 +25,13 @@ Ensure that you have the [npm package manager](https://docs.npmjs.com/downloadin :::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: +Run the setup command in your terminal for your IDE of choice from the [Supported IDEs](#supported-ides) section. This will connect the Defang MCP Server to your IDE. The general format of the command is as follows: ```bash npx -y defang@latest mcp setup --client= ``` -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@latest mcp serve -``` +Once the command completes, you may need to restart your IDE for the changes to take effect. Once the MCP Server is running, you can access the Defang MCP tools directly through the AI agent chat in your IDE. @@ -46,37 +41,64 @@ That's it! Feel free to explore our [Example Prompts](#example-prompts) to get i ### Cursor +Setup command: + ```bash npx -y defang@latest mcp setup --client=cursor ``` +Once setup is complete, you can interact with the AI coding agent using Defang-related actions like `check defang services` or [other prompts](#example-prompts). Here's an example of what it could look like: + ![Cursor](/img/mcp-concept/cursor.png) ### Windsurf +Setup command: + ```bash npx -y defang@latest mcp setup --client=windsurf ``` +Once setup is complete, you can interact with the AI coding agent using Defang-related actions like `check defang services` or [other prompts](#example-prompts). Here's an example of what it could look like: + ![Windsurf](/img/mcp-concept/windsurf.png) -### VS Code / VS Code Insiders +### VS Code +Setup command: ```bash npx -y defang@latest mcp setup --client=vscode ``` +Once setup is complete, you can interact with the AI coding agent using Defang-related actions like `check defang services` or [other prompts](#example-prompts). Here's an example of what it could look like: + ![VS Code](/img/mcp-concept/vscode.png) +### VS Code Insiders + +Setup command: + +```bash +npx -y defang@latest mcp setup --client=vscode-insiders +``` + +Once setup is complete, you can interact with the AI coding agent using Defang-related actions like `check defang services` or [other prompts](#example-prompts). Here's an example of what it could look like: + +![VS Code](/img/mcp-concept/vscode-insiders.png) + ### Claude Desktop 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. +Setup command: + ```bash npx -y defang@latest mcp setup --client=claude ``` +Once setup is complete, you can interact with the AI coding agent using Defang-related actions like `check defang services` or [other prompts](#example-prompts). Here's an example of what it could look like: + ![Claude Desktop](/img/mcp-concept/claude.png) ## MCP Tools @@ -126,3 +148,5 @@ deploy this with defang /Users/yourname/Documents/project1 ``` do I have a service called project1 ``` + +Feel free to try any of these prompts or create your own! diff --git a/static/img/mcp-concept/vscode-insiders.png b/static/img/mcp-concept/vscode-insiders.png new file mode 100644 index 000000000..1f946ef64 Binary files /dev/null and b/static/img/mcp-concept/vscode-insiders.png differ