Redirected from /sveltejs/mcp
Svelte AI Tools

https://github.com/sveltejs/ai-tools
Admin
Svelte AI Tools provides official AI tools, including an MCP server, skills, instructions, and...
Tokens:42,899
Snippets:396
Trust Score:9.8
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Setup commands

Source: https://github.com/sveltejs/ai-tools/blob/main/CLAUDE.md

Install dependencies, copy environment file, and start the development server. Requires setting VOYAGE_API_KEY for embeddings support.

```bash
pnpm i
cp .env.example .env
# Set the VOYAGE_API_KEY for embeddings support in .env
pnpm dev
```

--------------------------------

### Install dependencies and configure environment

Source: https://github.com/sveltejs/ai-tools/blob/main/README.md

Run pnpm install, copy the example environment file, and start the development server. Requires pnpm and an .env file based on the example.

```bash
pnpm i
cp apps/mcp-remote/.env.example apps/mcp-remote/.env
pnpm dev
```

--------------------------------

### Get documentation for runes

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-code-writer/SKILL.md

Example of fetching documentation for the runes $state, $derived, and $effect.

```bash
npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
```

--------------------------------

### OpenCode: Interactive MCP setup output

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/30-remote-setup.md

Example interactive session for adding a remote MCP server in OpenCode, showing the prompts and expected input.

```bash
opencode mcp add

┌  Add MCP server
│
◇  Enter MCP server name
│  svelte
│
◇  Select MCP server type
│  Remote
│
◇  Enter MCP server URL
│  https://mcp.svelte.dev/mcp
```

--------------------------------

### OpenCode: Add MCP server command

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/30-remote-setup.md

Run this command to start the interactive MCP server setup in OpenCode.

```bash
opencode mcp add
```

--------------------------------

### Run Svelte MCP CLI: npx or install and run

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/mcp-stdio/README.md

Two ways to run the Svelte MCP CLI: directly with npx without installation, or install locally and run with pnpm svelte-mcp. Both commands start the same CLI.

```bash
npx @sveltejs/mcp

```

```bash
pnpm i @sveltejs/mcp
pnpm svelte-mcp

```

--------------------------------

### Install Svelte plugin from marketplace

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/60-plugins/40-copilot-plugin.md

Installs the Svelte plugin from the ai-tools marketplace. Requires the marketplace to be added first.

```bash
copilot plugin install svelte@ai-tools
```

--------------------------------

### Add marketplace and install plugin from interactive session

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/60-plugins/40-copilot-plugin.md

Runs the same marketplace add and plugin install commands from an interactive Copilot CLI session. The two commands are sequential steps of the same workflow.

```bash
/plugin marketplace add sveltejs/ai-tools
```

```bash
/plugin install svelte@ai-tools
```

--------------------------------

### Get help and version

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/70-cli.md

Displays help for the CLI or a specific command, or prints the version. Useful for discovering available options.

```bash
npx -y @sveltejs/mcp --help
```

```bash
npx -y @sveltejs/mcp <command> --help
```

```bash
npx -y @sveltejs/mcp --version
```

--------------------------------

### Install tmcp and adapters

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Install tmcp core, the Zod adapter, and the stdio or HTTP transport. Choose the adapter matching your schema library and the transport for your target environment.

```bash
pnpm install tmcp
# Choose your preferred schema library adapter
pnpm install @tmcp/adapter-zod zod
# Choose your preferred transport
pnpm install @tmcp/transport-stdio  # For CLI/desktop apps
pnpm install @tmcp/transport-http   # For web-based clients
```

--------------------------------

### Quick Start: Stdio Transport (CLI/Desktop)

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Sets up an MCP server with the Zod adapter and stdio transport. Defines a 'calculate' tool with a Zod schema and starts listening on standard I/O.

```javascript
import { McpServer } from 'tmcp';
import { ZodJsonSchemaAdapter } from '@tmcp/adapter-zod';
import { StdioTransport } from '@tmcp/transport-stdio';
import { z } from 'zod';

const adapter = new ZodJsonSchemaAdapter();
const server = new McpServer(
	{
		name: 'my-server',
		version: '1.0.0',
		description: 'My awesome MCP server',
	},
	{
		adapter,
		capabilities: {
			tools: { listChanged: true },
			prompts: { listChanged: true },
			resources: { listChanged: true },
		},
	},
);

// Define a tool with type-safe schema
server.tool(
	{
		name: 'calculate',
		description: 'Perform mathematical calculations',
		schema: z.object({
			operation: z.enum(['add', 'subtract', 'multiply', 'divide']),
			a: z.number(),
			b: z.number(),
		}),
	},
	async ({ operation, a, b }) => {
		switch (operation) {
			case 'add':
				return a + b;
			case 'subtract':
				return a - b;
			case 'multiply':
				return a * b;
			case 'divide':
				return a / b;
		}
	},
);

// Start the server with stdio transport
const transport = new StdioTransport(server);
transport.listen();
```

