diff --git a/mcp/assets/quick-start/claude-mcp-config.png b/mcp/assets/quick-start/claude-mcp-config.png new file mode 100644 index 0000000..279d36f Binary files /dev/null and b/mcp/assets/quick-start/claude-mcp-config.png differ diff --git a/mcp/assets/quick-start/mcp-test-poster.png b/mcp/assets/quick-start/mcp-test-poster.png new file mode 100644 index 0000000..2fc861b Binary files /dev/null and b/mcp/assets/quick-start/mcp-test-poster.png differ diff --git a/mcp/assets/quick-start/mcp-test.mp4 b/mcp/assets/quick-start/mcp-test.mp4 new file mode 100644 index 0000000..5fcd7ca Binary files /dev/null and b/mcp/assets/quick-start/mcp-test.mp4 differ diff --git a/mcp/assets/quick-start/mcp-test.webm b/mcp/assets/quick-start/mcp-test.webm new file mode 100644 index 0000000..181d878 Binary files /dev/null and b/mcp/assets/quick-start/mcp-test.webm differ diff --git a/mcp/quick-start.mdx b/mcp/quick-start.mdx new file mode 100644 index 0000000..b9e6ba5 --- /dev/null +++ b/mcp/quick-start.mdx @@ -0,0 +1,114 @@ +--- +title: "MCP quickstart guide" +description: Get up and running with MCP in minutes by connecting your first MCP server to an AI agent. +--- + +import { Callout } from "@/mdx/components"; + + + Unlock AI engineering by turning your API platform into an AI platform with + [Gram](https://app.getgram.ai). Generate agent tools for internal services and + connect to popular third-party APIs from one platform. [Join the + waitlist](https://app.getgram.ai) today. + + +This guide walks you through connecting your first MCP server to an AI agent in under 10 minutes. We'll use Claude Desktop as our AI client to add a file to a new project directory on your computer. + +## Prerequisites + +Ensure the following are installed on your machine: + +- [Claude Desktop](https://claude.ai/download) +- [Node.js](https://nodejs.org) + +## Step 1: Install an MCP server + +We'll use the [Desktop Commander](https://desktopcommander.app/) MCP server, which lets AI agents use your local filesystem as a tool. + +You have two options, depending on your preference: + +**The Desktop Commander auto-install script** + +To let Desktop Commander install the MCP server for you, run this command in your terminal: + +```bash +# Install the Desktop Commander MCP server +npx @wonderwhy-er/desktop-commander@latest setup +``` + +**Manual installation** + +If you prefer to install the MCP server manually (and learn how to install other MCP servers), open Claude Desktop and follow these steps: + +![A screenshot shows highlighted areas that direct the user to click on the Claude menu item, then on Settings, then on the Developer tab, and finally on Edit Config.](./assets/quick-start/claude-mcp-config.png) + +1. In the top menu bar, click on the **Claude** menu item. +2. Select **Settings**. +3. Go to the **Developer** tab. +4. Click on **Edit Config**. + +This opens a Finder or File Explorer window showing the configuration file for Claude Desktop. Open the `claude_desktop_config.json` file in a text editor. + +Paste the following configuration into the file: + +```json +{ + "mcpServers": { + "desktop-commander": { + "command": "npx", + "args": [ + "-y", + "@wonderwhy-er/desktop-commander" + ] + } + } +} +``` + +Save the configuration file. + +## Step 2: Restart Claude Desktop + +Close Claude Desktop completely and then reopen it. The MCP server will now be available. + +## Step 3: Test the connection + +In Claude Desktop, try asking: + +> Add a folder to `~/Desktop` called `mcp-test` and create a file called `hello.txt` with the content `Hello, MCP!` + + + +As shown in the video above, Claude Desktop executes the command using the MCP server, creating the folder and file on your desktop. The file contains the text `Hello, MCP!`. + +## What just happened? + +1. **Claude Desktop** sent your prompt to Claude's API along with a message indicating which tools it can use. +2. **Claude's API** responded with a message that included the MCP server's name and the commands to be executed (first, `create_directory`, then `write_file`). +3. **Claude Desktop** sent the commands to the Desktop Commander MCP server. +4. **Desktop Commander** executed the commands on your local file system, creating the folder and file as requested. + +Steps 2 to 4 are repeated for each command, allowing the AI agent to see the results of its actions and continue the conversation. + +In the end, you see a confirmation message in Claude Desktop notifying you that the folder and file have been created successfully: + +> Done. I've created the mcp-test folder in your Desktop directory and added the hello.txt file with the content 'Hello, MCP!' inside it. + + +## Next steps + +Now that you have MCP working, explore more: + +- **Try other MCP servers**: [Installing MCP Servers: A quickstart guide](/mcp/installing-mcp-servers) +- **Build your own**: [Creating MCP servers](/mcp/protocol-deep-dive)