Svelte AI Tools

The Svelte team maintains a suite of four AI tools designed to help AI agents write correct and robust Svelte code. While they are designed to work together, they can be used individually depending on your needs:

• Instructions: Small prompts injected into your session to increase agent awareness of the available tools.
• MCP Server: Provides tools, prompts, and resources to give agents context by pulling directly from official Svelte documentation and using static analysis to correct common generative AI errors.
• Skills: Lazy-loaded descriptions that teach agents Svelte best practices and how to use the @sveltejs/mcp CLI.
• Subagents: Focused agents that can be invoked in parallel to execute atomic operations in a separate context window.

The MCP server provides several tools that an LLM can invoke to interact with Svelte documentation and improve generated code. These tools include:

• list-sections: Retrieves a list of all available documentation sections.
• get-documentation: Fetches the full, up-to-date documentation for specific sections directly from svelte.dev/docs.
• svelte-autofixer: Performs static analysis on LLM-generated code to provide suggestions. This tool is designed to be used in an agentic loop where the model repeatedly calls it until all issues are resolved.
• playground-link: Creates an ephemeral link containing the generated code, allowing for quick testing of solutions that haven't been written to a local file. Note that the code is stored within the URL itself, resulting in large URLs.

The Svelte MCP server provides tools that allow an AI agent to interact with Svelte documentation and code analysis. It exposes the following tools:

• list-sections: Discover available Svelte 5 and SvelteKit documentation sections.
• get-documentation: Retrieve full documentation content for specific sections.
• svelte-autofixer: Analyze Svelte code to identify issues and receive suggestions.
• playground-link: Generate Svelte Playground links for provided code snippets.

Treat props as values that will change over time. Any logic that depends on a prop should use $derived to ensure the dependent value updates when the prop changes.

let { type } = $props();

// Correct: color updates when type changes
let color = $derived(type === 'danger' ? 'red' : 'green');

// Incorrect: color will not update if type changes
let color = type === 'danger' ? 'red' : 'green';

Attachments are functions that run within a Svelte effect when an element is mounted to the DOM or when reactive state read inside the function updates.

An attachment can optionally return a cleanup function. This returned function is called either before the attachment re-runs (due to state changes) or after the element is removed from the DOM.

Note: Attachments require Svelte 5.29 or newer.

<script>
	/** @type {import('svelte/attachments').Attachment} */
	function myAttachment(element) {
		console.log(element.nodeName); // 'DIV'

		return () => {
			console.log('cleaning up');
		};
	}
</script>

<div {@attach myAttachment}>...</div>

Data returned from a hydratable function must be serializable. Svelte uses devalue for serialization, which supports more than just JSON, including Map, Set, URL, and BigInt. Additionally, Svelte supports serializing Promise objects directly.

When a hydratable function returns a promise, the client can await those promises just like standard asynchronous operations.

<script>
  import { hydratable } from 'svelte';
  const promises = hydratable('random', () => {
    return {
      one: Promise.resolve(1),
      two: Promise.resolve(2)
    }
  });
</script>

{await promises.one}
{await promises.two}

The Svelte plugin for Cursor bundles several specialized tools to improve AI development with Svelte:

• Svelte MCP server: A local stdio server defined via the plugin's .mcp.json.
• Cursor skills: Specialized capabilities that appear in Cursor's rules UI.
• Always-on rule: A system rule that instructs the model on how to use Svelte MCP tools correctly.
• svelte-file-editor subagent: A dedicated agent available in chat specifically for working on .svelte files and .svelte.ts/.svelte.js modules.

Attachments are functions that run within a Svelte effect when an element is mounted to the DOM or when reactive state read inside the function updates.

An attachment function receives the element as its argument. Optionally, it can return a cleanup function that is called before the attachment re-runs or when the element is removed from the DOM.

Note: Attachments are available in Svelte 5.29 and newer.

<script>
	/** @type {import('svelte/attachments').Attachment} */
	function myAttachment(element) {
		console.log(element.nodeName); // 'DIV'

		return () => {
			console.log('cleaning up');
		};
	}
</script>

<div {@attach myAttachment}>...</div>

Effects should be avoided for most logic. Avoid updating state inside an effect.

When to use alternatives instead of $effect:

• Syncing to external libraries (e.g., D3): Use {@attach ...}.
• User interaction logic: Put code directly in event handlers or use function bindings.
• Debugging/Logging: Use $inspect.
• Observing external systems: Use createSubscriber.

Important: Effects do not run on the server, so never wrap their contents in if (browser) checks.