Setup MCP Server in VS Code with GitHub Copilot Extension

Overview

Set up the Siteimprove MCP server in Visual Studio Code by adding the server configuration to the mcp.json file, starting the server, and authenticating with your Siteimprove Platform Credentials.

Prerequisites

• Visual Studio Code
• GitHub Copilot Extension
• Siteimprove Platform Credentials

Setup MCP Server in VS Code

1. Open View > Command Palette in the top menu.
   
2. Search for MCP: Open User Configuration it should pull up the mcp.json file path.
3. In the mcp.json file copy the following code into the body of the Json file as shown below
4. Save the file.
5. Reload VS Code (if necessary).

Code to enter:

{
  "servers": {
    "accessibility": {
      "type": "http",
      "url": "https://mcp.siteimprove.com/mcp",
      "oauth": {
        "clientId": "8985f072-09c6-4284-9cfa-37f24b730182"
      }
    }
  },
  "inputs": []
}

Screenshot of file path and code:

Authenticate into the MCP server in VS Code

1. Open the Extensions panel on the lefthand side in VS Code.
2. Under the MCP Servers - Installed area you should see accessibility shown if the above steps were completed to install the MCP server.
3. Under the Settings (cog wheel icon) menu select Start Server.
4. The Output panel should open, then you will see a prompt open that askes The MCP Server Definition accessibility wants to authenticate to identity.siteimprove.com.
5. Select Allow button.
6. Another prompt will come up asking Do you want Code to open the external website?
7. Select Open button.
8. Your default browser will open up a tab or window asking for consent for the MCP server to access the MCP server and authenticate.
   
9. Select Allow.
10. It should sign you in or ask you to sign in using your Siteimprove Platform Credentials and ask to reopen Visual Studio Code. Select Open Visual Studio Code button. If that option doesn’t happen, then close the page and go back to VS Code.