--------------------------------

### createSubscriber example: MediaQuery class

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/svelte-reactivity.md

Implementation of MediaQuery using createSubscriber to integrate window.matchMedia with Svelte reactivity. The start callback registers a change listener and returns a cleanup function; the getter calls subscribe() to make it reactive when read in an effect.

```js
// @errors: 7031
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		// This makes the getter reactive, if read in an effect
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
```

--------------------------------

### Install Svelte plugin with /add-plugin svelte

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/60-plugins/30-cursor-plugin.md

Install the Svelte plugin from the Cursor Marketplace. Plugins can be installed for the current project or at user level.

```text
/add-plugin svelte
```

--------------------------------

### Quick Start: HTTP Transport (Web-based)

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Sets up an MCP server with the Zod adapter and HTTP transport. Shows how to integrate with Bun.serve, returning a 404 when the transport returns null.

```javascript
import { McpServer } from 'tmcp';
import { ZodJsonSchemaAdapter } from '@tmcp/adapter-zod';
import { HttpTransport } from '@tmcp/transport-http';
import { z } from 'zod';

const adapter = new ZodJsonSchemaAdapter();
const server = new McpServer(/* ... same server config ... */);

// Add tools as above...

// Create HTTP transport
const transport = new HttpTransport(server);

// Use with your preferred HTTP server (Bun example)
Bun.serve({
	port: 3000,
	async fetch(req) {
		const response = await transport.respond(req);
		if (response === null) {
			return new Response('Not Found', { status: 404 });
		}
		return response;
	},
});
```

--------------------------------

### Install @sveltejs/opencode plugin

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/60-plugins/20-opencode-plugin.md

Installs the Svelte OpenCode plugin from the command line. Requires OpenCode 1.3.4 or newer.

```sh
opencode plugin @sveltejs/opencode
```

--------------------------------

### Keyed each block example with index

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/each.md

Example of a keyed each block using item.id as the key, with and without an additional index value. The key can be any object, but strings and numbers are recommended for identity persistence.

```svelte
{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}

<!-- or with additional index value -->
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}
```

--------------------------------

### Add repository as marketplace from Copilot CLI

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/60-plugins/40-copilot-plugin.md

Adds the sveltejs/ai-tools repository as a plugin marketplace in the Copilot CLI. Run this before installing the Svelte plugin.

```bash
copilot plugin marketplace add sveltejs/ai-tools
```

--------------------------------

### Get documentation for sections

Source: https://github.com/sveltejs/ai-tools/blob/main/tools/skills/svelte-code-writer/SKILL.md

Retrieves full documentation for specified sections. Use after list-sections to fetch relevant docs.

```bash
npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."
```

```bash
npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
```

--------------------------------

### Reactive attachment with expensive setup

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/attach.md

Shows that attachments are fully reactive: `{@attach foo(bar)}` re-runs on changes to `foo` or `bar` (or any state read inside `foo`). This example includes expensive setup work that would re-run on every change.

```javascript
// @errors: 7006 2304 2552
function foo(bar) {
	return (node) => {
		veryExpensiveSetupWork(node);
		update(node, bar);
	};
}
```

--------------------------------

### Fetch documentation for sections

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/70-cli.md

Fetches full documentation for one or more sections. Sections can be matched by title or documentation path. The second example shows how to pass multiple sections separated by commas.

```bash
npx -y @sveltejs/mcp get-documentation 'svelte/$state'
```

```bash
npx -y @sveltejs/mcp get-documentation 'svelte/$state,svelte/await-expressions'
```

--------------------------------

### Destructuring and rest patterns in each blocks

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/each.md

Examples showing how to use destructuring and rest patterns in each blocks. The first example destructures object properties, the second uses a rest pattern to spread remaining props, and the third destructures an array with a rest pattern.

```svelte
{#each items as { id, name, qty }, i (id)}
	<li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
	<li><span>{id}</span><MyComponent {...rest} /></li>
{/each}

{#each items as [id, ...rest]}
	<li><span>{id}</span><MyComponent values={rest} /></li>
{/each}
```

--------------------------------

### Reactive Attachment Re-running

Source: https://github.com/sveltejs/ai-tools/blob/main/tools/skills/svelte-core-bestpractices/references/attach.md

Illustrates how attachments re-run on state changes and how to optimize expensive setup work.

```javascript
// @errors: 7006 2304 2552
function foo(bar) {
	return (node) => {
		veryExpensiveSetupWork(node);
		update(node, bar);
	};
}
```

```javascript
// @errors: 7006 2304 2552
function foo(+++getBar+++) {
	return (node) => {
		veryExpensiveSetupWork(node);

+++		$effect(() => {
			update(node, getBar());
		});+++
	}
}
```

