📌Overview

Purpose: The framework aims to provide efficient access to Svelte documentation while leveraging advanced caching and search capabilities.

Overview: This document outlines the Model Context Protocol (MCP) server designed for streamlined access to Svelte's official documentation. It supports full and compressed documentation variants, thus catering to different context window sizes of various integrations, mainly targeting developers looking to optimize their usage of Svelte.

Key Features:

Complete Svelte Documentation Access: Offers comprehensive access to all Svelte documentation through MCP resources, making it easy for developers to find necessary information.
Advanced Search Capabilities: Includes intelligent document filtering and scoring, context-aware result excerpts, and related search suggestions, enhancing the search experience for users.
Efficient Caching: Utilizes LibSQL for caching documentation, ensuring quick access and reduced load times, along with automatic checks for content freshness.
Smart Content Chunking: Supports the efficient delivery of large documents by breaking them into manageable sections while also providing compressed variants for smaller context situations.

mcp-svelte-docs

A Model Context Protocol (MCP) server providing a comprehensive reference guide for Svelte 5, helping LLMs offer accurate guidance when working with Svelte. It includes migration patterns from Svelte 4 to Svelte 5 and serves as a detailed reference for Svelte 5 features, common mistakes, and best practices.

Features

📊 Content Categories

Migration Patterns: Side-by-side comparisons of Svelte 4 and Svelte 5 code
Svelte 5 Features: Detailed documentation on runes, snippets, props, and events
Common Mistakes: Examples of incorrect code with corrections and explanations
Global State Patterns: Various approaches to global state management in Svelte 5

🔄 Key Migration Patterns

State Declaration: let count = 0 → let count = $state(0)
Derived Values: $: doubled = count * 2 → const doubled = $derived(count * 2)
Side Effects: $: { /* effect */ } → $effect(() => { /* effect */ })
Event Handling: on:click={handler} → onclick={handler}
Props: export let prop → let { prop } = $props()
Component Events: createEventDispatcher() → callback props
Slots: <slot> → {@render children()}

🧩 Svelte 5 Features

Runes: $state, $derived, $effect, $props, and more
Snippets: Reusable chunks of markup with parameters
Props: New approach to component props with destructuring
Events: Standard HTML event attributes and callback props

⚠️ Common Mistakes

Reactivity: Exporting state directly, forgetting $state, etc.
Events: Using on:click instead of onclick, event modifiers, etc.
Props: Using export let instead of $props, TypeScript issues, etc.

🌐 Global State Patterns

Function-based: Getter/setter functions for module-level state
Object-based: Objects with getters/setters for ergonomic APIs
Class-based: Classes with stateful properties for structured state
Context-based: Svelte contexts for SSR-safe global state

💡 Comprehensive Examples

All content includes:

JavaScript and TypeScript examples
Clear explanations of concepts and usage
Best practices and considerations
Common pitfalls to avoid

Usage

Installation

npm install
npm run build
npm start

Configuration

Configure the server by setting environment variables:

DEBUG: Set to 'true' to enable debug logging

Cline Configuration

Add this to your Cline MCP settings:

{
	"mcpServers": {
		"mcp-svelte-docs": {
			"command": "node",
			"args": ["/path/to/mcp-svelte-docs/dist/index.js"],
			"env": {
				"DEBUG": "false"
			},
			"disabled": false,
			"autoApprove": [
				"svelte_pattern",
				"svelte5_feature",
				"svelte5_common_mistakes"
			]
		}
	}
}

Using with LLMs

Guidance can be fetched by querying the server tools:

Migration Patterns

<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte_pattern</tool_name>
<arguments>
{
  "pattern": "event"
}
</arguments>
</use_mcp_tool>

Returns migration patterns related to event handling, showing both Svelte 4 and Svelte 5 implementations.

Svelte 5 Features

<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte5_feature</tool_name>
<arguments>
{
  "feature": "state",
  "includeExamples": true
}
</arguments>
</use_mcp_tool>

Returns detailed information about the $state rune including examples and best practices.

Common Mistakes

<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte5_common_mistakes</tool_name>
<arguments>
{
  "feature": "props"
}
</arguments>
</use_mcp_tool>

Returns common mistakes related to props, with corrections and explanations.

Resource Access

<access_mcp_resource>
<server_name>mcp-svelte-docs</server_name>
<uri>svelte5://runes/state</uri>
</access_mcp_resource>

Returns a detailed reference for the $state rune in markdown format.

API

svelte_pattern

Get migration patterns from Svelte 4 to Svelte 5.

Parameters:

pattern (string, required): Pattern name or category to search for

Example response:

{
	"patterns": [
		{
			"name": "Basic state",
			"description": "Declaring and using component state",
			"svelte4": "<script>\n  let count = 0;\n\n  function increment() {\n    count++;\n  }\n</script>\n\n<button on:click={increment}>\n  Clicked {count} times\n</button>",
			"svelte5": "<script>\n  let count = $state(0);\n\n  function increment() {\n    count++;\n  }\n</script>\n\n<button onclick={increment}>\n  Clicked {count} times\n</button>",
			"notes": "In Svelte 5, state is explicitly declared using the $state rune, and event handlers use standard HTML attributes (onclick) instead of directive syntax (on:click)."
		}
	]
}

