list-sections tool discovers available documentation sections
The list-sections tool should be used first to discover all available documentation sections. It returns a structured list with titles, use_cases, and paths.
Svelte · CLI and AI tooling · all subjects
svelte mcp
72 notes in this subject, read out of this brain and free to use. This is page 1 of 2.
Svelte MCP server provides comprehensive documentation access
The Svelte MCP server provides access to comprehensive Svelte 5 and SvelteKit documentation through available tools.
get-documentation tool retrieves full documentation content
The get-documentation tool retrieves full documentation content for specific sections. It accepts single or multiple sections. After calling list-sections, you must analyze the returned documentation sections (especially the use_cases field) and then use get-documentation to fetch all relevant documentation sections.
svelte-task Prompt for MCP
The svelte-task prompt can be used with MCP clients that support it to instruct the LLM on the best way to use the Svelte MCP server.
Svelte MCP Overview
The Svelte MCP (Model Context Protocol) server helps AI agents write better Svelte code by providing relevant documentation and statically analysing generated code to suggest fixes and best practices.
Svelte MCP Setup Options
Svelte MCP setup can be done using either local setup with @sveltejs/mcp package or remote setup using https://mcp.svelte.dev/mcp endpoint. The choice depends on the MCP version preference and the chosen MCP client (e.g. Claude Code, Codex CLI, or GitHub Copilot).
GitHub Coding Agent: MCP server configuration
To configure the MCP server in GitHub Coding Agent, open your repository in GitHub, go to Settings, open Copilot > Coding agent, and edit the MCP configuration to include: {"mcpServers": {"svelte": {"type": "http", "url": "https://mcp.svelte.dev/mcp", "tools": ["*"]}}}, then click Save MCP configuration.
OpenCode: add MCP server command and prompt sequence
To configure the MCP server in OpenCode, run: opencode mcp add. At the prompts, enter 'svelte' for the server name, select 'Remote' for the server type, and enter https://mcp.svelte.dev/mcp for the server URL.
VS Code: add remote MCP server steps
To add the remote MCP server in VS Code: Open the command palette, select "MCP: Add Server...", select "HTTP (HTTP or Server-Sent-Events)", insert https://mcp.svelte.dev/mcp and press Enter, insert your preferred name, then select if you want to add it as Global or Workspace MCP server.
Antigravity CLI: MCP server configuration
To use the remote MCP version in Antigravity CLI, create or edit ~/.gemini/config/mcp_config.json and add: {"mcpServers": {"svelte": {"url": "https://mcp.svelte.dev/mcp"}}}.
Codex CLI: manual MCP server configuration
To manually configure the MCP server in Codex CLI, add the following to config.toml (defaults to ~/.codex/config.toml): experimental_use_rmcp_client = true, and under [mcp_servers.svelte] set url = "https://mcp.svelte.dev/mcp".
Claude Desktop: add remote MCP server setup
To set up the remote MCP server in Claude Desktop: Open Settings > Connectors, click Add Custom Connector, enter 'svelte' as the name, enter https://mcp.svelte.dev/mcp as the Remote MCP server URL, and click Add.
Claude Code: add remote MCP server command
To include the remote MCP version in Claude Code, run: claude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp. The scope parameter must be one of: user, project, or local.
Remote MCP server URL
The remote version of the MCP server is available at https://mcp.svelte.dev/mcp.
Copilot CLI MCP setup
In Copilot CLI, you can automatically configure the MCP server using the Copilot plugin (recommended), or manually use the /mcp add command. Alternatively, create or edit ~/.copilot/mcp-config.json with a mcpServers.svelte entry containing command: npx and args: ["-y", "@sveltejs/mcp"].
Generic MCP client configuration
For MCP clients not covered in the documentation, use stdio server configuration with npx as the command and -y @sveltejs/mcp as the arguments.
Zed MCP setup
For Zed, install the Svelte MCP Server extension from https://zed.dev/extensions/svelte-mcp. To configure manually, open command palette, search for agent:open settings, find Model Context Protocol (MCP) Servers, click Add Server, select Add Custom Server, and add svelte entry with command: npx and args: ["-y", "@sveltejs/mcp"].
Cursor MCP setup
In Cursor, you can automatically configure the MCP server using the Cursor plugin (recommended). To configure manually, open the command palette, select View: Open MCP Settings, click on Add custom MCP, and add the configuration with command: npx and args: ["-y", "@sveltejs/mcp"] in the mcpServers.svelte entry.
VS Code MCP setup steps
In VS Code, open the command palette, select MCP: Add Server, select Command (stdio), insert npx -y @sveltejs/mcp in the input and press Enter. When prompted for a name, insert svelte. Select whether to add it as a Global or Workspace MCP server.
OpenCode MCP setup
In OpenCode, you can automatically configure the MCP server using the OpenCode plugin (recommended). To configure manually, run opencode mcp add, enter svelte as the server name, select Local as the server type, and enter npx -y @sveltejs/mcp as the command.
@sveltejs/mcp npm package installation
The local (stdio) version of the MCP server is available via the @sveltejs/mcp npm package. It can be installed globally and referenced in configuration, or run directly with npx using the command: npx -y @sveltejs/mcp
Claude Code MCP setup command
To set up the Svelte MCP server in Claude Code, run: claude mcp add -t stdio -s [scope] svelte -- npx -y @sveltejs/mcp. The [scope] parameter must be either user, project, or local.
Claude Desktop MCP configuration
In Claude Desktop, configure the Svelte MCP server by editing the claude_desktop_config.json file in Settings > Developer section. Add a mcpServers object with a svelte entry containing command: npx and args: ["-y", "@sveltejs/mcp"].
Codex CLI MCP setup
In Codex CLI, you can automatically configure the MCP server using the Codex plugin (recommended), or manually add the following to config.toml (defaulting to ~/.codex/config.toml): [mcp_servers.svelte] with command = npx and args = ["-y", "@sveltejs/mcp"].
Antigravity CLI MCP configuration
In Antigravity CLI, create or edit ~/.gemini/config/mcp_config.json and add a mcpServers.svelte entry with command: npx and args: ["-y", "@sveltejs/mcp"].
Resources are for specific knowledge inclusion
If you know that a component will need to use certain features like transitions, you can include the relevant documentation directly as a resource without asking the LLM to do it for you.
Resources included by user not LLM
MCP server resources are included by the user, not by the LLM. They are useful when you want to include specific knowledge in your session without asking the LLM to retrieve it.
doc-section resource URI format
The doc-section resource uses the URI format svelte://slug-of-the-docs.md to add any section of the Svelte documentation as a resource. The returned resource contains the llms.txt version of the specific documentation page selected.
playground-link tool provided by MCP server
The MCP server provides a playground-link tool that generates an ephemeral playground link with the generated code. It is useful when the generated code is not written to a file in the project and you want to quickly test the generated solution. The code is not stored anywhere except the URL itself, which will often be quite large as a consequence.
svelte-autofixer tool provided by MCP server
The MCP server provides a svelte-autofixer tool that uses static analysis to provide suggestions for code that the LLM generates. It can be invoked in an agentic loop by the model until all issues and suggestions are resolved.
list-sections tool provided by MCP server
The MCP server provides a list-sections tool that provides a list of all the available documentation sections. This tool can be called by the model during a session.
get-documentation tool provided by MCP server
The MCP server provides a get-documentation tool that allows the model to get the full and up-to-date documentation for the requested sections directly from svelte.dev/docs.
svelte-autofixer command options
The svelte-autofixer command supports the following options: --svelte-version <4|5> to choose which Svelte version to validate against (defaults to 5), and --async to enable async Svelte analysis for Svelte 5 projects.
@sveltejs/mcp npm package default behavior
The @sveltejs/mcp npm package normally launches the local stdio MCP server when invoked without arguments using npx -y @sveltejs/mcp.
@sveltejs/mcp CLI usage syntax
The @sveltejs/mcp package can be invoked as a CLI with the syntax: npx -y @sveltejs/mcp <command> [options]. When invoked with a subcommand, it behaves like a regular CLI and prints the result directly in the terminal instead of launching the MCP server.
@sveltejs/mcp available commands
The @sveltejs/mcp CLI supports three available commands: list-sections, get-documentation, and svelte-autofixer.
@sveltejs/mcp help and version commands
You can learn more about @sveltejs/mcp commands using: npx -y @sveltejs/mcp --help for general help, npx -y @sveltejs/mcp <command> --help for command-specific help, and npx -y @sveltejs/mcp --version to check the version.
get-documentation command syntax and behavior
The get-documentation command fetches the full documentation for one or more sections. It can be invoked with: npx -y @sveltejs/mcp get-documentation 'svelte/$state' for a single section, or npx -y @sveltejs/mcp get-documentation 'svelte/$state,svelte/await-expressions' for multiple sections. Each section can be matched by title or by documentation path. If a section cannot be found, the CLI returns an error plus similar matches when available.
svelte-autofixer command basic usage
The svelte-autofixer command runs the Svelte autofixer against either inline code or a file path. It is invoked with: npx -y @sveltejs/mcp svelte-autofixer 'src/routes/+page.svelte'. If the argument is an existing path, the CLI reads the file automatically. Otherwise it treats the argument as raw Svelte code.
svelte-autofixer command output
The svelte-autofixer command prints an object with the following fields: issues, suggestions, and require_another_tool_call_after_fixing. This makes it easy to use in an agentic loop: run the autofixer, apply fixes, then run it again until it reports no remaining issues or suggestions.
svelte-autofixer inline code quoting requirement
Because most shells expand $, inline code passed to svelte-autofixer should be quoted or escaped correctly. In practice, passing a file path is usually easier than passing source directly.
svelte-autofixer detected issue types
The svelte-autofixer tool detects common mistakes including: using $effect instead of $derived for computations, missing cleanup in effects, Svelte 4 syntax like on:click, export let, and <slot>, and missing keys in {#each} blocks.
get-documentation example sections
Example sections that can be passed to get-documentation include: $state, $derived, $effect, $props, $bindable, snippets, routing, and load functions.
svelte-file-editor fallback instructions
If the Svelte MCP tools are not available, the svelte-file-editor can use the svelte-code-writer skill to learn how to use the @sveltejs/mcp cli to access the same tools. If the skill is not available, the command npx @sveltejs/mcp@latest -y --help can be run to learn how to use it.
svelte-autofixer escape $ character for runes
When passing code with runes ($state, $derived, etc.) via the terminal to svelte-autofixer, escape the $ character as \$ to prevent shell variable substitution.
svelte-autofixer command and options
The command npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options] analyzes Svelte code and suggests fixes for common issues. Options are: --async (enable async Svelte mode, default: false) and --svelte-version (target version: 4 or 5, default: 5).
$derived with objects and arrays
If the derived expression is an object or array, it will be returned as-is — it is not made deeply reactive. However, you can use $state inside $derived.by in rare cases where deep reactivity is needed.
$derived over $effect for computed values
To compute something from state, use $derived rather than $effect. $derived is given an expression, not a function. If a function is needed because the expression is complex, use $derived.by instead. Deriveds are writable — you can assign to them like $state, except they will re-evaluate when their expression changes.
$state with objects and arrays - reactivity and performance
Objects and arrays using $state({...}) or $state([...]) are made deeply reactive, meaning mutation will trigger updates. This provides fine-grained reactivity but has a trade-off: the objects must be proxied, which has performance overhead. In cases where dealing with large objects that are only ever reassigned (not mutated), use $state.raw instead. This is often the case with API responses.
$state rune - when to use
Only use the $state rune for variables that should be reactive — in other words, variables that cause an $effect, $derived or template expression to update. Everything else can be a normal variable.
svelte-code-writer skill workflow
The recommended workflow for svelte-code-writer is: 1) If uncertain about syntax, run list-sections then get-documentation for relevant topics. 2) When reviewing or debugging, run svelte-autofixer on the code to detect issues. 3) Always validate by running svelte-autofixer before finalizing any Svelte component.
svelte-autofixer command - analyze and fix Svelte code
The command `npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]` analyzes Svelte code and suggests fixes for common issues. Options are: --async (enable async Svelte mode, default false), --svelte-version (target version 4 or 5, default 5). When passing code with runes like $state or $derived via terminal, escape the $ character as \$ to prevent shell variable substitution.
get-documentation command - retrieve specific sections
The command `npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."` retrieves full documentation for specified sections. It should be used after list-sections to fetch relevant docs. Example: `npx @sveltejs/mcp get-documentation "$state,$derived,$effect"`
Snippets - reusable markup chunks
Snippets are a way to define reusable chunks of markup that can be instantiated with the {@render ...} tag, or passed to components as props. They must be declared within the template. Snippets declared at the top level of a component (not inside elements or blocks) can be referenced inside <script>. A snippet that doesn't reference component state is also available in a <script module>, where it can be exported for use by other components.
Event listeners - element attributes starting with 'on'
Any element attribute starting with 'on' is treated as an event listener. Event handlers can use inline functions like onclick={() => {...}}, attribute shorthand like {onclick}, or spread attributes like {...props}.
$inspect.trace - debugging tool for reactivity
$inspect.trace is a debugging tool for reactivity. If something is not updating properly or running more than expected, add $inspect.trace(label) as the first line of an $effect or $derived.by (or any function they call) to trace dependencies and discover which one triggered an update.
$props - treat as changing values
Treat props as though they will change. Values that depend on props should usually use $derived. Do not assign computed prop values to regular variables as they will not update if the prop changes.
$effect - escape hatch, avoid when possible
Effects are an escape hatch and should mostly be avoided. In particular, avoid updating state inside effects. If syncing state to an external library, use {@attach ...} instead. For running code in response to user interaction, put code directly in event handlers or use function binding. For logging during debugging, use $inspect. For observing something external to Svelte, use createSubscriber. Never wrap effect contents in if (browser) {...} — effects do not run on the server.
Async Svelte - await expressions and hydratable
If using version 5.36 or higher, you can use await expressions and hydratable to use promises directly inside components. Note that these require the experimental.async option to be enabled in svelte.config.js as they are not yet considered fully stable.
Context - prefer over shared module state
Consider using context instead of declaring state in a shared module. This will scope the state to the part of the app that needs it, and eliminate the possibility of it leaking between users when server-side rendering. Use createContext rather than setContext and getContext, as it provides type safety.