--------------------------------

### Get Svelte documentation sections

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-code-writer/SKILL.md

Retrieves full documentation for specified sections. Use after list-sections to fetch relevant docs.

```bash
npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."
```

--------------------------------

### Avoiding re-runs with child effect

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/attach.md

Alternative pattern to avoid re-running expensive setup: pass data inside a function and read it in a child effect. The `+++` markers indicate the changes from the previous example.

```javascript
// @errors: 7006 2304 2552
function foo(+++getBar+++) {
	return (node) => {
		veryExpensiveSetupWork(node);

+++		$effect(() => {
			update(node, getBar());
		});+++
	}
}
```

--------------------------------

### Forking with fork() for preloading

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/await-expressions.md

Use this snippet to implement preloading with the fork() API. It shows how to create a fork, commit it, and discard it. The fork allows async work to start when the fork is created, useful for navigation preloading.

```svelte
<script>
	import { fork } from 'svelte';
	import Menu from './Menu.svelte';

	let open = $state(false);

	/** @type {import('svelte').Fork | null} */
	let pending = null;

	function preload() {
		pending ??= fork(() => {
			open = true;
		});
	}

	function discard() {
		pending?.discard();
		pending = null;
	}
</script>

<button
	onfocusin={preload}
	onfocusout={discard}
	onpointerenter={preload}
	onpointerleave={discard}
	onclick={() => {
		pending?.commit();
		pending = null;

		// in case `pending` didn't exist
		// (if it did, this is a no-op)
		open = true;
	}}
>open menu</button>

{#if open}
	<!-- any async work inside this component will start
	     as soon as the fork is created -->
	<Menu onclose={() => open = false} />
{/if}
```

--------------------------------

### Run MCP inspector

Source: https://github.com/sveltejs/ai-tools/blob/main/README.md

Starts the MCP inspector tool. After running, visit http://localhost:6274/ and use transport type 'Streamable HTTP' with the endpoint http://localhost:5173/mcp.

```bash
pnpm run inspect
```

--------------------------------

### Open plugin directory in Codex CLI

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/60-plugins/50-codex-plugin.md

Opens the plugin directory from an interactive Codex CLI session to install the Svelte plugin.

```bash
codex
/plugins
```

--------------------------------

### Readonly function binding with null get

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/bind.md

For readonly bindings like dimension bindings, set the get function to null. This example binds clientWidth and clientHeight to a redraw function.

```svelte
<div
	bind:clientWidth={null, redraw}
	bind:clientHeight={null, redraw}
>...</div>
```

--------------------------------

### Snippet Scope Example

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/snippet.md

Shows that snippets can access outer variables and are visible in their lexical scope. The example includes a component with a message prop and a hello snippet.

```svelte
<!--- file: App.svelte --->
<script>
	let { message = `it's great to see you!` } = $props();
</script>

{#snippet hello(name)}
	<p>hello {name}! {message}!</p>
{/snippet}

{@render hello('alice')}
{@render hello('bob')}
```

--------------------------------

### Svelte autofixer usage examples

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-code-writer/SKILL.md

Examples of using svelte-autofixer: inline code (escape $ as \$), a file path, and targeting Svelte 4. When passing code with runes, escape $ as \$ to prevent shell substitution.

```bash
# Analyze inline code (escape $ as \$)
npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>'
```

```bash
# Analyze a file
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte
```

```bash
# Target Svelte 4
npx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4
```

--------------------------------

### $inspect(...).with(...) rune example

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/inspect.md

Use $inspect(...).with to replace the default console.log with a custom callback. The callback receives 'init' or 'update' as the first argument, followed by the inspected values.

```svelte
<!--- file: App.svelte --->
<script>
	let count = $state(0);

	$inspect(count).with((type, count) => {
		if (type === 'update') {
			debugger; // or `console.trace`, or whatever you want
		}
	});
</script>

<button onclick={() => count++}>Increment</button>
```

--------------------------------

### $inspect(...) rune example

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/inspect.md

Use $inspect to log reactive state changes during development. It re-runs whenever its arguments change, tracking deeply, and prints a stack trace on updates (except in the playground).

```svelte
<!--- file: App.svelte --->
<script>
	let count = $state(0);
	let message = $state('hello');

	$inspect(count, message); // will console.log when `count` or `message` change
</script>

<button onclick={() => count++}>Increment</button>
<input bind:value={message} />
```

--------------------------------

### createSubscriber: MediaQuery integration and type declaration

Source: https://github.com/sveltejs/ai-tools/blob/main/tools/skills/svelte-core-bestpractices/references/svelte-reactivity.md

Integration example for the createSubscriber function, showing a reactive MediaQuery class that updates effects when the media query changes. Includes the function's type declaration (TypeScript).

```js
// @errors: 7031
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		// This makes the getter reactive, if read in an effect
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}

```

```dts
function createSubscriber(
	start: (update: () => void) => (() => void) | void
): () => void;
```

--------------------------------

### createSubscriber

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/svelte-reactivity.md

Creates a subscribe function that integrates external event-based systems with Svelte's reactivity. The start callback receives an update function to trigger re-runs, and can return a cleanup function.

```APIDOC
## createSubscriber

### Description
Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity. It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.

### Method
function

### Endpoint
createSubscriber(start: (update: () => void) => (() => void) | void): () => void

### Parameters
#### start
- **start** (function) - Required - A callback that receives an `update` function. When `update` is called, the effect re-runs. Can return a cleanup function called when the effect is destroyed.

### Return Value
- **subscribe** (function) - A function that can be called inside an effect to subscribe to the external event source.

### Behavior
- If `subscribe` is called inside an effect (including indirectly, e.g., inside a getter), `start` is called with an `update` function. Whenever `update` is called, the effect re-runs.
- If `start` returns a cleanup function, it will be called when the effect is destroyed.
- If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects are active, and the returned teardown function will only be called when all effects are destroyed.

### Example
```js
// @errors: 7031
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		// This makes the getter reactive, if read in an effect
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
```

### TypeScript Signature
```dts
function createSubscriber(
	start: (update: () => void) => (() => void) | void
): () => void;
```
```

--------------------------------

### SSR: await render(App) in server.js

Source: https://github.com/sveltejs/ai-tools/blob/main/plugins/claude/svelte/skills/svelte-core-bestpractices/references/await-expressions.md

Use the render API from 'svelte/server' to perform asynchronous server-side rendering. Await the return value to get the head and body. Frameworks like SvelteKit handle this automatically.

```javascript
/// file: server.js
import { render } from 'svelte/server';
import App from './App.svelte';

const { head, body } = await render(App);
```

--------------------------------

### $inspect.trace(...) rune example

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/inspect.md

Use $inspect.trace() inside an effect or derived to trace which reactive state caused it to re-run. It must be the first statement of the function body and only works in development.

```svelte
<script>
	import { doSomeWork } from './elsewhere';

	$effect(() => {
		+++// $inspect.trace must be the first statement of a function body+++
		+++$inspect.trace();+++
		doSomeWork();
	});
