Svelte 5 MCP Server

A specialized Model Context Protocol (MCP) server for Svelte 5 frontend development, providing curated knowledge, code examples, and intelligent assistance for modern Svelte development with runes, snippets, and enhanced reactivity.

Features

🔍 Searchable Resources

• Knowledge Base: Curated Q&A covering Svelte 5 concepts, runes, and best practices
• Code Examples: Searchable collection of Svelte 5 patterns and component implementations

🛠️ Intelligent Tools

• search_knowledge - Find explanations and concepts
• search_examples - Discover code patterns and implementations
• generate_with_context - Create components using curated patterns
• audit_with_rules - Review code against Svelte 5 best practices
• explain_concept - Get detailed explanations with examples

📝 Smart Prompts

• generate-component - Generate modern Svelte 5 components
• audit-svelte5-code - Audit code for optimization opportunities
• explain-concept - Detailed concept explanations
• search-patterns - Find specific implementation patterns

Installation

# Clone and setup
git clone <repository-url>
cd svelte5-mcp-server

# Install dependencies
npm install

# Build the server
npm run build

# Start the server
npm start

Project Structure

svelte5-mcp-server/
├── src/
│   └── index.ts          # Main MCP server implementation
├── data/
│   ├── svelte_5_knowledge.json    # Curated Q&A knowledge base
│   └── svelte_5_patterns.json     # Code examples and patterns
├── package.json
├── tsconfig.json
├── example system prompt         # Svelte 5 specific system prompt (quite strict, adjust for your own preferences)
└── README.md

Usage with Claude Desktop

Add to your Claude Desktop configuration:

{
  "mcpServers": {
    "svelte5": {
      "command": "node",
      "args": ["/path/to/svelte5-mcp-server/dist/index.js"],
      "env": {}
    }
  }
}

Usage Examples

🔍 Search Knowledge

Tool: search_knowledge
Query: "runes reactivity"

Returns detailed explanations about Svelte 5 runes and the new reactivity system.

📚 Find Code Examples

Tool: search_examples  
Query: "counter component $state"

Returns working Svelte 5 counter implementations using the $state rune.

🏗️ Generate Components

Tool: generate_with_context
Description: "A todo list with add/remove functionality"
Features: ["$state", "snippets", "accessibility"]

Generates a complete todo component using modern Svelte 5 patterns with relevant examples from the knowledge base.

🔍 Audit Code

Tool: audit_with_rules
Code: "<script>let count = 0;</script><button on:click={() => count++}>{count}</button>"
Focus: "best-practices"

Analyzes code and suggests Svelte 5 improvements (e.g., using $state and modern event handling).

Key Svelte 5 Concepts Covered

🎯 Runes System

• $state - Reactive state management
• $derived - Computed values and derived state
• $effect - Side effects and lifecycle
• $props - Component properties
• $bindable - Two-way data binding
• $inspect - Development debugging

🧩 Modern Patterns

• Snippets - Reusable template blocks ({#snippet}, {@render})
• Enhanced Reactivity - Fine-grained updates
• Event Handling - Modern onclick vs legacy on:click
• TypeScript Integration - Better type inference
• Accessibility - Built-in a11y considerations

📈 Migration Support

• Svelte 4 → 5 migration patterns
• Legacy reactive statements ($:) → runes
• Slots → snippets conversion
• Event dispatcher → callback props

Data Format

Knowledge Base (svelte_5_knowledge.json)

{
  "question": "How do you manage reactive state in Svelte 5?",
  "answer": "In Svelte 5, reactive state is managed using the $state rune..."
}

Examples (svelte_5_patterns.json)

{
  "instruction": "Create a Svelte 5 component demonstrating $state",
  "input": "The rune

... [View full README on GitHub](https://github.com/StudentOfJS/svelte5-mcp#readme)