Svelte Docs MCP server

The Model Context Protocol (MCP) server for Svelte 5 and SvelteKit provides comprehensive documentation to help AI assistants give accurate guidance when users are working with Svelte. It includes detailed information about Svelte 5 core features, modern async patterns, SvelteKit remote functions, migration paths, common mistakes, and advanced patterns.

Installation

To use this MCP server, you need to configure it with your AI assistant tool. Here are setup instructions for different environments:

Claude Desktop (via WSL)

{
	"mcpServers": {
		"mcp-svelte-docs": {
			"command": "wsl.exe",
			"args": ["bash", "-c", "npx -y mcp-svelte-docs"]
		}
	}
}

Windows (without WSL)

{
	"mcpServers": {
		"mcp-svelte-docs": {
			"command": "npx",
			"args": ["-y", "mcp-svelte-docs"]
		}
	}
}

macOS / Linux

{
	"mcpServers": {
		"mcp-svelte-docs": {
			"command": "npx",
			"args": ["-y", "mcp-svelte-docs"]
		}
	}
}

Available Tools

The MCP server provides 16 specialized tools organized into different categories:

Core Svelte 5 Runes

• svelte5_state - Documentation for $state rune (reactive state)
• svelte5_derived - Documentation for $derived rune (computed values)
• svelte5_props - Documentation for $props rune (component properties)
• svelte5_effect - Documentation for $effect rune (side effects)

Svelte 5 Features

• svelte5_snippets - Documentation for snippets (replacement for slots)
• svelte5_events - Event handling patterns in Svelte 5
• svelte5_component_events - Component event patterns and best practices
• svelte5_global_state - Global state management patterns

Modern Async Features

• svelte5_await_expressions - Await expressions for async operations (experimental)
• sveltekit_remote_functions - Remote functions for type-safe client-server communication (experimental)

Migration & Guidance

• svelte5_migration - Migration patterns from Svelte 4 to Svelte 5
• svelte5_mistakes - Common mistakes and how to avoid them
• svelte5_overview - General overview of Svelte 5 features
• svelte5_runes_overview - Comprehensive overview of all runes

Using the Tools

All tools support an optional includeExamples parameter:

{
  "includeExamples": true
}

• When set to true (default), the tool will include code examples and demonstrations
• When set to false, the tool will return documentation without code examples for a more concise reference

Key Features

Experimental Async Support

The MCP server provides documentation on:

• Using await expressions directly in components, $derived, and markup
• Error handling and loading states with <svelte:boundary>
• Consistent UI updates during async operations
• Performance patterns to avoid waterfalls and optimize concurrent requests

Remote Functions

The server includes information about:

• Type-safe communication with full TypeScript support between client and server
• Four function types: Query (read), Form (submit), Command (execute), Prerender (static)
• Optimistic updates for immediate UI feedback with server synchronization
• Progressive enhancement that works with and without JavaScript

Comprehensive Documentation

You'll find:

• Real-world examples from core maintainer projects
• Step-by-step guidance for migrating from Svelte 4 to 5
• Common mistakes and how to correct them
• Production-ready patterns and recommendations

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "mcp-svelte-docs" '{"command":"npx","args":["-y","mcp-svelte-docs"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "mcp-svelte-docs": {
            "command": "npx",
            "args": [
                "-y",
                "mcp-svelte-docs"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "mcp-svelte-docs": {
            "command": "npx",
            "args": [
                "-y",
                "mcp-svelte-docs"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect