DEV Community

Cover image for Use the Umbraco MCP in your IDE with GitHub Copilot
Luuk Peters
Luuk Peters

Posted on

Use the Umbraco MCP in your IDE with GitHub Copilot

At Codegarden 2025, we were introduced to the awesome first version of the Umbraco MCP by Matthew and Phil. And while still in development, it already shows great promise. As someone who uses GitHub Copilot daily, I wondered: Can I integrate Copilot with the Umbraco MCP in my IDE? Turns out—it’s totally doable.

For this example, I’m using Visual Studio on Windows 11, but the general approach should work on other operating systems and IDEs as well. The idea is to run the Umbraco MCP locally and connect GitHub Copilot to it so I can use it in Visual Studio. This way, when my local Umbraco instance is running, Copilot can query Umbraco for more context or even execute actions within Umbraco.

Before we can actually do anything with the mcp there are a few things we need to do first.

Install Node.js

The Umbraco MCP is written in Node.js and requires version 22 or higher. So we need to have Node.js installed on the machine that runs the mcp server, in this case my local development machine. You can get Node.js from their website.

Create an Umbraco API User

The mcp works with the management API that was introduced in Umbraco 14. To access the management API, you obviously need to be authorized to access it. So we need to create credentials for when the mcp is accessing the management API. This is done by creating an Umbraco API User in the backoffice of the Umbraco instance the Umbraco MCP needs to access.

I'm just giving the Umbraco API maximum access by making it an administrator because this is just for development. Obviously be careful in other scenarios!

  1. Log into the Umbraco backoffice, go to the member section and create a new API User
    Showing location of the add API User option in the backoffice of Umbraco

  2. An API User can have one or more client credentials. These are the credentials we need for the Umbraco MCP. So when the API User is created, open the details of the user and add new client credentials. Remember these credentials, we need them later. Also Assign access to all content and media.
    Where to add client credentials to an API User in the backoffice of Umbraco

Now that we have the prerequisites done, it's time to add the mcp server to GitHub Copilot. You need Visual Studio 17.14 or later for this.

Create an mcp file in the solution

Create a new file that will hold the Umbraco MCP configuration in the root of your solution: .mcp.json. This file will be solution scoped, but you can have other scopes by placing the file in other locations. See the official documentation for that.

Add the following server to the file, update the variables and save the file:

{
    "servers": {
      "umbraco-mcp": {
        "command": "npx",
        "args": ["@umbraco-mcp/umbraco-mcp-cms@alpha"],
        "env": {
          "UMBRACO_CLIENT_ID": "CLIENT_ID",
          "UMBRACO_CLIENT_SECRET": "CLIENT_SECRET",
          "UMBRACO_BASE_URL": "URL",
          "NODE_TLS_REJECT_UNAUTHORIZED": "0"
        }
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

The CLIENT_ID and CLIENT_SECRET are the client credentials we set up for the API User in Umbraco. Make sure the base URL does not end with a /, so for instance: https://localhost:44327. And because I use a self signed certificate locally, I set NODE_TLS_REJECT_UNAUTHORIZED to 0.

As an example, I use this in my testproject:

{
    "servers": {
      "umbraco-mcp": {
        "command": "npx",
        "args": ["@umbraco-mcp/umbraco-mcp-cms@alpha"],
        "env": {
          "UMBRACO_CLIENT_ID": "umbraco-back-office-mcpuser",
          "UMBRACO_CLIENT_SECRET": "test123456!",
          "UMBRACO_BASE_URL": "https://localhost:44327",
          "NODE_TLS_REJECT_UNAUTHORIZED": "0"
        }
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

Getting it up and running in Visual Studio

Open your Umbraco Visual Studio project. In agent mode, you will now see the Umbraco MCP in the tools list.

The list of Umbraco MCP tools in Github Copilot

It will shown an error, because it cannot connect to our Umbraco instance because it's not running. Start your Umbraco instance and reload the tool. It should now show 195 available tools!
Overview of the Umbraco tools

As long as your Umbraco instance is running, you can query your Umbraco instance from you GitHub Copilot chat. It will ask for permission the first time a tool is used and you can decide how long you want to grant permission before it will ask for permission again:
Example of a permission prompt

Visual Studio Code

For Visual Studio Code, the idea is the same. I haven't tried it, but the two main differences are:

  • You need to enable MCP support with a setting
  • The location of the .mcp.json file differs.

See the official documentation for Visual Studio Code.

Done!

We can now use the Umbraco MCP in Copilot as long as Umbraco is running! This was just an experiment to see if I could get it to work, the next step is to find out how this can help me during Umbraco development.

But it's already so cool to be able to talk to Copilot and have it access and manage Umbraco:
Example of a chat with Copilot

Top comments (0)