shads.app docs

Connect VS Code to shads

One-click install (GitHub Copilot agent mode). Set up the shads.app MCP server in VS Code, check the connection, and use it to install shadcn/ui themes.

Install

Install in VS Code Install in VS Code Insiders

The button opens VS Code and asks you to confirm. It installs the public tools; add a key afterwards for Pro tools.

Or run:

code --add-mcp '{"name":"shads","type":"http","url":"https://mcp.shads.app"}'

Or edit the config file by hand:

.vscode/mcp.json (this workspace)

{
  "servers": {
    "shads": {
      "type": "http",
      "url": "https://mcp.shads.app"
    }
  }
}

Servers live under a top-level “servers” key, not “mcp.servers” in settings.json. Run “MCP: Open User Configuration” for a global config.

Add your API key (optional)

Skip this for public themes. Pro adds your saved themes and AI generation.

Create a key in Account settings → API keys (Pro plan). Keep it out of git.

VS Code asks for the key when the server starts and stores it securely.

{
  "inputs": [
    {
      "type": "promptString",
      "id": "shads-api-key",
      "description": "shads.app API key",
      "password": true
    }
  ],
  "servers": {
    "shads": {
      "type": "http",
      "url": "https://mcp.shads.app",
      "headers": {
        "Authorization": "Bearer ${input:shads-api-key}"
      }
    }
  }
}

Check that it works

Open .vscode/mcp.json and click Start above shads, or run “MCP: List Servers”. Then enable the tools in the agent-mode tools picker.

Then ask your assistant:

Use the shads MCP server and run connection_status.

It returns the server version, whether your API key was accepted, and which tools are unlocked.

Try it

  • Use shads to install the Workspace theme in this repo.
  • Use shads to list the starter themes.
  • Use shads to validate this theme.json.

More jobs: recipes.

Troubleshooting

  • Nothing happens after editing settings.json. VS Code reads .vscode/mcp.json with a top-level “servers” key. A “mcp.servers” entry in settings.json is not the supported location.
  • Account tools are missing. Keep headers in .vscode/mcp.json. VS Code has dropped headers from a workspace .mcp.json in the past, so verify with connection_status.

More general fixes: MCP troubleshooting. Vendor documentation: VS Code MCP docs (checked 2026-10-19).