shadcn-svelte-mcp

shadcn-svelte-mcp

[!IMPORTANT] The hosted server goes down in a few days. I pay for https://shadcn.svelte-apps.me/mcp out of pocket and I'm turning it off soon. Switch to the npm package: npx -y shadcn-svelte-mcp. It runs the same server on your machine, so the shutdown doesn't affect you. Want an HTTP endpoint instead? Deploy it yourself to Fly.io or Render. ❤️ Sponsor @Michael-Obele if you want to chip in. Thank you!

Real-time shadcn-svelte docs for AI editors, via tmcp. Scrapes shadcn-svelte.com and bits-ui.com live — no stale docs.

npm (recommended): npx -y shadcn-svelte-mcp · Hosted (shutting down soon): https://shadcn.svelte-apps.me/mcp · Local dev: bun run src/stdio.ts

What you get

• Live shadcn-svelte + Bits UI docs (no stale bundles)
• 5 tools: list, get, search, icons, Bits UI API
• 5 guided prompts: install a component, set up theming, CLI usage, project init, and which tool to use when
• Intent-aware search (concept queries, categories, multi-query) with typo tolerance + install snippets per package manager
• 1,800+ Lucide icons with import snippets
• 3-day cache (memory + disk) for fast repeats
• Optional: a design skill and a per-editor agent on top of the server

Connect (30 seconds)

npm (recommended): runs on your machine; this is the setup to use once the hosted server is off.

{
  "mcpServers": {
    "shadcn-svelte": { "command": "npx", "args": ["-y", "shadcn-svelte-mcp"] }
  }
}

CLI (stdio):

claude mcp add shadcn-svelte -- npx -y shadcn-svelte-mcp
codex mcp add shadcn-svelte -- npx -y shadcn-svelte-mcp

Needs Node >= 20.9. Bun users: swap npx for bunx.

Hosted (shutting down in a few days): https://shadcn.svelte-apps.me/mcp still works for now, but I'm turning it off soon. If your config points here, switch to npm above.

VS Code: MCP: Add Server → paste the URL. Cursor / Windsurf: add an http server with the same URL. Zed: use npx -y mcp-remote https://shadcn.svelte-apps.me/mcp. Verify: MCP: List Servers.

{
  "mcpServers": {
    "shadcn-svelte": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://shadcn.svelte-apps.me/mcp"]
    }
  }
}

CLIs:

claude mcp add --transport http shadcn-svelte https://shadcn.svelte-apps.me/mcp
codex mcp add shadcn-svelte --url https://shadcn.svelte-apps.me/mcp

Editor-specific notes

• Cursor: Settings → MCP → add a stdio server running npx -y shadcn-svelte-mcp.
• Windsurf: ~/.codeium/windsurf/mcp_config.json → mcpServers, restart.
• Zed: Settings → Agent → add command npx -y shadcn-svelte-mcp.
• Gemini CLI: ~/.gemini/settings.json → command / args with npx -y shadcn-svelte-mcp.

Tools

Start with get, fall back to search, use bits-ui-get only for primitive internals.

Try: "Install button", "List all components", "Find date-picker-like components", "Find a dark mode theme toggle button", "Icons for settings", "Bits UI Dialog API".

Skill

Polished SvelteKit UI skill at skills/shadcn-sveltekit-design/SKILL.md:

npx skills add Michael-Obele/shadcn-svelte-mcp --skill shadcn-sveltekit-design

The skill lands in .agents/skills/, which Zed, Claude Code, OpenCode, and other skills-capable tools all read.

[!WARNING] Zed users: use the npx skills add command above, not Zed's built-in agent: create skill from url. That command imports a single SKILL.md from a GitHub URL — it does not fetch the skill's references/ folder, so the two reference files this skill links to (references/mcp-workflow.md and references/ui-rules.md) will be missing and the skill will run degraded. To use Zed's URL import anyway, follow it with the agent snippet in your AGENTS.md.

Agent

A ready-made Shadcn Svelte agent ships in agents/ — the same MCP-grounded workflow as the skill, packaged per editor with the correct frontmatter for each format. Full matrix: agents/README.md.

BASE=https://raw.githubusercontent.com/Michael-Obele/shadcn-svelte-mcp/main/agents

# VS Code (Copilot custom agent — appears in the chat agent picker)
mkdir -p .github/agents
curl -fsSL "$BASE/vscode-shadcn-svelte.agent.md" -o .github/agents/shadcn-svelte.agent.md

# Claude Code (VS Code also reads .claude/agents/)
mkdir -p .claude/agents
curl -fsSL "$BASE/claude-shadcn-svelte.md" -o .claude/agents/shadcn-svelte.md

# Cursor
mkdir -p .cursor/rules
curl -fsSL "$BASE/cursor-shadcn-svelte.mdc" -o .cursor/rules/shadcn-svelte.mdc

# Windsurf / Devin
mkdir -p .windsurf/rules
curl -fsSL "$BASE/windsurf-shadcn-svelte.md" -o .windsurf/rules/shadcn-svelte.md

# OpenCode
mkdir -p .opencode/agents
curl -fsSL "$BASE/opencode-shadcn-svelte.md" -o .opencode/agents/shadcn-svelte.md

# Zed / Codex / Gemini CLI — append the snippet instead
curl -fsSL "$BASE/agents-md-snippet.md" >> AGENTS.md   # Zed + AGENTS.md readers
curl -fsSL "$BASE/agents-md-snippet.md" >> GEMINI.md   # Gemini CLI

Notes:

• Keep the MCP server named shadcn-svelte (as in Connect) so the agent's shadcn-svelte/* tool bindings resolve.
• Without the MCP, the agent says so and falls back to official shadcn-svelte docs instead of guessing.

Verify

claude mcp list
codex mcp list
curl -I https://shadcn.svelte-apps.me/health

Local development

bun install
bun run dev # http://localhost:3000/mcp, health at /health
bun run check # type check

Stdio for local clients: bun run src/stdio.ts. Layout: src/index.ts (HTTP), src/stdio.ts, src/worker.ts, src/mcp/tools/, src/mcp/prompts/, src/services/.

Contributing

MIT — see LICENSE. Please read Contributing + Code of Conduct.

Contact: [email protected] · Maintainer: Michael Obele