Supercharge Your Svelte Development with shadcn-svelte-mcp

Source: Dev.to

Introduction

If you’re building modern web applications with Svelte, you’ve probably encountered shadcn-svelte, a fantastic port of the popular shadcn/ui library. It helps developers create accessible and customizable components with ease.

What if you could have an expert on shadcn‑svelte right inside your code editor—ready to answer questions, scaffold components, and guide you through configuration? That’s where shadcn-svelte-mcp comes in.

What is shadcn-svelte-mcp?

shadcn-svelte-mcp is a Mastra MCP server built specifically for shadcn‑svelte documentation and developer utilities. It bridges the gap between your AI assistant (e.g., Claude, Cursor, Windsurf) and the official shadcn‑svelte resources, ensuring the assistant pulls the correct, Svelte‑first information on demand.

Why it matters

• Accurate, up‑to‑date docs – The assistant retrieves the latest component documentation directly from the source, reducing hallucinations and outdated suggestions.
• Svelte‑first output – Avoids React‑oriented patterns (e.g., asChild) that can slip into responses when the AI is trained on the original shadcn/ui docs.
• Context‑aware advice – Provides best‑practice guidance tailored to your project’s configuration and style.

Key Features

Typical Use Cases

• Component discovery – “Which props does a component accept?”
• Composition guidance – “What’s the recommended composition pattern?”
• Setup reminders – “Which installation step did I forget (Tailwind config, adapters, etc.)?”

These queries are especially valuable when you’re mid‑implementation and need fast, correct answers.

Example Prompts

“Build an admin dashboard page in SvelteKit using shadcn‑svelte: sidebar + top nav + cards + table + pagination + loading states”

“Create a Users management screen: DataTable + search input + filters + Dialog for ‘Create user’ + form validation + toast on success”

“Generate a Settings page: Tabs (Profile/Billing/Security) with forms in each tab, including a Confirm Dialog for destructive actions”

“Scaffold a reusable UserInviteDialog component using Dialog, Input, Select, and Button — plus a clean API for opening/closing”

“I need a responsive layout: Sheet on mobile, Sidebar on desktop, and a breadcrumb header — use shadcn‑svelte components only”

Tip: If your assistant suggests React‑only props, explicitly add: “Svelte 5 + shadcn‑svelte only (no React patterns)”.

Installation

Add the server to your MCP configuration:

{
  "mcpServers": {
    "shadcn-svelte": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse"
      ]
    }
  }
}

This connects to the hosted Mastra MCP server for shadcn‑svelte, providing real‑time access to component documentation and utilities. The repository’s README includes alternative endpoint references, HTTP transport options, and backup host details.

Workflow Pattern

When building a UI, try a two‑step approach:

1. Show the canonical docs example for X
2. Now adapt that example to my exact constraints (e.g., SvelteKit route, form library, Tailwind config)

This keeps the implementation grounded while letting the assistant handle the “glue” work.

Get Started

The project is open‑source on GitHub:

Michael-Obele/shadcn-svelte-mcp

If you find it useful, consider starring the repository.