shadcn-svelte-mcp Svelte Themes

Shadcn Svelte Mcp

An MCP server that exposes shadcn-svelte documentation to MCP clients such as Codex and Claude Code.

shadcn-svelte Docs MCP Server

An MCP server that exposes shadcn-svelte documentation to MCP clients such as Codex. It indexes local documentation files, serves them as MCP resources, and provides tools for searching components, retrieving installation steps, and extracting usage examples.

Features

  • Serves shadcn-svelte docs over the Model Context Protocol.
  • Loads documentation into an in-memory cache on startup.
  • Exposes docs as MCP resources with shadcn-svelte:// URIs.
  • Provides search with synonym expansion and fuzzy matching.
  • Supports component docs, general resources, examples, guides, and patterns as files are added under docs/.
  • Includes diagnostics for cache status, resource counts, and runtime details.

Requirements

  • Bun

Installation

bun install
bun run build

Running

bun start

The server runs on stdio and is intended to be launched by an MCP client.

On Linux and macOS, if your MCP client expects the built file to be executable, run:

chmod 755 build/index.js

The project build script does not run chmod so it remains Windows-compatible.

MCP Client Configuration

Example MCP configuration:

{
  "mcpServers": {
    "shadcn-svelte-docs": {
      "command": "bun",
      "args": ["D:/Files/Add_Path/"]
    }
  }
}

Use the absolute path for your local checkout. Run bun run build before starting the MCP server so build/index.js exists.

Available Tools

search_all_docs

Search across all cached documentation.

Input:

{
  "query": "dialog"
}

get_component_docs

Return the full markdown documentation for a component.

Input:

{
  "component_name": "alert-dialog"
}

get_resource_docs

Return documentation for a specific MCP resource URI.

Input:

{
  "uri": "shadcn-svelte://component/button"
}

get_installation_info

Extract the installation section from a component document.

Input:

{
  "component_name": "button"
}

get_usage_examples

Extract code blocks from a component document. Results are capped to keep responses manageable.

Input:

{
  "component_name": "form"
}

get_example

Find the best matching usage example by topic or component name.

Input:

{
  "topic": "form validation"
}

list_all_components

List all available component resources with descriptions.

Input:

{}

get_diagnostics

Return cache status, resource counts, memory usage, and runtime details.

Input:

{
  "include_samples": true
}

update_docs

Reload the documentation cache. If docs/ is a Git checkout, the server will attempt a git pull before reloading.

Input:

{}

Resources

Documentation files are exposed through resource URIs using the shadcn-svelte:// protocol.

Examples:

  • shadcn-svelte://component/button
  • shadcn-svelte://component/alert-dialog
  • shadcn-svelte://guide/readme
  • shadcn-svelte://example/forms/basic
  • shadcn-svelte://pattern/data-table

Documentation Layout

The server indexes files under docs/.

docs/
  components/
    accordion.md
    alert.md
    alert-dialog.md
    button.md
    card.md
    dialog.md

Component markdown files should use kebab-case names, such as alert-dialog.md. The component resource URI becomes shadcn-svelte://component/alert-dialog.

The cache currently supports these file types:

  • .md
  • .svelte
  • .ts
  • .js
  • .json
  • .css
  • .txt

Development

bun run build
bun run test
bun run test:watch
bun run test:ui
bun run test:coverage

The main implementation is in src/index.ts. Tests are in src/index.test.ts.

Project Structure

.
├── docs/
│   └── components/
├── src/
│   ├── index.ts
│   └── index.test.ts
├── build/
├── package.json
├── tsconfig.json
└── vitest.config.ts

License

Apache-2.0

Top categories

Loading Svelte Themes