svelte5_feature

Get detailed information about Svelte 5 features.

Parameters:

feature (string, required): Feature name (e.g., "runes", "snippets", "props")
includeExamples (boolean, optional): Whether to include code examples

Example response:

{
	"features": [
		{
			"name": "$state",
			"description": "The $state rune is used to declare reactive state in Svelte 5.",
			"examples": [
				{
					"code": "<script>\n  let count = $state(0);\n\n  function increment() {\n    count++;\n  }\n</script>\n\n<button onclick={increment}>\n  Clicked {count} times\n</button>",
					"explanation": "Basic usage of $state to create a reactive counter. When the button is clicked, the count increments and the UI updates."
				}
			],
			"bestPractices": [
				"Use $state for any value that needs to trigger UI updates when changed",
				"For large arrays or objects that don't need deep reactivity, consider using $state.raw",
				"Don't export $state variables directly from modules; use getter/setter functions instead"
			]
		}
	]
}

svelte5_common_mistakes

Get common mistakes and corrections for Svelte 5 features.

Parameters:

feature (string, required): Feature name (e.g., "runes", "snippets", "events")

Example response:

{
	"mistakes": [
		{
			"name": "Exporting state directly",
			"description": "Directly exporting a stateful variable from a module",
			"mistake": "// counter.svelte.js\nlet count = $state(0);\n\nexport { count };",
			"correction": "// counter.svelte.js\nlet count = $state(0);\n\nexport function getCount() {\n  return count;\n}\n\nexport function setCount(value) {\n  count = value;\n}",
			"explanation": "Exporting state directly loses reactivity in importing modules, which only receive the current value. Export functions to access and modify state instead."
		}
	]
}

Resources

Direct Resources

svelte5://overview: Overview of Svelte 5 features and changes
svelte5://runes/overview: Overview of all runes in Svelte 5
svelte5://snippets/overview: Overview of snippets in Svelte 5
svelte5://global-state/overview: Overview of global state approaches in Svelte 5

Resource Templates

svelte5://runes/{rune_name}: Detailed reference for a specific rune
svelte5://patterns/{category}/{pattern_name}: Reference for a specific Svelte pattern
svelte5://mistakes/{category}: Common mistakes for a specific category

Development

Project Structure

src/
├── index.ts                # MCP server entry point
├── config.ts               # Basic configuration
├── tools/                  # Tool implementations
│   └── handler.ts          # Tool registration
├── resources/              # Resource implementations
│   └── index.ts            # Resource registration
└── patterns/               # Pattern database
    ├── index.ts            # Exports all patterns
    ├── state.ts            # State management patterns
    ├── events.ts           # Event handling patterns
    ├── props.ts            # Props and component patterns
    ├── templating.ts       # Templating patterns
    ├── lifecycle.ts        # Lifecycle patterns
    ├── svelte5_features.ts # Svelte 5 specific features
    ├── common_mistakes.ts  # Common mistakes and corrections
    └── global_state.ts     # Global state patterns

Adding New Content

Migration Patterns

Add new patterns to appropriate files in src/patterns:

{
  name: 'Pattern Name',
  description: 'Description of the pattern',
  svelte4: `Svelte 4 code example`,
  svelte5: `Svelte 5 code example`,
  notes: 'Additional notes about migration considerations'
}

Svelte 5 Features

Add new features to src/patterns/svelte5_features.ts:

{
  name: 'Feature Name',
  description: 'Description of the feature',
  examples: [
    {
      code: `Code example`,
      explanation: 'Explanation of the example'
    }
  ],
  bestPractices: [
    'Best practice 1',
    'Best practice 2'
  ]
}

Common Mistakes

Add new mistakes to src/patterns/common_mistakes.ts:

{
  name: 'Mistake Name',
  description: 'Description of the common mistake',
  mistake: `Incorrect code example`,
  correction: `Corrected code example`,
  explanation: 'Detailed explanation of why the mistake is problematic and how the correction addresses it'
}

Global State Patterns

Add new patterns to src/patterns/global_state.ts:

{
  name: 'Global State Pattern Name',
  description: 'Description of the global state pattern',
  code: `Implementation example`,
  usage: `Usage example`,
  notes: 'Additional notes about the pattern, including considerations for server vs. client usage'
}

Setup

Clone the repository
Install dependencies:

npm install

Build the project:

npm run build

Run in development mode:

npm run dev

Troubleshooting

Common Issues

Pattern not found: Use more general search terms like "state" or "event".
Server not starting: Check permissions and that the port is free.
TypeScript errors: Confirm correct TypeScript version and adherence to project config.

Contributing

Contributions are welcome! Please submit a Pull Request.

License

MIT License - see the LICENSE file for details.

Acknowledgments

Built on:

Model Context Protocol: https://github.com/modelcontextprotocol
Svelte: https://svelte.dev