mcp-svelte-docs
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.
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: Patterns showing incorrect code and corrections with explanations
- Global State Patterns: Various approaches to global state management in Svelte 5
Key Migration Patterns
- State Declaration:
let count = 0let count = $state(0)
- Derived Values:
$: doubled = count * 2const doubled = $derived(count * 2)
- Side Effects:
$: { /* effect */ }$effect(() => { /* effect */ })
- Event Handling:
on:click={handler}onclick={handler}
- Props:
export let proplet { 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 more 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:
- Both JavaScript and TypeScript examples
- Clear explanations of concepts and usage
- Best practices and considerations
- Common pitfalls to avoid
Usage
Installation
Configuration
The server can be configured by setting environment variables:
DEBUG: Set to 'true' to enable debug logging
Cline Configuration
Add this to your Cline MCP settings:
Using with LLMs
When an LLM needs to provide guidance about Svelte, it can use the
available tools and resources:
Migration Patterns
This will return migration patterns related to event handling, showing
both Svelte 4 and Svelte 5 implementations.
Svelte 5 Features
This will return detailed information about the $state rune, including
examples and best practices.
Common Mistakes
This will return common mistakes related to props in Svelte 5, along
with corrections and explanations.
Resource Access
This will return a detailed reference for the $state rune in markdown
format.
API
The server implements the following MCP Tools:
svelte_pattern
Get Svelte 4 to Svelte 5 migration patterns.
Parameters:
pattern(string, required): Pattern name or category to search for
Example response:
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:
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:
Resources
The server also provides the following MCP 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
Adding New Content
Migration Patterns
To add new migration patterns, add them to the appropriate pattern
file in the
src/patterns directory:Svelte 5 Features
To add new Svelte 5 features, add them to the
src/patterns/svelte5_features.ts file:Common Mistakes
To add new common mistakes, add them to the
src/patterns/common_mistakes.ts file:Global State Patterns
To add new global state patterns, add them to the
src/patterns/global_state.ts file:Setup
- Clone the repository
- Install dependencies:
- Build the project:
- Run in development mode:
Troubleshooting
Common Issues
- Pattern not found: Make sure you're searching for a pattern that exists in the database. Try using more general terms like "state" or "event" instead of specific pattern names.
- Server not starting: Ensure you have the correct permissions to run the server and that the port is not already in use.
- TypeScript errors: Make sure you have the correct version of TypeScript installed and that your code follows the project's TypeScript configuration.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT License - see the LICENSE file for details.
Acknowledgments
Built on:
mcp-svelte-docs
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.
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: Patterns showing incorrect code and corrections with explanations
- Global State Patterns: Various approaches to global state management in Svelte 5
Key Migration Patterns
- State Declaration:
let count = 0let count = $state(0)
- Derived Values:
$: doubled = count * 2const doubled = $derived(count * 2)
- Side Effects:
$: { /* effect */ }$effect(() => { /* effect */ })
- Event Handling:
on:click={handler}onclick={handler}
- Props:
export let proplet { 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 more 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:
- Both JavaScript and TypeScript examples
- Clear explanations of concepts and usage
- Best practices and considerations
- Common pitfalls to avoid
Usage
Installation
Configuration
The server can be configured by setting environment variables:
DEBUG: Set to 'true' to enable debug logging
Cline Configuration
Add this to your Cline MCP settings:
Using with LLMs
When an LLM needs to provide guidance about Svelte, it can use the
available tools and resources:
Migration Patterns
This will return migration patterns related to event handling, showing
both Svelte 4 and Svelte 5 implementations.
Svelte 5 Features
This will return detailed information about the $state rune, including
examples and best practices.
Common Mistakes
This will return common mistakes related to props in Svelte 5, along
with corrections and explanations.
Resource Access
This will return a detailed reference for the $state rune in markdown
format.
API
The server implements the following MCP Tools:
svelte_pattern
Get Svelte 4 to Svelte 5 migration patterns.
Parameters:
pattern(string, required): Pattern name or category to search for
Example response:
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:
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:
Resources
The server also provides the following MCP 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
Adding New Content
Migration Patterns
To add new migration patterns, add them to the appropriate pattern
file in the
src/patterns directory:Svelte 5 Features
To add new Svelte 5 features, add them to the
src/patterns/svelte5_features.ts file:Common Mistakes
To add new common mistakes, add them to the
src/patterns/common_mistakes.ts file:Global State Patterns
To add new global state patterns, add them to the
src/patterns/global_state.ts file:Setup
- Clone the repository
- Install dependencies:
- Build the project:
- Run in development mode:
Troubleshooting
Common Issues
- Pattern not found: Make sure you're searching for a pattern that exists in the database. Try using more general terms like "state" or "event" instead of specific pattern names.
- Server not starting: Ensure you have the correct permissions to run the server and that the port is not already in use.
- TypeScript errors: Make sure you have the correct version of TypeScript installed and that your code follows the project's TypeScript configuration.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
MIT License - see the LICENSE file for details.
Acknowledgments
Built on: