Shadcn Svelte MCP Server

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn-svelte components, blocks, demos, and metadata. This server enables AI tools like Claude Desktop, Continue.dev, VS Code, Cursor, and other MCP-compatible clients to retrieve and work with shadcn-svelte components more effectively.

Note: This project is forked from Jpisnice/shadcn-ui-mcp-server - a fantastic MCP server for the original shadcn/ui React components. This fork adapts the functionality specifically for shadcn-svelte components.

🚀 Key Features

Component Source Code: Get the latest shadcn-svelte component source code
Component Demos: Access example implementations and usage patterns for Svelte components
Blocks Support: Retrieve complete block implementations (dashboards, calendars, login forms, etc.) adapted for Svelte
Metadata Access: Get component dependencies, descriptions, and configuration details for Svelte
Directory Browsing: Explore the shadcn-svelte repository structure
GitHub API Integration: Efficient caching and intelligent rate limit handling

📦 Quick Start

⚡ Using npx (Recommended)

The fastest way to get started - no installation required!

# Basic usage (rate limited to 60 requests/hour)
npx shadcn-svelte-mcp-server

# With GitHub token for better rate limits (5000 requests/hour)
npx shadcn-svelte-mcp-server --github-api-key ghp_your_token_here

# Short form
npx shadcn-svelte-mcp-server -g ghp_your_token_here

# Using environment variable
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
npx shadcn-svelte-mcp-server

🎯 Try it now: Run npx shadcn-svelte-mcp-server --help to see all options!

🔧 Command Line Options

shadcn-svelte-mcp-server [options]

Options:
  --github-api-key, -g <token>    GitHub Personal Access Token
  --help, -h                      Show help message  
  --version, -v                   Show version information

Environment Variables:
  GITHUB_PERSONAL_ACCESS_TOKEN    Alternative way to provide GitHub token

Examples:
  npx shadcn-svelte-mcp-server --help
  npx shadcn-svelte-mcp-server --version
  npx shadcn-svelte-mcp-server -g ghp_1234567890abcdef
  GITHUB_PERSONAL_ACCESS_TOKEN=ghp_token npx shadcn-svelte-mcp-server

🔑 GitHub API Token Setup

Why do you need a token?

Without token: Limited to 60 API requests per hour
With token: Up to 5,000 requests per hour
Better reliability and faster responses

📝 Getting Your Token (2 minutes)

Go to GitHub Settings:
- Visit GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
- Or: GitHub Profile → Settings → Developer settings → Personal access tokens
Generate New Token:
- Click "Generate new token (classic)"
- Add a note: "shadcn-svelte MCP server"
- Expiration: Choose your preference (90 days recommended)
- Scopes: ✅ No scopes needed! (public repository access is sufficient)
Copy Your Token:
- Copy the generated token (starts with ghp_)
- ⚠️ Save it securely - you won't see it again!

🚀 Using Your Token

Method 1: Command Line (Quick testing)

npx shadcn-svelte-mcp-server --github-api-key ghp_your_token_here

Method 2: Environment Variable (Recommended)

# Add to your shell profile (~/.bashrc, ~/.zshrc, etc.)
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

# Then simply run:
npx shadcn-svelte-mcp-server

🛠️ Editor Integration

VS Code Integration

Method 1: Using Continue Extension

Install Continue Extension:
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "Continue" and install it
Configure MCP Server:
- Open Command Palette (Ctrl+Shift+P)
- Type "Continue: Configure" and select it
- Add this configuration to your settings:

{
  "continue.server": {
    "mcpServers": {
      "shadcn-svelte": {
        "command": "npx",
        "args": ["shadcn-svelte-mcp-server", "--github-api-key", "ghp_your_token_here"]
      }
    }
  }
}

Method 2: Using Claude Extension

Install Claude Extension:
- Search for "Claude" in VS Code extensions
- Install the official Claude extension
Configure MCP Server:
- Add to your VS Code settings.json:

