How to Use Supabase MCP in VSCode and Cursor

You’ve probably seen all the hype about MCPs, and you might be wondering what an MCP is or whether you should pay attention to it.

This blog will explain an MCP, why it’s a big deal, and how to set both the GitHub and Supabase MCPs in VSCode and Cursor so you can start using them immediately.

What is MCP?

Model Context Protocol (MCP) is a new protocol from Anthropic that defines a unified way for LLMs to interact with outside data sources.

Before MCP, LLMs could only access their training data and user-provided local files. They could not directly access outside sources in real time. For example, your coding assistant could not read your database schema, so its ability to help you debug was limited.

How MCPs work

MCPs have a client-server architecture. The LLM client interacts with users, and the server stores the MCP logic. The client calls the server when it needs certain information or wants to perform a specific action.

MCP servers have two main concepts: tools and resources. Tools are callable functions that take inputs, perform operations, and return outputs. Resources refers to data that is available to the client and can be used by the tools as needed.

For example, the GitHub MCP server has tools that allow it to list repositories, and the resources it can access include repositories, issues, and pull requests.

This allows the application hosting the LLM (the client) to get real-time dynamic information and frees them from training data limitations like training cut-off dates.

MCP vs API - What’s the Difference?

MCP seems a lot like traditional APIs, except that MCP is specifically designed for LLM clients and can work across all MCP clients without needing extra code or config.

While APIs generally require that you write glue code to integrate client applications, each MCP server internally calls its specific APIs and handles data transformations using the standard protocol.

This removes the need for service-specific code, allowing LLM applications to interact with many different systems without developers needing to create distinct integrations for each service.

MCP abstracts the details of specific APIs and creates a plug-and-play layer that LLMs can use. This makes MCP scalable and reduces developers' maintenance headaches.

Why is MCP Important?

Before MCP, you would need to create custom integrations for every external service your LLM needed to access, and you’d also have to manage these connections individually. This was time-consuming and inefficient.

MCP streamlines this process by allowing LLMs to connect to multiple external systems through a single protocol. This makes it much easier to integrate new services and greatly increases the usefulness of LLM applications.

How to Enable MCP in VSCode

To start using MCP, you need to set up your text editor to work with it. For VSCode, you’ll need to use VSCode Insiders, as it is not yet supported in the stable version. You can download it here and it works right along the normal version.

Open the installation, open the user settings, search “MCP,” and ensure they are enabled. Then, click the “Edit in settings.json” as illustrated below:

How to Test the MCP Connection with GitHub’s MCP Server

Edit the settings.json file to look like this:

{
  "mcp": {
    "inputs": [],
    "servers": {
      "github": {
        "command": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-github"
        ],
        "env": {
          "GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_GITHUB_TOKEN>"
        }
      }
    }
  },
  "chat.mcp.discovery.enabled": true,
  "editor.inlineSuggest.suppressSuggestions": true,
  "cody.suggestions.mode": "auto-edit (Beta)",
  "window.commandCenter": false,
}

Replace this <YOUR_GITHUB_TOKEN> with your actual token. You can get it from GitHub developer settings as shown below:

This adds the GitHub MCP server and gives it API access via the token. The GitHub server has over 20 tools you can use, all of which are documented here. This server lets you do some pretty cool stuff, like creating issues on your behalf and searching public code.

Now start the server from the settings start option shown below or by searching MCP, selecting “List MCP,” and then starting the one you need.

We can now open the Copilot chat, turn on Agent mode, and ask about GitHub repos. You should see it uses the configured GitHub MCP server to answer GitHub-specific questions.

Once the feature is ready, the general availability of MCP servers in the stable build of VSCode will be added.

How to Enable MCP in Cursor

In Cursor, the process is almost similar. Open settings, select the “MCP” tab and click the “Add new global MCP Server” button.

It will take you to a settings page, paste in the following to add the GitHub MCP server:

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github",
        "<YOUR_GITHUB_TOKEN>"
      ]
    }
  }
}

How to Test the MCP Connection with GitHub’s MCP Server

In the settings file above, replace <YOUR_GITHUB_TOKEN> with your actual token following the process shown in the VSCode section above. The main difference is how you pass environment variables.

To test it, open cursor chat and ask some questions as before. It will indicate that it uses GitHub’s MCP tools to answer the questions.

How to Add and Use Official Supabase MCP in VSCode

Setting up Supabase’s MCP server requires adding more config to the settings. Add this below the GitHub entry in the settings page:

"supabase": {
  "command": "npx",
  "args": [
          "-y",
          "@supabase/mcp-server-supabase@latest",
          "--access-token",
          "<personal_access_token>"
        ],
}

Replace <persoanl_access_token> with a Supabase access token, which you can get here.

In this case, the Supabase MCP accepts command-line arguments instead of environment variables, so we pass the access token directly. Start the server so Copilot can pick it up, and we are ready to test it.

Open the Copilot chat to agent mode and ask questions about your Supabase projects. The Supabase MCP server has tools that allow you to manage projects, get project information, and carry out some database operations, including running raw SQL and applying migrations.

You can find a full list of tools and more information in this GitHub repository.

How to Add and Use Supabase MCP in Cursor

On the cursor side, it’s pretty much the same process: you paste in the same setting as above, just below the GitHub one, and replace the token with an actual token.

Cursor should pick it up and activate it once you save and restart it. You will know all is well when you see this little green dot on the MCP settings page in Cursor:

Open the Cursor chat to agent mode and try to ask it questions about your Supabase projects as before. It should show you as it steps through the relevant tools to answer your questions.

Notes and Resources

Here are some resources on MCPs, AI and some links I think will be useful:

• VSCode Insiders

• MCP Official Docs

• MCP Servers list

• Supabase Official MCP Server

• Supabase MCP Offical Docs

• Cursor Docs on MCP