MCP Directory

How to add Shadcn UI v4 MCP Server to Windsurf

Give AI assistants full access to shadcn/ui v4 components, blocks, demos, and metadata across React, Svelte, Vue, and React Native. Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

Last updated June 14, 2026 · 2.8k★ · stdio · apikey

Windsurf config for Shadcn UI v4 MCP Server

npx @jpisnice/shadcn-ui-mcp-server
{
  "mcpServers": {
    "shadcn-ui-v4-mcp-server": {
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "ghp_your_token_here"
      ]
    }
  }
}

Setup steps

  1. 1Open Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
  2. 2Paste the Shadcn UI v4 MCP Server config below.
  3. 3Fill in placeholder secrets, then save.
  4. 4Click Refresh in the MCP panel.
  5. 5Shadcn UI v4 MCP Server's tools become available to Cascade.

Before you start

  • Node.js >= 18.0.0
  • An MCP-compatible client (Claude Desktop, Claude Code, Cursor, VS Code, Continue.dev)
  • Optional: a GitHub Personal Access Token (no scopes needed) to raise the API rate limit to 5000 requests/hour

What Shadcn UI v4 MCP Server can do in Windsurf

get_component

Get the source code for a specific shadcn/ui component.

get_component_demo

Get example/demo code showing how to use a component.

list_components

List all available shadcn/ui components.

get_component_metadata

Get a component's dependencies, description, and configuration details.

get_block

Get a complete block implementation (e.g. dashboards, calendars, forms).

list_blocks

List all available blocks with their categories.

get_directory_structure

Explore the repository directory structure for components and blocks.

Security

Works without authentication at 60 GitHub API requests/hour. A GitHub Personal Access Token (no scopes required) is optional but recommended to raise the limit to 5000 requests/hour; pass it via the --github-api-key flag or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable. Avoid hardcoding the token in shared config files.

Shadcn UI v4 MCP Server + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the Shadcn UI v4 MCP Server config there under the "mcpServers" key and restart the client.

Is Shadcn UI v4 MCP Server safe to use with Windsurf?

Works without authentication at 60 GitHub API requests/hour. A GitHub Personal Access Token (no scopes required) is optional but recommended to raise the limit to 5000 requests/hour; pass it via the --github-api-key flag or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable. Avoid hardcoding the token in shared config files.

Do I need a GitHub token?

No. The server works without one at 60 requests/hour. Adding a GitHub Personal Access Token (no scopes required) raises the limit to 5000 requests/hour, which is recommended for regular use.

Which frameworks are supported?

React (default, via shadcn/ui v4), Svelte (shadcn-svelte), Vue (shadcn-vue), and React Native (react-native-reusables). Select one with the --framework flag. For React you can also choose Radix UI or Base UI primitives via --ui-library.

What transport modes are available?

stdio (default, for CLI and editor integrations), sse (Server-Sent Events for HTTP/multi-client deployments), and dual (both simultaneously). The SSE server defaults to port 7423.

View repo Full Shadcn UI v4 MCP Server page