# How to connect your IDE to MCP

The Model Context Protocol (MCP) connects your AI assistants to real-world tools and data sources. Instead of manually copying and pasting information between tools and your AI assistant, your AI assistant can interact directly with APIs, databases, and services through standardized tool calls.

[Gram](https://app.getgram.ai) makes setting up MCP servers simple by hosting servers in the cloud, so you don't need to handle local configurations, manage infrastructure, or deal with authentication complexity. With Gram, you can turn any OpenAPI document into a fully functional MCP server in minutes.

This guide shows you how to create a Gram-hosted MCP server using Taskmaster, a full-stack CRUD application for task and project management, and use it across some of the most popular IDE-based MCP clients. Taskmaster includes a web UI for managing projects and tasks, a built-in HTTP API, OAuth 2.0 authentication, and a Neon PostgreSQL database for storing data. Try the [demo app](https://taskmaster-speakeasyapi.vercel.app/) to see it in action.

Find the full code and OpenAPI document in the [Taskmaster repository](https://github.com/speakeasy-api/taskmaster).

## Prerequisites

To follow this guide, you need:

- A [Gram account](https://app.getgram.ai)
- An MCP client (This guide covers VS Code with Copilot, Windsurf, and Amp. For Cursor, see the [dedicated Cursor guide](/docs/mcp/build/integrate/clients/using-cursor-with-gram-mcp-server). For Claude Desktop, see the [dedicated Claude Desktop guide](/docs/mcp/build/integrate/clients/using-claude-desktop-with-gram-mcp-server).)

## Creating an MCP server

Before connecting your IDE to a Taskmaster MCP server, you first need to create one. Follow our guide to [creating a Taskmaster MCP server](/docs/mcp/build/examples/creating-taskmaster-mcp-server).

Once your Taskmaster MCP server is ready, you can connect it to your IDE. The following sections show you how to add the MCP server configuration to the most popular IDE-based MCP clients.

## Adding the Gram-hosted MCP server to Cursor

For detailed instructions on connecting Cursor to Gram-hosted MCP servers, including using the Gram CLI for quick setup, see the [dedicated Cursor guide](/docs/mcp/build/integrate/clients/using-cursor-with-gram-mcp-server).

## Adding the Gram-hosted MCP server to VS Code with GitHub Copilot

VS Code supports MCP through GitHub Copilot with version 1.101 or later.

### 1. Add the MCP server to the VS Code settings file

Open the VS Code command palette with `Ctrl/Cmd + Shift + P` and search for `Add MCP Server`. Select the **HTTP** option.

![Screenshot showing the VS Code Add HTTP MCP Server dialog](/assets/docs/gram/img/guides/mcp-installing-ide/vscode-add-http-server.png)

Paste in the URL of your Taskmaster MCP server from the [Creating a Taskmaster MCP server](/docs/mcp/build/examples/creating-taskmaster-mcp-server) guide and enter the server name.

![Screenshot showing pasting the MCP server URL](/assets/docs/gram/img/guides/mcp-installing-ide/vscode-paste-mcp-url.png)

Your MCP server will now show up in the list of MCP servers in the `settings.json` file.

### 2. Configure authentication

If you're using an **authenticated server** or you're using an environment variable, you can add the authentication details to the `settings.json` file using the configuration from your Taskmaster creation guide.

![Screenshot showing the VS Code settings.json file with MCP server configuration](/assets/docs/gram/img/guides/mcp-installing-ide/vscode-add-mcp-config-vars.png)

```json
{
  "mcpServers": {
    "GramTaskmaster": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://app.getgram.ai/mcp/your-taskmaster-slug",
        "--header",
        "MCP-TASK-MASTER-API-KEY:<your-key-here>"
      ]
    }
  }
}
```

### 3. Start the server

Open the command palette (`Ctrl/Cmd + Shift + P`) and type `MCP: List Servers` to see available servers. Click on the Gram-hosted MCP server to start it.

### 4. Use the MCP server tools with Copilot

The Taskmaster tools are now available in the Copilot chat interface. You can enable and disable specific tools as needed.

You can ask questions like:

```
Create a new task called "Review code changes" with description "Check the latest commits for quality and security"
```

<div className="flex justify-center">
  
  <video controls>
    <source src="/assets/docs/gram/videos/vscode-prod-check.mp4" type="video/mp4"></source>
    Your browser does not support the video tag.
  </video>
</div>

## Adding the Gram-hosted MCP server to Windsurf

Windsurf manages MCP servers through its built-in plugin interface.

### 1. Access Windsurf plugin settings

Click **Windsurf** in the top menu bar, then navigate to **Settings -> Windsurf Settings** to open the main configuration interface.

Under the **Plugins (MCP Servers)** section, click **Manage plugins** to access the plugin configuration area. Click **View raw config** to open the configuration file editor.

![Screenshot showing the Windsurf manage plugins interface](/assets/docs/gram/img/guides/mcp-installing-ide/windsurf-manage-plugins.png)

### 2. Add the MCP server configuration

In the `mcp_config.json` file that opens, replace the contents with your Taskmaster MCP server configuration from the [Creating a Taskmaster MCP server](/docs/mcp/build/examples/creating-taskmaster-mcp-server) guide:

```json
{
  "mcpServers": {
    "GramTaskmaster": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://app.getgram.ai/mcp/your-taskmaster-slug",
        "--header",
        "MCP-TASK-MASTER-API-KEY:<your-key-here>"
      ]
    }
  }
}
```

For an authenticated server, use the following configuration instead:

```json
{
  "mcpServers": {
    "GramTaskmaster": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://app.getgram.ai/mcp/your-taskmaster-slug",
        "--header",
        "Authorization: ${GRAM_KEY}"
      ],
      "env": {
        "GRAM_KEY": "Bearer your-gram-api-key"
      }
    }
  }
}
```

Replace `your-taskmaster-slug` with the actual slug from your Taskmaster MCP server configuration.

Save the file.

### 3. Activate the plugin

In the **Manage plugins** tab, click **Refresh** to reload the plugin configuration. The MCP server plugin will now appear in your available plugins and is ready to use.

![Screenshot showing the MCP server successfully installed in Windsurf](/assets/docs/gram/img/guides/mcp-installing-ide/windsurf-mcp-installed.png)

## Adding the Gram-hosted MCP server to Amp using the VS Code extension

[Amp](https://ampcode.com/manual#mcp) is Sourcegraph's agentic coding tool, available as a VS Code extension and command-line tool.

The Amp VS Code extension has a GUI for adding and managing MCP servers.

### 1. Open Amp settings

Click the **Settings** icon in the side window. Scroll down to the **MCP Servers** section and click **Add MCP Server**.

### 2. Add the MCP server configuration

Complete the MCP server details using the configuration from your Taskmaster MCP server:

- **Server Name:** `taskmaster`
- **Command or URL:** `npx`
- **Arguments:** Use the arguments from your Taskmaster MCP server configuration
- **Environment Variables:** Use the environment variables from your Taskmaster MCP server configuration

![Screenshot showing the Amp MCP server configuration interface](/assets/docs/gram/img/guides/mcp-installing-ide/amp-mcp-server-config.png)

You can also modify the `settings.json` file directly.

![Screenshot showing the Amp settings.json file with MCP server configuration](/assets/docs/gram/img/guides/mcp-installing-ide/amp-settings-json.png)

### 3. Use the MCP server tools

Amp automatically loads your Gram-hosted MCP server. You can now interact with the Taskmaster API through natural language prompts like:

```
Create a new task called "Check deployment status" with description "Verify that all services are running correctly"
```

![Screenshot showing Amp successfully calling the deployment vibes check](/assets/docs/gram/img/guides/mcp-installing-ide/amp-deployment-vibes.png)

## Adding the Gram-hosted MCP server to Amp CLI

Amp can be configured through the `settings.json` file.

### 1. Access the Amp CLI configuration file

The location of the Amp CLI configuration file varies by operating system:

- **macOS:** `~/.config/amp/settings.json`
- **Windows:** `%APPDATA%\amp\settings.json`
- **Linux:** `~/.config/amp/settings.json`

### 2. Add the MCP server configuration

Add the `amp.mcpServers` setting with your Taskmaster MCP server configuration from the [Creating a Taskmaster MCP server](/docs/mcp/build/examples/creating-taskmaster-mcp-server) guide to the configuration file.

For a public server, the configuration will look like this:

```json
{
  "amp.mcpServers": {
    "GramTaskmaster": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://app.getgram.ai/mcp/your-taskmaster-slug",
        "--header",
        "MCP-TASK-MASTER-API-KEY:${MCP_TASK_MASTER_API_KEY}"
      ],
      "env": {
        "MCP_TASK_MASTER_API_KEY": "your-api-key"
      }
    }
  }
}
```

![Screenshot showing the Amp settings.json file with MCP server configuration](/assets/docs/gram/img/guides/mcp-installing-ide/amp-settings-json.png)

For an authenticated server, the configuration will look like this:

```json
{
  "amp.mcpServers": {
    "GramTaskmaster": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://app.getgram.ai/mcp/your-taskmaster-slug",
        "--header",
        "Authorization: ${GRAM_KEY}"
      ],
      "env": {
        "GRAM_KEY": "Bearer your-gram-api-key"
      }
    }
  }
}
```

### 3. Use the MCP server tools

Amp automatically loads your Gram-hosted MCP server. You can now interact with the Taskmaster API using natural language prompts like:

```
Create a new task called "Check deployment status" with description "Verify that all services are running correctly"
```

![Screenshot showing Amp CLI successfully calling the deployment vibes check](/assets/docs/gram/img/guides/mcp-installing-ide/amp-cli-showcase.png)

Amp recommends being selective with MCP tools for the best performance. Too many available tools can reduce model performance, so consider disabling unused MCP tools by adding them to the `amp.tools.disable` setting.

## Troubleshooting

Here are some common issues and solutions:

### Server not connecting

If your MCP client can't connect to the Gram server:

- Verify the MCP server URL is correct in your configuration.
- Check that the API behind the MCP server is reachable from your machine.
- Ensure the `npx` command is available (reinstall Node.js if needed).
- Try restarting your MCP client after making configuration changes.

### Authentication errors

If you're using an authenticated server and getting authentication errors:

- Verify your Gram API key in the dashboard under **Settings -> API Keys**.
- Ensure the API key is correctly formatted with the `Bearer ` prefix.

### Tools not appearing

If the tools aren't showing up in your MCP client:

- Test the MCP server in the **Gram Playground** first to ensure it's working.
- Check that the toolset includes the tools you expect to use.
- Verify the environment is correctly configured with the required variables.
- Look for any error messages in your MCP client's logs.

## What's next

Ready to build your own MCP server? [Try Gram today](/book-demo) and see how easy it is to turn any API into agent-ready tools that work across all your development environments.