</script>
```

--------------------------------

### Snippet Scope and Visibility Errors

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/snippet.md

Demonstrates that snippets are visible to siblings and children, but not outside their lexical scope. The example shows valid and invalid render calls.

```svelte
<div>
	{#snippet x()}
		{#snippet y()}...{/snippet}

		<!-- this is fine -->
		{@render y()}
	{/snippet}

	<!-- this will error, as `y` is not in scope -->
	{@render y()}
</div>

<!-- this will also error, as `x` is not in scope -->
{@render x()}
```

--------------------------------

### Function binding with transformation

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/bind.md

Use bind:value with get and set functions to transform input to lowercase. The set function receives the new value and assigns it to the variable after transformation.

```svelte
<input bind:value={
	() => value,
	(v) => value = v.toLowerCase()}
/>
```

--------------------------------

### Asynchronous server-side rendering with render()

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/await-expressions.md

Use this snippet to perform asynchronous server-side rendering in Svelte. The render function returns a promise, so you must await it. This example shows the basic usage in a server.js file.

```javascript
/// file: server.js
import { render } from 'svelte/server';
import App from './App.svelte';

const { head, body } = +++await+++ render(App);
```

--------------------------------

### Exporting Snippets from a Module Script

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/snippet.md

This example shows how to export a snippet from a module script and use it in another component. The snippet is declared in snippets.svelte and imported into App.svelte. Requires Svelte 5.5.0 or newer.

```svelte
<!--- file: App.svelte --->
<script>
	import { add } from './snippets.svelte';
</script>

{@render add(1, 2)}
```

```svelte
<!--- file: snippets.svelte --->
<script module>
	export { add };
</script>

{#snippet add(a, b)}
	{a} + {b} = {a + b}
{/snippet}
```

--------------------------------

### createSubscriber type signature

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/svelte-reactivity.md

TypeScript declaration for createSubscriber. The start callback receives an update function and may return a cleanup function; the returned subscribe function is called inside effects to trigger re-runs.

```dts
function createSubscriber(
	start: (update: () => void) => (() => void) | void
): () => void;
```

--------------------------------

### Event listener syntax for elements

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/SKILL.md

Demonstrates three ways to attach event listeners in Svelte: inline arrow function, attribute shorthand, and spread attributes. Any element attribute starting with 'on' is treated as an event listener.

```svelte
<button onclick={() => {...}}>click me</button>

<!-- attribute shorthand also works -->
<button {onclick}>...</button>

<!-- so do spread attributes -->
<button {...props}>...</button>
```

--------------------------------

### new McpServer(serverInfo, options)

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Constructs a new McpServer instance with the given server metadata and configuration options.

```APIDOC
## constructor(serverInfo, options)

### Description
Creates a new McpServer instance with the provided metadata and configuration.

### Parameters
- **serverInfo** (object) - Required - Server metadata including name, version, and description.
- **options** (object) - Required - Configuration object with adapter and capabilities.

### Request Example
```javascript
new McpServer(serverInfo, options);
```

```

--------------------------------

### McpServer constructor

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Creates a new McpServer instance. The serverInfo parameter provides server metadata (name, version, description), and options is a configuration object with adapter and capabilities.

```javascript
new McpServer(serverInfo, options);
```

--------------------------------

### Run npx @sveltejs/mcp CLI help

Source: https://github.com/sveltejs/ai-tools/blob/main/plugins/claude/svelte/agents/svelte-file-editor.md

Command to learn how to use the @sveltejs/mcp CLI when MCP tools are not available. Run this to see usage instructions.

```bash
npx @sveltejs/mcp@latest -y --help
```

--------------------------------

### Launch stdio MCP server

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/70-cli.md

Runs the default stdio MCP server. Use this when you want the standard MCP server behavior.

```bash
npx -y @sveltejs/mcp
```

--------------------------------

### Using Multiple Schema Libraries (Zod and Valibot)

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Shows how to use different schema libraries (Zod and Valibot) for different tools on the same server. Each tool defines its own schema and handler, demonstrating flexibility in schema choice.

```javascript
// Use different schemas for different tools
import { z } from 'zod';
import * as v from 'valibot';

server.tool(
	{
		name: 'zod-tool',
		schema: z.object({ name: z.string() }),
	},
	async ({ name }) => `Hello ${name}`,
);

server.tool(
	{
		name: 'valibot-tool',
		schema: v.object({ age: v.number() }),
	},
	async ({ age }) => `Age: ${age}`,
);
```

--------------------------------

### List Svelte documentation sections

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-code-writer/SKILL.md

Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths.

```bash
npx @sveltejs/mcp list-sections
```

--------------------------------

### Add marketplace

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/60-plugins/10-claude-plugin.md

Adds the sveltejs/ai-tools repository as a plugin marketplace in Claude Code.

```bash
/plugin marketplace add sveltejs/ai-tools
```

--------------------------------

### Snippet referencing outer scope

Source: https://github.com/sveltejs/ai-tools/blob/main/plugins/claude/svelte/skills/svelte-core-bestpractices/references/snippet.md

Snippets can reference values declared outside themselves, such as props from the script tag. This example shows a snippet using a message prop.

```svelte
<script>
	let { message = `it's great to see you!` } = $props();
</script>

{#snippet hello(name)}
	<p>hello {name}! {message}!</p>
{/snippet}

{@render hello('alice')}
{@render hello('bob')}
```

--------------------------------

### Run database inspector

Source: https://github.com/sveltejs/ai-tools/blob/main/README.md

Launches the database inspector. Access it at https://local.drizzle.studio/ after running the command.

```bash
pnpm run db:studio
```

--------------------------------

### CLI usage

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/70-cli.md

Shows the general CLI syntax. Invoke with a subcommand to use CLI mode instead of the MCP server.

```bash
npx -y @sveltejs/mcp <command> [options]
```

--------------------------------

### Stable random value with hydratable

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/hydratable.md

Uses `hydratable` to provide a random value that stays stable between server rendering and hydration, so the client doesn't get a different number.

```ts
import { hydratable } from 'svelte';
const rand = hydratable('random', () => Math.random());
```

--------------------------------

### get-documentation

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/70-cli.md

Fetches the full documentation for one or more sections. Sections can be matched by title or documentation path. If a section cannot be found, the CLI returns an error plus similar matches when available.

```APIDOC
## get-documentation

### Description
Fetches the full documentation for one or more sections.

### Method
CLI command

### Command
npx -y @sveltejs/mcp get-documentation <sections>

### Parameters
#### Arguments
- **sections** (string) - Required - Comma-separated list of section identifiers (title or documentation path).

### Example
```bash
npx -y @sveltejs/mcp get-documentation 'svelte/$state'
# or
npx -y @sveltejs/mcp get-documentation 'svelte/$state,svelte/await-expressions'
```

### Output
Full documentation for the requested sections. If a section cannot be found, an error is returned with similar matches when available.
```

--------------------------------

### Copilot CLI: Interactive add command

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/30-remote-setup.md

Run this command in Copilot CLI to interactively add the MCP server.

```bash
/mcp add
```

--------------------------------

### Add Svelte marketplace to Codex CLI

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/60-plugins/50-codex-plugin.md

Adds the sveltejs/ai-tools repository as a plugin marketplace in Codex CLI.

```bash
codex plugin marketplace add sveltejs/ai-tools
```

--------------------------------

### Copilot CLI: mcp-config.json

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/30-remote-setup.md

Create or edit ~/.copilot/mcp-config.json with this configuration to add the Svelte MCP server.

```json
{
	"mcpServers": {
		"svelte": {
			"url": "https://mcp.svelte.dev/mcp"
		}
	}
}
```

--------------------------------

### Run Svelte autofixer

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-code-writer/SKILL.md

Analyzes Svelte code and suggests fixes for common issues. Options: --async (default false), --svelte-version (4 or 5, default 5).

```bash
npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]
```

--------------------------------

### Create svelte.json with MCP, subagent, instructions, and skills

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/README.md

Creates a svelte.json configuration file to customize the OpenCode plugin: enables a local MCP server, the svelte-file-editor subagent, instruction injection, and specific skills, with autoupdate enabled. The subagent uses the specified Anthropic model, temperature 0.7, top_p 0.9, and a maxSteps limit of 20.

```json
{
	"$schema": "https://svelte.dev/opencode/schema.json",
	"mcp": {
		"type": "local",
		"enabled": true
	},
	"subagent": {
		"enabled": true,
		"agents": {
			"svelte-file-editor": {
				"model": "anthropic/claude-sonnet-4-20250514",
				"temperature": 0.7,
				"top_p": 0.9,
				"maxSteps": 20
			}
		}
	},
	"instructions": {
		"enabled": true
	},
	"skills": {
		"enabled": ["svelte-code-writer", "svelte-core-bestpractices"]
	},
	"autoupdate": true
}
```

--------------------------------

### server.prompt() registration

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Registers a prompt template with optional schema validation and a completion callback. The handler returns a messages object.

```javascript
server.prompt(
  {
	name: 'prompt-name',
	description: 'Prompt description',
	schema: yourSchema, // optional
	complete: (arg, context) => ['completion1', 'completion2'] // optional
  },
  async (input) => {
	// Prompt implementation
	return { messages: [...] };
  }
);
```

--------------------------------

### list-sections

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/70-cli.md

Lists all available Svelte and SvelteKit documentation sections. The output is a structured text list including each section's title, use_cases, and documentation path.

```APIDOC
## list-sections

### Description
Lists all available Svelte and SvelteKit documentation sections.

### Method
CLI command

### Command
npx -y @sveltejs/mcp list-sections

### Output
A structured text list of sections, including each section's title, use_cases, and documentation path.

### Example
```bash
npx -y @sveltejs/mcp list-sections
```
```

--------------------------------

### createSubscriber

Source: https://github.com/sveltejs/ai-tools/blob/main/plugins/cursor/svelte/skills/svelte-core-bestpractices/references/svelte-reactivity.md

Documentation for the createSubscriber function from Svelte's reactivity module.

```APIDOC
## createSubscriber

### Description
Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity. It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.

### Signature
```ts
function createSubscriber(
	start: (update: () => void) => (() => void) | void
): () => void;
```

### Parameters
- `start` (function) - Required - A callback that receives an `update` function. When `update` is called, any effects that read the subscriber will re-run. The callback may return a cleanup function that is called when all effects are destroyed.

### Returns
- `() => void` - A `subscribe` function. When called inside an effect (including indirectly, for example inside a getter), it triggers the `start` callback and makes the surrounding effect reactive to `update` calls.

### Behavior
- If `subscribe` is called inside an effect, the `start` callback is called with an `update` function. Whenever `update` is called, the effect re-runs.
- If `start` returns a cleanup function, it is called when the effect is destroyed.
- If `subscribe` is called in multiple effects, `start` is only called once as long as the effects are active, and the returned teardown function is only called when all effects are destroyed.

### Example
```js
// @errors: 7031
import { createSubscriber } from 'svelte/reactivity';
import { on } from 'svelte/events';

export class MediaQuery {
	#query;
	#subscribe;

	constructor(query) {
		this.#query = window.matchMedia(`(${query})`);

		this.#subscribe = createSubscriber((update) => {
			// when the `change` event occurs, re-run any effects that read `this.current`
			const off = on(this.#query, 'change', update);

			// stop listening when all the effects are destroyed
			return () => off();
		});
	}

	get current() {
		// This makes the getter reactive, if read in an effect
		this.#subscribe();

		// Return the current state of the query, whether or not we're in an effect
		return this.#query.matches;
	}
}
```
```

--------------------------------

### Pass snippets implicitly as component props

Source: https://github.com/sveltejs/ai-tools/blob/main/tools/skills/svelte-core-bestpractices/references/snippet.md

Snippets declared directly inside a component's opening tag automatically become props on that component. This example shows the `App.svelte` parent defining `header` and `row` snippets as children, and `Table.svelte` receiving them via `$props()` and rendering conditionally with `{@render}`.

```svelte
<!--- file: App.svelte --->
<script>
	import Table from './Table.svelte';

	const fruits = [
		{ name: 'apples', qty: 5, price: 2 },
		{ name: 'bananas', qty: 10, price: 1 },
		{ name: 'cherries', qty: 20, price: 0.5 }
	];
</script>

<Table data={fruits}>
	{#snippet header()}
		<th>fruit</th>
		<th>qty</th>
		<th>price</th>
		<th>total</th>
	{/snippet}

	{#snippet row(d)}
		<td>{d.name}</td>
		<td>{d.qty}</td>
		<td>{d.price}</td>
		<td>{d.qty * d.price}</td>
	{/snippet}
</Table>
```

```svelte
<!--- file: Table.svelte --->
<script>
	let { data, header, row } = $props();
</script>

<table>
	{#if header}
		<thead>
			<tr>{@render header()}</tr>
		</thead>
	{/if}

	<tbody>
		{#each data as d}
			<tr>{@render row(d)}</tr>
		{/each}
	</tbody>
</table>

<style>
	table {
		text-align: left;
		border-spacing: 0;
	}

	tbody tr:nth-child(2n+1) {
		background: ButtonFace;
	}

	table :global(th), table :global(td) {
		padding: 0.5em;
	}
</style>
```

--------------------------------

### Basic snippet rendering with {@render}

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/render.md

Defines a snippet named 'sum' that takes two parameters and renders it three times with different arguments. Use this to render a snippet multiple times with different values.

```svelte
{#snippet sum(a, b)}
	<p>{a} + {b} = {a + b}</p>
{/snippet}

{@render sum(1, 2)}
{@render sum(3, 4)}
{@render sum(5, 6)}
```

--------------------------------

### Override child styles with :global

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/SKILL.md

Fallback approach to style child components when CSS custom properties are impossible (e.g., the child comes from a library). Uses :global inside a scoped style block to override the child's styles. The example targets h1 elements inside a div.

```svelte
<div>
	<Child />
</div>

<style>
	div :global {
		h1 {
			color: red;
		}
	}
</style>
```

--------------------------------

### Define and render a snippet with {#snippet} and {@render}

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/SKILL.md

Defines a reusable snippet named 'greeting' that takes a 'name' parameter and renders a paragraph. The snippet is instantiated with the {@render ...} tag. Snippets must be declared within the template; top-level snippets can be referenced inside <script> and, if they don't reference component state, can be exported from <script module>.

```svelte
{#snippet greeting(name)}
	<p>hello {name}!</p>
{/snippet}

{@render greeting('world')}
```

--------------------------------

### svelte-autofixer

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/70-cli.md

Runs the Svelte autofixer against either inline code or a file path. If the argument is an existing path, the CLI reads the file automatically; otherwise it treats the argument as raw Svelte code. Options allow choosing the Svelte version and enabling async analysis.

```APIDOC
## svelte-autofixer

### Description
Runs the Svelte autofixer against either inline code or a file path.

### Method
CLI command

### Command
npx -y @sveltejs/mcp svelte-autofixer <code_or_path>

### Parameters
#### Arguments
- **code_or_path** (string) - Required - Either a file path or raw Svelte code. If the path exists, the file is read automatically.

#### Options
- **--svelte-version <4|5>** (string) - Optional - Choose which Svelte version to validate against (defaults to `5`).
- **--async** (boolean) - Optional - Enable async Svelte analysis for Svelte 5 projects.

### Example
```bash
npx -y @sveltejs/mcp svelte-autofixer 'src/routes/+page.svelte'
```

### Output
Prints an object with:
- `issues`
- `suggestions`
- `require_another_tool_call_after_fixing`
```

--------------------------------

### Attach listeners to window and document

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/SKILL.md

Shows how to attach event listeners to window and document using <svelte:window> and <svelte:document>. Avoid using onMount or $effect for this purpose.

```svelte
<svelte:window onkeydown={...} />
<svelte:document onvisibilitychange={...} />
```

--------------------------------

### server.template() registration

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Registers a URI template for dynamic resources. The template includes a placeholder (e.g., {id}) and an optional completion callback. The handler uses params.id to return contents.

```javascript
server.template(
  {
	name: 'template-name',
	description: 'Template description',
	uri: 'file://path/{id}/resource',
	complete: (arg, context) => ['id1', 'id2'] // optional
  },
  async (uri, params) => {
	// Template implementation using params.id
	return { contents: [...] };
  }
);
```

--------------------------------

### server.tool() registration

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Registers a tool with an optional schema for validation. The handler receives the input and returns the result.

```javascript
server.tool(
	{
		name: 'tool-name',
		description: 'Tool description',
		schema: yourSchema, // optional
	},
	async (input) => {
		// Tool implementation
		return result;
	},
);
```

--------------------------------

### server.resource() registration

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Registers a static resource with a fixed URI. The handler receives the URI and parameters and returns contents.

```javascript
server.resource(
  {
	name: 'resource-name',
	description: 'Resource description',
	uri: 'file://path/to/resource'
  },
  async (uri, params) => {
	// Resource implementation
	return { contents: [...] };
  }
);
```

--------------------------------

### prompt(definition, handler)

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Registers a prompt template with the server, supporting optional schema validation and argument autocomplete.

```APIDOC
## prompt(definition, handler)

### Description
Registers a prompt template with the server, with optional schema validation and autocomplete for arguments. The handler receives the input and returns an object containing messages.

### Parameters
- **definition** (object) - Required - The prompt definition object containing name, description, and optional schema and complete.
  - **name** (string) - Required - The name of the prompt.
  - **description** (string) - Required - A description of the prompt.
  - **schema** (object) - Optional - JSON schema for validating input.
  - **complete** (function) - Optional - Async function for providing completions for arguments.
- **handler** (function) - Required - Async function that receives the input and returns an object with messages.

### Request Example
```javascript
server.prompt(
  {
	name: 'prompt-name',
	description: 'Prompt description',
	schema: yourSchema, // optional
	complete: (arg, context) => ['completion1', 'completion2'] // optional
  },
  async (input) => {
	// Prompt implementation
	return { messages: [...] };
  }
);
```

```

--------------------------------

### Resource Template with Completion

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Defines a resource template with a completion handler for the userId parameter. The complete callback returns a list of suggested user IDs, and the handler fetches the user and returns JSON content.

```javascript
server.template(
	{
		name: 'user-profile',
		description: 'Get user profile by ID',
		uri: 'users/{userId}/profile',
		complete: (arg, context) => {
			// Provide completions for userId parameter
			return ['user1', 'user2', 'user3'];
		},
	},
	async (uri, params) => {
		const user = await getUserById(params.userId);
		return {
			contents: [
				{
					uri,
					mimeType: 'application/json',
					text: JSON.stringify(user),
				},
			],
		};
	},
);
```

--------------------------------

### resource(definition, handler)

Source: https://github.com/sveltejs/ai-tools/blob/main/docs/tmcp.md

Registers a static resource with the server, serving fixed URIs.

```APIDOC
## resource(definition, handler)

### Description
Registers a static resource with the server. The handler receives the URI and parameters, returning a resource contents object.

### Parameters
- **definition** (object) - Required - The resource definition object containing name, description, and uri.
  - **name** (string) - Required - The name of the resource.
  - **description** (string) - Required - A description of the resource.
  - **uri** (string) - Required - The URI of the resource.
- **handler** (function) - Required - Async function that receives the uri and params, returning an object with contents.

### Request Example
```javascript
server.resource(
  {
	name: 'resource-name',
	description: 'Resource description',
	uri: 'file://path/to/resource'
  },
  async (uri, params) => {
	// Resource implementation
	return { contents: [...] };
  }
);
```

```

--------------------------------

### Using settled() to wait for async updates

Source: https://github.com/sveltejs/ai-tools/blob/main/packages/opencode/skills/svelte-core-bestpractices/references/await-expressions.md

Shows how to use tick() and settled() to ensure UI updates are applied before proceeding. The tick() call prevents grouping of the `updating` change, and settled() waits for all updates affected by `color` and `answer` to complete.

```js
import { tick, settled } from 'svelte';

async function onclick() {
	updating = true;

	// without this, the change to `updating` will be
	// grouped with the other changes, meaning it
	// won't be reflected in the UI
	await tick();

	color = 'octarine';
	answer = 42;

	await settled();

	// any updates affected by `color` or `answer`
	// have now been applied
	updating = false;
}
```

--------------------------------

### Codex CLI: config.toml for remote MCP

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/30-remote-setup.md

Add this to your config.toml (defaults to ~/.codex/config.toml) to enable the remote MCP client and configure the Svelte server.

```toml
experimental_use_rmcp_client = true
[mcp_servers.svelte]
url = "https://mcp.svelte.dev/mcp"
```

--------------------------------

### Run Svelte autofixer on a file

Source: https://github.com/sveltejs/ai-tools/blob/main/documentation/docs/30-mcp/70-cli.md

Runs the Svelte autofixer against a file path. The CLI reads the file automatically if the argument is an existing path.

```bash
npx -y @sveltejs/mcp svelte-autofixer 'src/routes/+page.svelte'
```
Tokens:
Raw