Svelte MCPとは
Svelte MCP（Model Context Protocol）は、Svelte チームが提供する公式の MCP サーバーです。Claude Desktop や Claude Code、GitHub Copilot などのAI ツールが常に最新の Svelte ドキュメントを参照し、正確なコードを生成できるようにします。
Svelte MCP の公式ドキュメントは svelte.dev/docs/mcp で公開されています。 このセクションでは、日本語での解説とユースケースを中心に紹介します。
このセクションで学ぶこと
セットアップ →
各 MCP クライアントでの設定方法を解説します。
- Local 版 / Remote 版の違い
- Claude Code、Cursor、VS Code
- Codex CLI、Gemini CLI
- SvelteKit プロジェクトへの追加
ツール詳解 →
MCP が提供する 4 つのツールを詳しく解説します。
- list-sections - セクション一覧取得
- get-documentation - ドキュメント取得
- svelte-autofixer - コード静的解析
- playground-link - Playground リンク生成
ユースケース →
実践的な活用シナリオを紹介します。
- Svelte 5 の学習支援
- コンポーネント生成
- Svelte 4 → 5 移行
- チーム開発での品質保証
アーキテクチャ →
内部アーキテクチャを詳しく解説します。
- Local版 vs Remote版
- autofixer の仕組み
- ドキュメント同期フロー
- 技術スタック
開発環境との統合 →
プロジェクトへの統合方法を解説します。
- プロジェクト初期化
- ESLint との連携
- CLAUDE.md / AGENTS.md 設定
- CI/CD 統合
エコシステム →
関連するツールとリソースを紹介します。
- 公式 MCP パッケージ
- ESLint 関連パッケージ
- UI ライブラリとの統合
- MCP 開発リソース
なぜ MCP が必要か
LLM（大規模言語モデル）を Svelte 開発に使う際、以下のような問題が頻繁に発生します。
- 学習データの古さ - LLM の学習データには Svelte 5 の情報が不足している
- バージョンの混同 - Svelte 4 の古いリアクティビティ構文と Svelte 5 の Runes を混同する
- 存在しない構文の生成 - ハルシネーションにより、存在しない構文や API を生成する
MCP による解決
Svelte MCP は以下の方法でこれらの問題を解決します。
| 問題 | MCP の解決策 |
|---|---|
| 学習データが古い | リアルタイムで最新ドキュメントを取得 |
| バージョン混同 | 静的解析でコードを検証し、問題を検出 |
| 存在しない構文 | 自動修正提案（autofixer）で正しい構文を提示 |
アーキテクチャ概要
Svelte MCP は3 つの主要機能を提供します。
1. ツール（Tools）
LLM が呼び出せる 4 つのツール
| ツール | 機能 |
|---|---|
list-sections | 利用可能なドキュメントセクション一覧を取得 |
get-documentation | 指定セクションの完全なドキュメントを取得 |
svelte-autofixer | コードを静的解析し、問題と修正提案を返す |
playground-link | Svelte Playground へのリンクを生成 |
2. リソース（Resources）
ユーザーが明示的に含めることができるドキュメントリソース。特定の機能（例：トランジション）のドキュメントを事前にセッションに含めておくことで、LLM の応答精度を向上させます。
3. プロンプト（Prompts）
LLM への定型的な指示を提供。svelte-taskプロンプトを使うことで、MCP サーバーの効果的な使い方を LLM に指示できます。
2 つのバージョン
| バージョン | 特徴 | 推奨用途 |
|---|---|---|
Local 版 (@sveltejs/mcp) | ローカルで実行、オフライン対応 | 日常的な開発 |
Remote 版 (mcp.svelte.dev) | サーバーレス、設定簡単 | 試用、CI/CD |
対応クライアント
Svelte MCP は以下の MCP クライアントに対応しています。
- Claude Code - Anthropic 公式 CLI
- Claude Desktop - Anthropic 公式デスクトップアプリ
- Cursor - AI 搭載エディタ
- VS Code - MCP サポート
- Zed - Svelte MCP Server 拡張機能
- Codex CLI - OpenAI
- Gemini CLI - Google
- GitHub Coding Agent - GitHub
- OpenCode - オープンソースクライアント
推奨設定
MCP サーバーを最大限に活用するには、プロジェクトの AGENTS.md（または CLAUDE.md、GEMINI.md）に推奨プロンプトを追加することを推奨します。
npx sv add mcp コマンドを使用すると、この設定が自動的に追加されます。
推奨プロンプトには以下の内容が含まれます。
- 利用可能なツールの説明
- 各ツールの適切な使用タイミング
svelte-autofixerの繰り返し呼び出しの指示
また、MCP クライアントが対応している場合は、svelte-task プロンプトを使用することで、LLM に MCP サーバーの効果的な使い方を指示できます。
次のステップ
準備ができたら、 セットアップ から始めましょう。使用している MCP クライアントに合わせた設定方法を詳しく解説しています。