Shadcn UI v4 MCP Server for VS Code: Setup & Config

What you can do with Shadcn UI v4 in VS Code

Match retrieved UI implementations to the framework and React primitives your project actually uses.

• Resolve a component's dependencies and usage pattern before generating integration code.
• Choose code for the project's framework and, for React, its primitive library.

Before you start: Shadcn UI v4 in VS Code

• Node.js version 18 or above in the source-build prerequisites
• npm tooling for npx; npm or pnpm for source builds
• Client with MCP support

The basic npx command appears directly in the README. The GitHub environment entry is optional and documented separately. Initial defaults are React with Radix and stdio. Use --framework for another implementation; React can select Base UI with --ui-library base. Network examples use SSE or dual mode.

Shadcn UI v4 VS Code configuration

1. Choose VS Code configuration scope

   For Shadcn UI v4 MCP Server, open Workspace: .vscode/mcp.json. Merge into servers; preserve existing inputs.

2. Add Shadcn UI v4 MCP Server to VS Code

   Use the shadcn-ui-mcp-unofficial entry below in servers. Keep Shadcn UI v4 MCP Server's documented stdio connection fields and your other VS Code entries.

3. Check Shadcn UI v4 MCP Server in VS Code

   Shadcn UI v4 MCP Server: Start in VS Code’s MCP controls; inspect output and trust prompts.

{
  "servers": {
    "shadcn-ui-mcp-unofficial": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<optional GitHub credential for a higher request allowance>"
      }
    }
  }
}

Shadcn UI v4 tools available to VS Code

Shadcn UI v4's stored tool list documents 10 tools; compare it with VS Code's connected tool list, because the stored list is not a live check.

list_blocks

Look for list_blocks among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

Browse the block inventory by category.

get_block

Look for get_block among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

Fetch the implementation of a chosen UI block.

list_components

Look for list_components among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

Browse the available component inventory.

get_component_metadata

Look for get_component_metadata among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

get_component_demo

Look for get_component_demo among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

get_component

Look for get_component among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

Fetch the selected component's implementation source.

get_directory_structure

Look for get_directory_structure among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

Inspect how directories are arranged in the source repository.

list_themes

Look for list_themes among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

get_theme

Look for get_theme among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

apply_theme

Look for apply_theme among VS Code's agent-mode tools after starting Shadcn UI v4 through the MCP controls.

Shadcn UI v4: full stored tool descriptions

Troubleshooting Shadcn UI v4 in VS Code

• Make npx @jpisnice/shadcn-ui-mcp-server (Node.js/npm) available in the workspace, container, or remote environment hosting Shadcn UI v4 MCP Server. Start through VS Code's MCP controls; inspect output and trust prompts.
• For Shadcn UI v4 MCP Server, keep GITHUB_PERSONAL_ACCESS_TOKEN out of version control; VS Code documents input variables and secret handling.
• Shadcn UI v4 MCP Server uses stdio here: VS Code must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
• Known limitation: Omitting a GitHub token leaves the lower documented request allowance.
• Known limitation: Base UI is not an alternative for the non-React framework modes.
• General VS Code troubleshooting lives in the /clients/vscode guide.

Frequently asked questions