MCP Server tool purpose
MCP Server provides tools, prompts and resources to give your agent more context, by pulling directly from the official Svelte documentation and using static analysis to correct common generative AI pitfalls.
Svelte · CLI and AI tooling · all subjects
ai/llm integration overview
67 notes in this subject, read out of this brain and free to use. This is page 1 of 2.
Instructions tool purpose
Instructions is a small prompt always injected into your session to make your agent more aware of the available tools.
Four official Svelte AI tools
The Svelte team maintains four AI tools designed to help agents write correct, robust Svelte code. They are designed to work together but can each be used individually: Instructions, MCP Server, Skills, and Subagents.
@sveltejs/mcp CLI
The Skills tool teaches agents how to use the @sveltejs/mcp CLI.
Subagents tool purpose
Subagents are focused agents that can be invoked in parallel to execute atomic operations in a separate context window.
Skills tool purpose
Skills are lazy-loaded descriptions that teach your agent Svelte best practices and how to use the @sveltejs/mcp CLI.
get-documentation tool - retrieve Svelte MCP documentation content
The get-documentation tool retrieves full documentation content for specific sections. It accepts single or multiple sections. After calling the list-sections tool, analyze the returned documentation sections (especially the use_cases field) and then use get-documentation to fetch all documentation sections relevant for the user's task.
list-sections tool - discover Svelte MCP documentation sections
The list-sections tool should be used first to discover all available Svelte MCP documentation sections. It returns a structured list with titles, use_cases, and paths. When asked about Svelte or SvelteKit topics, always use this tool at the start of the chat to find relevant sections.
AGENTS.md prompt for Svelte MCP server
When using the Svelte MCP server, include a prompt in your AGENTS.md (or CLAUDE.md for Claude Code, or GEMINI.md for Gemini) that tells your AI agent which tools are available and when to use them. This setup is automatically configured when running 'npx sv add mcp'.
playground-link tool - generate Svelte Playground links
The playground-link tool generates a Svelte Playground link with provided code. After completing code, ask the user if they want a playground link. Only call this tool after user confirmation and never if code was written to files in their project.
svelte-autofixer tool - analyze and fix Svelte code
The svelte-autofixer tool analyzes Svelte code and returns issues and suggestions. This tool must be used whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
Model Context Protocol Overview
Model Context Protocol (MCP) is a protocol described at modelcontextprotocol.io/docs/getting-started/intro that enables structured communication between AI models and external services or tools.
Svelte subagents documentation note
The Svelte documentation file for subagents is automatically generated by a script located at apps/svelte.dev/scripts/sync-docs/index.ts. This file should not be edited manually.
Subagent for Svelte file operations
Creating, editing or analyzing a Svelte file is recommended to be done by a subagent that your main agent can invoke. Subagents use a separate context window, allowing them to fetch documentation, iterate with svelte-autofixer and write to the filesystem without wasting context in the main agent.
svelte-file-editor output format
After completing work on a Svelte file, the svelte-file-editor should provide: (1) Summary of changes made; (2) Any issues found and fixed by the autofixer; (3) Recommendations for further improvements if any.
svelte-file-editor workflow
The svelte-file-editor workflow when invoked to work on a Svelte file is: (1) Gather context if needed by calling list-sections to see available documentation, then get-documentation with relevant section names; (2) Read the target file to understand the current implementation; (3) Make changes applying Svelte 5 best practices; (4) Validate changes by calling svelte-autofixer with the updated code; (5) Fix any issues reported by autofixer and re-validate until no issues remain.
svelte-file-editor available MCP tools
The svelte-file-editor subagent has access to three MCP tools: (1) list-sections - lists all available Svelte 5 and SvelteKit documentation sections with titles and paths, used first to discover available documentation; (2) get-documentation - retrieves full documentation for specified sections, accepts a single section name or an array of section names, used after list-sections to fetch relevant docs; (3) svelte-autofixer - analyzes Svelte code and returns suggestions to fix issues including using $effect instead of $derived for computations, missing cleanup in effects, Svelte 4 syntax like on:click/export let/<slot>, and missing keys in {#each} blocks.
svelte-file-editor subagent
The svelte-file-editor is a specialized subagent for Svelte 5 code that is available in the sveltejs/ai-tools repository. It is designed for creating, editing, and reviewing Svelte files. It must be used proactively when creating, editing, or reviewing any .svelte file or .svelte.ts/.svelte.js module and must use tools from the MCP server or the svelte-file-editor skill if available.
Instructions document is auto-generated
The Instructions document at apps/svelte.dev/content/docs/ai/20-instructions/index.md is generated by apps/svelte.dev/scripts/sync-docs/index.ts and should not be edited manually.
Claude Code Svelte plugin install command
To install the Svelte plugin after adding the marketplace, run the command: /plugin install svelte
Claude Code Svelte plugin installation command
To add the Svelte AI tools repository as a marketplace in Claude Code, run the command: /plugin marketplace add sveltejs/ai-tools
Claude Code Svelte plugin capabilities
The Svelte plugin available in Claude Code marketplace provides a remote MCP server, skills to instruct the LLM on how to properly write Svelte 5 code, and a specialized agent for editing Svelte files.
Claude Code Svelte plugin marketplace location
The open source repository containing the code for the MCP server is located at https://github.com/sveltejs/ai-tools and is also a Claude Code plugin marketplace.
Skills distribution - downloads and locations
You can download the latest skills from the releases page of the ai-tools repo, or find them in the tools/skills folder.
svelte-code-writer skill purpose
The svelte-code-writer skill is a CLI tool for Svelte 5 documentation lookup and code analysis. It must be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.
Skills availability - multiple AI platforms
Skills are available in the Claude Code plugin, the Codex CLI plugin, the GitHub Copilot CLI plugin, and the OpenCode plugin (@sveltejs/opencode). They can also be manually installed in your .claude/skills, .copilot/skills, or .opencode/skills folder.
svelte-core-bestpractices skill purpose
The svelte-core-bestpractices skill provides guidance on writing fast, robust, modern Svelte code. It should be loaded whenever in a Svelte project and asked to write, edit or analyze a Svelte component or module. It covers reactivity, event handling, styling, integration with libraries and more.
OpenCode Svelte plugin configuration file locations
The Svelte OpenCode plugin configuration is stored locally in `.opencode/svelte.json` or globally in `~/.config/opencode/svelte.json` (or in `$OPENCODE_CONFIG_DIR/svelte.json` if the environment variable is set).
OpenCode plugin for Svelte - installation command
Install the Svelte OpenCode plugin using the command `opencode plugin @sveltejs/opencode` with OpenCode 1.3.4 or newer.
OpenCode plugin for Svelte - config file installation
The Svelte OpenCode plugin can be installed by editing the OpenCode config file (global or local) and adding `@sveltejs/opencode` to the plugins list in JSON format.
OpenCode Svelte plugin provides MCP server, skills, and subagent
Installing the @sveltejs/opencode plugin provides the Svelte MCP server, skills, and the svelte-file-editor subagent.
OpenCode TUI plugin configuration location
The Svelte OpenCode plugin includes a TUI plugin that can be configured by adding @sveltejs/opencode to tui.json (global or project-local). Run `/svelte-plugin` command or select 'Configure Svelte plugin' from the command palette to open the interactive configuration dialog.
OpenCode Svelte plugin configuration schema
The Svelte OpenCode plugin configuration schema includes the following sections with these default settings: mcp (type: "remote" or "local", enabled: true), subagent (enabled: true, with agents.svelte-file-editor supporting model, temperature, top_p, and maxSteps settings), skills (enabled: true, can be boolean or array of specific skills), instructions (enabled: true), and autoupdate (true by default).
OpenCode plugin svelte-file-editor subagent configuration options
The svelte-file-editor subagent can be configured with: model (defaults to same as main agent), temperature (defaults to unset), top_p (defaults to unset), and maxSteps (defaults to unlimited).
OpenCode Svelte plugin skills configuration
The skills configuration can be set to true to enable all skills, or to an array of specific skill names such as ["svelte-core-bestpractices"] to enable only those skills.
OpenCode automatic plugin updates behavior
The Svelte OpenCode plugin checks npm for newer versions and warns when available. When a newer version is detected, the plugin removes itself from the OpenCode cache on shutdown, causing OpenCode to install the latest version on next startup. Automatic updates only apply to unpinned plugins or those explicitly using the 'latest' tag; exact versions, ranges, and other dist-tags are left unchanged. Automatic updates are enabled by default and can be disabled by setting autoupdate to false.
Cursor plugin installation scope
Plugins can be installed either for the current project or at user level.
Install Svelte plugin in Cursor
Install the Svelte plugin from the Cursor Marketplace using the command: /add-plugin svelte
Svelte Cursor plugin source code location
The source code for the Svelte Cursor plugin is available in the sveltejs/ai-tools repository at plugins/cursor/svelte.
Svelte Cursor plugin contents
The Svelte plugin for Cursor provides: the remote Svelte MCP server, Cursor skills, an always-on rule that tells the model how to use the Svelte MCP tools correctly, and the svelte-file-editor subagent for working on .svelte files and .svelte.ts/.svelte.js modules.
Cursor plugin system components
Cursor has a plugin system that can bundle rules, skills, agents, commands, MCP servers, and hooks.
Cursor CLI plugin limitations
The Cursor CLI does not support plugins yet. Plugin support in Cloud Agents is limited to MCP servers.
Cursor plugin component discovery
Once installed, Cursor automatically discovers plugin components: the Svelte MCP server is added from the plugin's .mcp.json file, rules and skills appear in Cursor's rules UI, and the svelte-file-editor agent becomes available in chat.
Add Svelte marketplace to Copilot CLI
You can add the Svelte AI tools repository as a marketplace from the Copilot CLI using the command: copilot plugin marketplace add sveltejs/ai-tools
Install Svelte plugin from source in VS Code
In VS Code, run the 'Install plugin from source' command and use the repository URL https://github.com/sveltejs/ai-tools to install the Svelte plugin from source.
Svelte plugin provides MCP server and skills
The Svelte plugin available in the marketplace provides remote MCP server access, skills to instruct the LLM on how to write Svelte 5 code properly, and a specialized agent for editing Svelte files.
GitHub Copilot CLI Svelte plugin marketplace location
The open source repository containing the MCP server code is located at https://github.com/sveltejs/ai-tools and serves as a GitHub Copilot CLI plugin marketplace.
Interactive Copilot CLI session plugin commands
You can run plugin installation commands from an interactive Copilot CLI session using: /plugin marketplace add sveltejs/ai-tools and /plugin install svelte@ai-tools
Install Svelte plugin via Copilot CLI
After adding the marketplace, install the Svelte plugin using the command: copilot plugin install svelte@ai-tools
How to install svelte plugin from Codex CLI
Open the plugin directory from an interactive Codex CLI session by running codex, then entering /plugins. Choose the Svelte marketplace, select the svelte plugin, and install it.
When to use MCP agent for Svelte file editing
When creating or editing .svelte files or .svelte.ts/.svelte.js modules, it is recommended to instruct the LLM to execute MCP calls with the agent. This can be done by explicitly mentioning an agent in your message to delegate work to it. Using the agent for Svelte-specific tasks helps save context by handling them more efficiently.
Codex CLI plugin marketplace for Svelte
The open source repository containing the MCP server code is also a Codex CLI plugin marketplace. The marketplace allows installation of the svelte plugin which provides the remote MCP server, skills to instruct the LLM on how to write Svelte 5 code, and a specialized agent for editing Svelte files.
How to add Svelte marketplace to Codex CLI
Add the repository as a marketplace from the Codex CLI by running: codex plugin marketplace add sveltejs/ai-tools
Codex CLI compatibility with .claude-plugin/marketplace.json
Codex can read the repository's legacy-compatible .claude-plugin/marketplace.json marketplace file, so the same marketplace source works for both Claude Code and Codex CLI.
Skills documentation is auto-generated
The Skills documentation page is automatically generated by a script located at apps/svelte.dev/scripts/sync-docs/index.ts. Users should not manually edit this file.
sv add ai-tools ide option example
Multiple IDE clients can be specified with the ide option: 'npx sv add ai-tools="ide:cursor,vscode"' adds tools for both Cursor and VS Code.
sv add ai-tools plugin option example
The delivery option can be specified as: 'npx sv add ai-tools="ide:claude-code+delivery:plugin"' to use the Svelte plugin delivery method for Claude Code.
sv add ai-tools tools option example
Individual tools can be selected with the tools option: 'npx sv add ai-tools="ide:cursor+delivery:tools+tools:mcp,svelte-file-editor"' to add only the mcp and svelte-file-editor tools for Cursor.
sv add ai-tools mcpSetup option example
The mcpSetup option can be specified as: 'npx sv add ai-tools="mcpSetup:local"' to configure local MCP setup when adding the MCP server as an individual tool.
Svelte plugin automatic setup for Claude Code
When using the Svelte plugin with Claude Code, it is enabled through a committed .claude/settings.json file. The first time you open the project, you are asked to trust the workspace, then the plugin installs automatically without needing a '/plugin install' command.