Skip to content
← All install options

Install Better Design MCP in VS Code

Follow the setup below to give VS Code Better Design's systems and interface guidance.

One-click install
Opens VS Code and adds the Better Design MCP server.
Add to VS Code

Setup

Config
json
{
  "servers": {
    "better-design": {
      "type": "http",
      "url": "https://better-design.com/api/mcp",
      "headers": {
        "Authorization": "Bearer <YOUR_API_KEY>",
        "X-Better-Design-Client": "vscode"
      }
    }
  }
}

Choose where VS Code keeps the server

Add to VS Code saves the server for you. To save it by hand, .vscode/mcp.json in the project still works, but VS Code now marks it deprecated. Its docs prefer .mcp.json at the project root, which uses an mcpServers key, or ~/.copilot/mcp-config.json for every project.

To keep the key out of the file, use an input variable in the Authorization header. VS Code asks for the value the first time the server starts and stores it securely.

Check the server in VS Code

Run MCP: List Servers from the Command Palette and select better-design to start it, stop it or show its output. In the Chat view, select Configure Tools to see the Better Design tools.

What the agent can use after setup

Better Design gives the agent design context and review tools. The agent still writes the code, and your repository stays the source of truth.

  • Find a catalog design system or create one for your brand before frontend work starts.
  • Load UI principles for visual choices and UX principles for flows and behavior.
  • Get component and icon guidance that matches the chosen system.
  • Run review rules, comprehension checks and spacing checks on rendered pages.

Fix a VS Code MCP connection

VS Code shows an error indicator in the Chat view when a server fails. Run MCP: List Servers, select better-design and choose Show Output to read the cause.

  • The server never starts: VS Code blocks workspace MCP config in restricted mode. Trust the workspace, or run MCP: Reset Trust if you declined the server earlier.
  • VS Code reports more than 128 tools: a chat request can use at most 128. Turn off tools or whole servers in the tools picker.
  • The output shows a 401: replace the key in the Authorization header with a current one and restart the server.
  • You use Copilot Business or Enterprise: your organization must turn on the MCP servers in Copilot policy, which is off by default.

Questions

Does my Copilot plan limit MCP servers?

Only on Copilot Business and Enterprise, where the organization's MCP policy is off by default. Copilot Free, Pro, Pro+ and Max are not governed by that policy.

Is .vscode/mcp.json still supported?

Yes, VS Code still reads it, but its docs call it deprecated. For a new setup, use .mcp.json at the project root with an mcpServers key.

Which transport does VS Code use?

VS Code tries the HTTP stream transport first and falls back to SSE. Better Design answers over HTTP.

Official VS Code resources

Related