{
  "claude.mcpServers": {
    "shadcn-svelte": {
      "command": "npx",
      "args": ["shadcn-svelte-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

Cursor Integration

Method 1: Global Configuration

Open Cursor Settings:
- Go to Settings (Cmd/Ctrl + ,)
- Search for "MCP" or "Model Context Protocol"
Add MCP Server Configuration:

{
  "mcpServers": {
    "shadcn-svelte": {
      "command": "npx",
      "args": ["shadcn-svelte-mcp-server", "--github-api-key", "ghp_your_token_here"]
    }
  }
}

Method 2: Workspace Configuration

Create a .cursorrules file in your project root:

{
  "mcpServers": {
    "shadcn-svelte": {
      "command": "npx",
      "args": ["shadcn-svelte-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

Claude Desktop Integration

Add to your Claude Desktop configuration (~/.config/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "shadcn-svelte": {
      "command": "npx",
      "args": ["shadcn-svelte-mcp-server", "--github-api-key", "ghp_your_token_here"]
    }
  }
}

Or with environment variable:

{
  "mcpServers": {
    "shadcn-svelte": {
      "command": "npx",
      "args": ["shadcn-svelte-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_your_token_here"
      }
    }
  }
}

Continue.dev Integration

Install Continue.dev:
- Download from continue.dev
- Install the application
Configure MCP Server:
- Open Continue.dev
- Go to Settings → MCP Servers
- Add new server:

{
  "name": "shadcn-svelte",
  "command": "npx",
  "args": ["shadcn-svelte-mcp-server", "--github-api-key", "ghp_your_token_here"]
}

🎯 Usage Examples

Getting Component Source Code

Ask your AI assistant:

"Show me the source code for the shadcn-svelte button component"

The AI can now access the complete Svelte component source code for the button component.

Creating a Dashboard

Ask your AI assistant:

"Create a dashboard using shadcn-svelte components. Use the dashboard-01 block as a starting point"

The AI can retrieve the complete dashboard block implementation and customize it for your Svelte needs.

Building a Login Form

Ask your AI assistant:

"Help me build a login form using shadcn-svelte components. Show me the available form components"

The AI can list all available Svelte components and help you build the form.

🛠️ Available Tools

The MCP server provides these tools for AI assistants:

Component Tools

get_component - Get Svelte component source code
get_component_demo - Get Svelte component usage examples
list_components - List all available shadcn-svelte components
get_component_metadata - Get component dependencies and info

Block Tools

get_block - Get complete block implementations adapted for Svelte
list_blocks - List all available blocks with categories

Repository Tools

get_directory_structure - Explore the shadcn-svelte repository structure

Example Tool Usage

// These tools can be called by AI assistants via MCP protocol

// Get button component source
{
  "tool": "get_component",
  "arguments": { "componentName": "button" }
}

// List all components
{
  "tool": "list_components",
  "arguments": {}
}

// Get dashboard block
{
  "tool": "get_block", 
  "arguments": { "blockName": "dashboard-01" }
}

🐛 Troubleshooting

Common Issues

"Rate limit exceeded" errors:

# Solution: Add GitHub API token
npx shadcn-svelte-mcp-server --github-api-key ghp_your_token_here

"Command not found" errors:

# Solution: Install Node.js 18+ and ensure npx is available
node --version  # Should be 18+
npx --version   # Should work

Component not found:

# Check available components first
npx shadcn-svelte-mcp-server
# Then call list_components tool via your MCP client

Network/proxy issues:

# Set proxy if needed
export HTTP_PROXY=http://your-proxy:8080
export HTTPS_PROXY=http://your-proxy:8080
npx shadcn-svelte-mcp-server

Editor not recognizing MCP server:

# Verify the server is running
npx shadcn-svelte-mcp-server --help

# Check your editor's MCP configuration
# Ensure the command and args are correct

Debug Mode

Enable verbose logging:

# Set debug environment variable
DEBUG=* npx shadcn-svelte-mcp-server --github-api-key ghp_your_token

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📞 Support

🔗 Related Projects

shadcn-svelte - The Svelte component library this server provides access to
shadcn/ui - The original React component library
Model Context Protocol - The protocol specification
MCP TypeScript SDK - Official MCP SDK

⭐ Acknowledgments

huntabyte and the shadcn-svelte team for the amazing Svelte UI component library
Janardhan Polle for the original shadcn-ui MCP server that this project is based on
shadcn for the original UI component library concept
Anthropic for the Model Context Protocol specification
The open source community for inspiration and contributions

Made with ❤️ for the Svelte community

Star ⭐ this repo if you find it helpful!

Name		Name	Last commit message	Last commit date
Latest commit History 44 Commits
.github/workflows		.github/workflows
docs/images		docs/images
src		src
.gitignore		.gitignore
.npmignore		.npmignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
examples.sh		examples.sh
mcp-server.log		mcp-server.log
package-lock.json		package-lock.json
package.json		package.json
test-package.sh		test-package.sh
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Shadcn Svelte MCP Server

🚀 Key Features

📦 Quick Start

⚡ Using npx (Recommended)

🔧 Command Line Options

🔑 GitHub API Token Setup

📝 Getting Your Token (2 minutes)

🚀 Using Your Token

🛠️ Editor Integration

VS Code Integration

Method 1: Using Continue Extension

Method 2: Using Claude Extension

Cursor Integration

Method 1: Global Configuration

Method 2: Workspace Configuration

Claude Desktop Integration

Continue.dev Integration

🎯 Usage Examples

Getting Component Source Code

Creating a Dashboard

Building a Login Form

🛠️ Available Tools

Component Tools

Block Tools

Repository Tools

Example Tool Usage

🐛 Troubleshooting

Common Issues

Debug Mode

📄 License

🤝 Contributing

📞 Support

🔗 Related Projects

⭐ Acknowledgments

About

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages