Compare commits

..

5 Commits

Author SHA1 Message Date
paoloricciuti
77c1728ab1 Merge branch 'main' into js-api-and-cli 2025-12-19 18:26:58 +01:00
paoloricciuti
83e9d6583a Merge branch 'main' into js-api-and-cli 2025-12-18 20:21:42 +01:00
paoloricciuti
5d8a85c2e3 fix: move to catalog 2025-12-18 19:27:36 +01:00
paoloricciuti
eac75d3629 fix: types exports 2025-12-18 19:23:25 +01:00
paoloricciuti
59abf83bdb feat: expose tools as JS api + cli 2025-12-18 18:43:53 +01:00
19 changed files with 12 additions and 266 deletions

View File

@@ -0,0 +1,5 @@
---
'@sveltejs/mcp': patch
---
feat: expose tools as JS api + cli

View File

@@ -1,13 +0,0 @@
{
"name": "svelte",
"owner": {
"name": "Svelte"
},
"plugins": [
{
"name": "svelte",
"source": "./plugins/svelte",
"description": "A plugin for all things Svelte development, MCP, skills, and more."
}
]
}

View File

@@ -18,7 +18,7 @@ jobs:
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: 10.26.2
version: 10.26.1
- name: Setup Node.js
uses: actions/setup-node@v6

View File

@@ -18,7 +18,7 @@ jobs:
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: 10.26.2
version: 10.26.1
- name: Setup Node.js
uses: actions/setup-node@v6

View File

@@ -1,45 +0,0 @@
name: Release Svelte Code Writer Skill
on:
push:
branches:
- main
paths:
- 'plugins/svelte/skills/svelte-code-writer/**'
workflow_dispatch:
permissions: {}
jobs:
release:
permissions:
contents: write
# prevents this action from running on forks
if: github.repository == 'sveltejs/mcp'
name: Release Svelte Code Writer Skill
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v6
- name: Get version from date
id: version
run: echo "version=$(date +'%Y.%m.%d-%H%M%S')" >> $GITHUB_OUTPUT
- name: Create zip
run: |
cd plugins/svelte/skills
zip -r svelte-code-writer.zip svelte-code-writer/
- name: Create Release
uses: softprops/action-gh-release@v2
with:
tag_name: svelte-code-writer-v${{ steps.version.outputs.version }}
name: Svelte Code Writer Skill v${{ steps.version.outputs.version }}
body: |
Automated release of the Svelte Code Writer skill.
This release was triggered by changes to the `plugins/svelte/skills/svelte-code-writer/` directory.
files: plugins/svelte/skills/svelte-code-writer.zip
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

View File

@@ -18,7 +18,7 @@ jobs:
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: 10.26.2
version: 10.26.1
- name: Setup Node.js
uses: actions/setup-node@v6

View File

@@ -16,8 +16,6 @@ claude mcp add -t http -s [scope] svelte https://mcp.svelte.dev/mcp
You can choose your preferred `scope` (it must be `user`, `project` or `local`) and `name`.
If you prefer you can also install the `svelte` plugin in [the Svelte Claude Code Marketplace](plugin) that will give you both the remote server and a useful [skill](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview).
## Claude Desktop
- Open Settings > Connectors

View File

@@ -1,3 +0,0 @@
---
title: Claude Code Plugin
---

View File

@@ -1,23 +0,0 @@
---
title: Overview
---
The open source [repository](https://github.com/sveltejs/mcp) containing the code for the MCP server is also a Claude Code Marketplace plugin.
The marketplace allow you to install the `svelte` plugin which will give you both the remote MCP server, a [skill](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview) to instruct the LLM on how to properly write Svelte 5 code, and a specialized agent for editing Svelte files.
If possible is recommended to instruct the LLM to execute MCP calls with the agent (you can explicitly mention an agent in your message to delegate work to it) when creating or editing `.svelte` files or `.svelte.ts`/`.svelte.js` modules as it helps save context by handling Svelte-specific tasks more efficiently.
## Installation
To add the repository as a marketplace launch claude code and type
```bash
/plugin marketplace add sveltejs/mcp
```
once you do that you can install the svelte skill doing
```bash
/plugin install svelte
```

View File

@@ -1,11 +0,0 @@
---
title: Skill
---
Claude Skills are a set of Markdown files that live in your `.claude` folder (or that you can upload in your Claude web/desktop). They are automatically loaded by Claude when it thinks they are appropriate for the current task.
With those markdown files you can steer the agent behaviours and, in our case, we teach him how to properly write Svelte 5 code. The advantage over the MCP server is that the relevant tokens are only loaded when they are needed (so if you ask the LLM to write a Typescript utility in a Svelte project it will not load the skill in the context).
You can find the skill inside the [`sveltejs/mcp`](https://github.com/sveltejs/mcp/tree/main/plugins/svelte/skills) repo (it's in the `/plugins/svelte/skills` folder). You can also download the latest zip file from the [releases page](https://github.com/sveltejs/mcp/releases?q=svelte-code-writer) to load it in your Claude web/desktop or to extract it inside your `.claude` folder.
If you are using Claude Code you can also install it through the [Svelte marketplace](plugin).

View File

@@ -1,11 +0,0 @@
---
title: Subagent
---
The Svelte plugin includes a specialized subagent called `svelte-file-editor` designed for creating, editing, and reviewing Svelte files.
## Benefits
The subagent is executed in a separate "agent" that has access to it's own context window. This allows the agent to fetch the documentation, iterate with the `svelte-autofixer` tool and write to the file system without wasting context in the main agent.
The delegation should happen automatically when appropriate, but you can also explicitly request the subagent be used for Svelte-related tasks.

View File

@@ -3,7 +3,7 @@
"version": "0.0.1",
"description": "The official Svelte MCP server implementation",
"type": "module",
"packageManager": "pnpm@10.26.2",
"packageManager": "pnpm@10.26.1",
"scripts": {
"build": "pnpm -r run build",
"dev": "pnpm --filter @sveltejs/mcp-remote run dev",

View File

@@ -1,11 +1,5 @@
# @sveltejs/mcp
## 0.1.16
### Patch Changes
- feat: expose tools as JS api + cli ([#128](https://github.com/sveltejs/mcp/pull/128))
## 0.1.15
### Patch Changes

View File

@@ -1,6 +1,6 @@
{
"name": "@sveltejs/mcp",
"version": "0.1.16",
"version": "0.1.15",
"type": "module",
"license": "MIT",
"mcpName": "dev.svelte/mcp",

View File

@@ -9,7 +9,7 @@
"subfolder": "packages/mcp-stdio",
"source": "github"
},
"version": "0.1.16",
"version": "0.1.15",
"websiteUrl": "https://svelte.dev/docs/mcp/overview",
"icons": [
{
@@ -25,7 +25,7 @@
{
"registryType": "npm",
"identifier": "@sveltejs/mcp",
"version": "0.1.16",
"version": "0.1.15",
"runtimeHint": "npx",
"transport": {
"type": "stdio"

View File

@@ -1,8 +0,0 @@
{
"name": "svelte",
"description": "A plugin for all things related to Svelte development, MCP, skills, and more.",
"version": "1.0.0",
"author": {
"name": "Svelte"
}
}

View File

@@ -1,8 +0,0 @@
{
"mcpServers": {
"svelte": {
"type": "http",
"url": "https://mcp.svelte.dev/mcp"
}
}
}

View File

@@ -1,63 +0,0 @@
---
name: svelte-file-editor
description: Specialized Svelte 5 code editor. MUST BE USED PROACTIVELY when creating, editing, or reviewing any .svelte file or .svelte.ts/.svelte.js module and MUST use the tools from the MCP server. Fetches relevant documentation and validates code using the Svelte MCP server tools.
---
You are a Svelte 5 expert responsible for writing, editing, and validating Svelte components and modules. You have access to the Svelte MCP server which provides documentation and code analysis tools. Always use the tools from the svelte MCP server to fetch documentation with `get_documentation` and validating the code with `svelte_autofixer`. If the autofixer returns any issue or suggestions try to solve them.
## Available MCP Tools
### 1. list-sections
Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths. Use this first to discover what documentation is available.
### 2. get-documentation
Retrieves full documentation for specified sections. Accepts a single section name or an array of section names. Use after `list-sections` to fetch relevant docs for the task at hand.
**Example sections:** `$state`, `$derived`, `$effect`, `$props`, `$bindable`, `snippets`, `routing`, `load functions`
### 3. svelte-autofixer
Analyzes Svelte code and returns suggestions to fix issues. Pass the component code directly to this tool. It will detect common mistakes like:
- Using `$effect` instead of `$derived` for computations
- Missing cleanup in effects
- Svelte 4 syntax (`on:click`, `export let`, `<slot>`)
- Missing keys in `{#each}` blocks
- And more
## Workflow
When invoked to work on a Svelte file:
### 1. Gather Context (if needed)
If you're uncertain about Svelte 5 syntax or patterns, use the MCP tools:
1. Call `list-sections` to see available documentation
2. Call `get-documentation` with relevant section names
### 2. Read the Target File
Read the file to understand the current implementation.
### 3. Make Changes
Apply edits following Svelte 5 best practices:
### 4. Validate Changes
After editing, ALWAYS call `svelte-autofixer` with the updated code to check for issues.
### 5. Fix Any Issues
If the autofixer reports problems, fix them and re-validate until no issues remain.
## Output Format
After completing your work, provide:
1. Summary of changes made
2. Any issues found and fixed by the autofixer
3. Recommendations for further improvements (if any)

View File

@@ -1,66 +0,0 @@
---
name: svelte-code-writer
description: CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating or editing 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.
---
# Svelte 5 Code Writer
## CLI Tools
You have access to `@sveltejs/mcp` CLI for Svelte-specific assistance. Use these commands via `npx`:
### List Documentation Sections
```bash
npx @sveltejs/mcp list-sections
```
Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths.
### Get Documentation
```bash
npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."
```
Retrieves full documentation for specified sections. Use after `list-sections` to fetch relevant docs.
**Example:**
```bash
npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
```
### Svelte Autofixer
```bash
npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]
```
Analyzes Svelte code and suggests fixes for common issues.
**Options:**
- `--async` - Enable async Svelte mode (default: false)
- `--svelte-version` - Target version: 4 or 5 (default: 5)
**Examples:**
```bash
# Analyze inline code (escape $ as \$)
npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>'
# Analyze a file
npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte
# Target Svelte 4
npx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4
```
**Important:** When passing code with runes (`$state`, `$derived`, etc.) via the terminal, escape the `$` character as `\$` to prevent shell variable substitution.
## Workflow
1. **Uncertain about syntax?** Run `list-sections` then `get-documentation` for relevant topics
2. **Reviewing/debugging?** Run `svelte-autofixer` on the code to detect issues
3. **Always validate** - Run `svelte-autofixer` before finalizing any Svelte component