A Model Context Protocol (MCP) server that provides a comprehensive reference guide for Svelte 5, helping LLMs provide accurate guidance when users are working with Svelte. While it includes migration patterns from Svelte 4 to Svelte 5, it also serves as a detailed reference for Svelte 5 features, common mistakes, and best practices.
let count = 0
ā let count = $state(0)
$: doubled = count * 2
ā
const doubled = $derived(count * 2)
$: { /* effect */ }
ā
$effect(() => { /* effect */ })
on:click={handler}
ā onclick={handler}
export let prop
ā let { prop } = $props()
createEventDispatcher()
ā callback props<slot>
ā {@render children()}
All content includes:
# Install dependencies
npm install
# Build the project
npm run build
# Start the server
npm start
The server can be configured by setting environment variables:
DEBUG
: Set to 'true' to enable debug loggingAdd 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"
]
}
}
}
When an LLM needs to provide guidance about Svelte, it can use the available tools and resources:
<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte_pattern</tool_name>
<arguments>
{
"pattern": "event"
}
</arguments>
</use_mcp_tool>
This will return migration patterns related to event handling, showing both Svelte 4 and Svelte 5 implementations.
<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>
This will return detailed information about the $state rune, including examples and best practices.
<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte5_common_mistakes</tool_name>
<arguments>
{
"feature": "props"
}
</arguments>
</use_mcp_tool>
This will return common mistakes related to props in Svelte 5, along with corrections and explanations.
<access_mcp_resource>
<server_name>mcp-svelte-docs</server_name>
<uri>svelte5://runes/state</uri>
</access_mcp_resource>
This will return a detailed reference for the $state rune in markdown format.
The server implements the following MCP Tools:
Get Svelte 4 to Svelte 5 migration patterns.
Parameters:
pattern
(string, required): Pattern name or category to search forExample 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 the directive syntax (on:click)."
}
]
}
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
examplesExample 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 is incremented and the UI updates automatically."
}
],
"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"
]
}
]
}
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": "When you export a stateful variable directly, the reactivity is lost when it's imported elsewhere. This is because the importing module only gets the current value, not the reactive binding. Instead, export functions that access and modify the state."
}
]
}
The server also provides the following MCP Resources:
svelte5://overview
: Overview of Svelte 5 features and changessvelte5://runes/overview
: Overview of all runes in Svelte 5svelte5://snippets/overview
: Overview of snippets in Svelte 5svelte5://global-state/overview
: Overview of global state
approaches in Svelte 5svelte5://runes/{rune_name}
: Detailed reference for a specific
runesvelte5://patterns/{category}/{pattern_name}
: Reference for a
specific Svelte patternsvelte5://mistakes/{category}
: Common mistakes for a specific
categorysrc/
āāā 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
To add new migration patterns, add them to the appropriate pattern
file in the src/patterns
directory:
{
name: 'Pattern Name',
description: 'Description of the pattern',
svelte4: `Svelte 4 code example`,
svelte5: `Svelte 5 code example`,
notes: 'Additional notes about migration considerations'
}
To add new Svelte 5 features, add them to the
src/patterns/svelte5_features.ts
file:
{
name: 'Feature Name',
description: 'Description of the feature',
examples: [
{
code: `Code example`,
explanation: 'Explanation of the example'
}
],
bestPractices: [
'Best practice 1',
'Best practice 2'
]
}
To add new common mistakes, add them to the
src/patterns/common_mistakes.ts
file:
{
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'
}
To add new global state patterns, add them to the
src/patterns/global_state.ts
file:
{
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'
}
npm install
npm run build
npm run dev
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see the LICENSE file for details.
Built on: