Svelte MCPをClaude Codeに入れる手順とautofixerの使い方

Svelte公式のMCPサーバーを入れると、Claude Codeは最新のSvelte・SvelteKitドキュメントを自分で引き、書いたコードを静的解析にかけ直せるようになります。入れ方は3通りです。ローカル(stdio)、リモート(HTTP)、Claude Codeプラグイン。どれもコマンド1つから始められます。

この記事では、導入方法の選び分け、docs検索とautofixerの使いどころ、権限とCLAUDE.mdの書き方を順に扱います。

Svelte MCPで追加される4つのツール

Svelteチームが保守するAIツールは、指示文(AGENTS.md向けの小さなプロンプト)、MCPサーバー、skills、サブエージェントの4種類です。互いに連携しますが、単独でも使えます。このうちMCPサーバーが、公式ドキュメントの取得と静的解析を担当します。

サーバーが提供するツールは、公式のツール一覧で次のように説明されています。

ツールのほかに、ユーザーが選んで使うプロンプト(svelte-task)と、ドキュメント節をそのまま会話に足すリソース(svelte:// で始まるURI)もあります。リソースは、LLMの判断を挟まずに特定の節を渡したいときに向きます。たとえばトランジションを使うと分かっているなら、その節を最初から添えられます。

ローカルとリモートのどちらで入れるか

サーバーは2種類あります。ローカル版は @sveltejs/mcp というnpmパッケージで、npx -y @sveltejs/mcp で起動します。リモート版は https://mcp.svelte.dev/mcp に置かれています。

リモート版について、Svelteチームは送られたコードをログにも保存にも残さず、中身も検査しないと説明しています。それでも、社外にコードを出せない案件ではローカル版のほうが説明がつきやすい構成です。

claude mcp addで追加する

どちらも claude mcp add で入れます。-s(--scope)に入るのは user、project、local のいずれかです。

ローカル版は次のとおりです。-- より後ろが、そのままサーバー起動コマンドになります。

claude mcp add -t stdio -s project svelte -- npx -y @sveltejs/mcp

リモート版は、トランスポートをhttpにしてURLを渡します。

claude mcp add -t http -s project svelte https://mcp.svelte.dev/mcp

-s project にすると、設定はリポジトリ直下の .mcp.json に入り、コミットすればチームで共有できます。ただし、初めて開いた人には承認が求められます。承認前のサーバーは claude mcp list に Pending approval と出るので、claude を対話モードで起動して承認します。自分だけで使うなら local、全プロジェクトで使うなら user を選びます。

追加後は、次の2点を確かめます。

同じ名前を別のスコープにも登録すると、エンドポイントが食い違ったときに claude mcp list と /mcp が警告を出します。ローカル版とリモート版を両方試すなら、名前を svelte-local と svelte-remote のように分けるか、片方を claude mcp remove svelte --scope <scope> で消してから切り替えます。JSONで一括登録したい場合はclaude mcp add-jsonの使い方が参考になります。

プラグインで入れる場合の違い

Svelteのリポジトリ(sveltejs/ai-tools)は、Claude Codeのプラグインマーケットプレイスにもなっています。svelte プラグインを入れると、ローカルのstdioサーバーに加えて、Svelte 5を正しく書かせるskillsと、Svelteファイル専用のサブエージェントが一緒に入ります。

/plugin marketplace add sveltejs/ai-tools
/plugin install svelte

プラグイン経由のMCPサーバーは、claude mcp add で入れたものと名前の形が変わります。権限ルールを書くときは、プラグイン提供のサーバー名が plugin_<プラグイン名>_<サーバー名> の形になる点に注意してください(詳しくは次の権限の節を参照)。

プラグイン版の案内には、.svelte ファイルや .svelte.ts / .svelte.js モジュールを作るときは、MCPの呼び出しをサブエージェントに任せるよう指示する運用が勧められています。サブエージェントは別のコンテキストウィンドウで動くため、ドキュメントの全文取得がメインの会話を圧迫しません。メッセージの中でエージェントを名指しすれば、委任もできます。

MCPサーバーだけが欲しいときは claude mcp add を、skillsとサブエージェントまで揃えたいときはプラグインを選びます。両方入れて同じサーバーを二重に動かす必要はありません。

ドキュメント検索の使い方

ドキュメントを引く流れは2段階です。まず list-sections で節の一覧を得ます。各節にはタイトル、use_cases、パスが付いており、モデルはこの use_cases を読んで必要な節を選びます。次に get-documentation へ節名かパスを渡し、全文を取得します。

節の指定はタイトルでもパスでも通ります。複数の節はカンマで区切ります。この動きはCLIでも再現できるので、MCPを入れる前に、どんな本文が返るかを手元で見ておけます。

npx -y @sveltejs/mcp list-sections
npx -y @sveltejs/mcp get-documentation 'svelte/$state'
npx -y @sveltejs/mcp get-documentation \
  'svelte/$state,svelte/await-expressions'

節の本文は長くなりがちです。公式の svelte-task プロンプトにも「取得する節の数には気をつける。トークンを大量に使う」という趣旨の注意があり、まず自分の知識と svelte-autofixer で答えを出し、足りない分だけ get-documentation を呼ぶ順序が示されています。MCPツールの定義や出力がコンテキストを占める度合いは、MCPのトークン消費を減らす方法で扱っています。

svelte-autofixerを回す

autofixerは、コードを渡すと issues と suggestions を返します。出力にはもう1つ require_another_tool_call_after_fixing という項目があり、直したあとにもう一度呼ぶ必要があるかを示します。つまり、直す、再実行する、指摘が空になるまで続ける、という往復を前提にした作りです。

CLIで試すなら、ファイルパスを渡すのが簡単です。引数が既存のパスならファイルを読み、そうでなければ生のコードとして扱われます。

npx -y @sveltejs/mcp svelte-autofixer src/routes/+page.svelte \
  --svelte-version 5.16.0

オプションは2つあります。

• --svelte-version <version>: 検証対象のバージョン。package.json の完全なバージョン(例: 5.16.0)を渡すと、バージョン固有の提案も有効になります。メジャーは 4 か 5 で、省略時は 5
• --async: Svelte 5プロジェクト向けの非同期解析を有効にする

インラインでコードを渡すと、$state のような $ がシェルに展開されて壊れます。クォートするか、ファイルで渡すほうが安全です。

Claude Codeに「指摘が空になるまで」を守らせる

MCPを入れただけでは、Claudeがautofixerを呼ぶかどうかはモデル任せです。呼ばせたいなら、指示として書きます。公式の案内では、AGENTS.md(Claude CodeならCLAUDE.md)に貼るプロンプトが用意されており、npx sv add ai-tools を使うと設定済みになります。要点は次の3つです。

• Svelteの話題では最初に list-sections を使う
• 関連する節を get-documentation で全部取得する
• Svelteのコードを書いたら必ず svelte-autofixer を通し、指摘と提案が空になるまで繰り返す

自分の言葉で短く書くなら、たとえば次のような形になります(例示です)。

## Svelte MCP
- .svelte / .svelte.ts を書いたら、返す前に svelte-autofixer を通す
- issues と suggestions が空になるまで、直して再実行する
- ドキュメントは list-sections で探してから get-documentation で取る
- ファイルに書かないコードの確認だけ playground-link を使う

最後の行は公式の指示にも沿っています。playground-link は、プロジェクト内のファイルに書いたコードには使いません。コードはURIの中にだけ入り、どこにも保存されないため、URLはかなり長くなります。

Runesの規約をCLAUDE.mdに書く方法や、sv check を作業ループに入れる方法、既存プロジェクトの移行はSvelteKit開発の規約化の記事にあります。ここまでの設定はその上に重ねる層として使えます。

権限ルールとMCPツール名

MCPツールを呼ぶたびに許可を聞かれると、autofixerの往復が止まります。許可ルールは mcp__<サーバー名>__<ツール名> の形で書き、mcp__<サーバー名>__* で1サーバーの全ツールを指せます。サーバー名を svelte にした場合の例です。

{
  "permissions": {
    "allow": [
      "mcp__svelte__list-sections",
      "mcp__svelte__get-documentation",
      "mcp__svelte__svelte-autofixer"
    ]
  }
}

playground-link を含めずに、読み取りと解析だけを自動許可にする書き方です。全ツールを許可するなら mcp__svelte__* の1行で足ります。ワイルドカードを使えるのは、mcp__<サーバー名>__ という固定の前置きに続く位置だけです。mcp__* のような前置きのないルールは、許可としては無効になります。ルールの詳細な書式はMCPの権限構文の記事にまとめています。

プラグイン経由で入れた場合は、サーバー名が plugin_<プラグイン名>_<サーバー名> の形になります。実際の名前は /mcp の表示で確かめてから、ルールに写してください。

よくあるつまずき

ツールの存在はMCPが保証しますが、呼ぶ順序や回数までは保証しません。「書いたら必ずautofixerを通す」ことを確実にしたいなら、CLAUDE.mdの指示に加え、sv check のようなコマンドを決まった地点で走らせる仕組みを併用します。

まとめ

導入は claude mcp add の1行で済みます。手元で完結させるならローカル版、すぐ試すならリモート版を選び、skillsとサブエージェントまで欲しければプラグインにします。docs取得は節数を絞り、コードを書いたらautofixerを指摘が空になるまで回す。この2点をCLAUDE.mdに書き、mcp__svelte__* 系の許可ルールを置いておくと、往復が途切れず進みます。