mcp-svelte-ドキュメント
Svelte 5の包括的なリファレンスガイドを提供するModel Context Protocol（MCP）サーバー。LLMがSvelteを使用する際に正確なガイダンスを提供するのに役立ちます。Svelte 4からSvelte 5への移行パターンが掲載されているだけでなく、Svelte 5の機能、よくある間違い、ベストプラクティスに関する詳細なリファレンスとしても役立ちます。
特徴
📊 コンテンツカテゴリー
- 移行パターン: Svelte 4 と Svelte 5 のコードの並列比較
- Svelte 5 の機能: ルーン、スニペット、小道具、イベントに関する詳細なドキュメント
- よくある間違い: 間違ったコードと修正方法を説明付きで示すパターン
- グローバル状態パターン: Svelte 5 におけるグローバル状態管理のさまざまなアプローチ
🔄 主要な移行パターン
- 状態宣言:
let count = 0 → let count = $state(0) - 派生値:
$: doubled = count * 2 → const doubled = $derived(count * 2) - 副作用:
$: { /* effect */ } → $effect(() => { /* effect */ }) - イベント処理:
on:click={handler} → onclick={handler} - プロパティ:
export let prop → let { prop } = $props() - コンポーネントイベント:
createEventDispatcher() → コールバックプロパティ - スロット:
<slot> → {@render children()}
🧩 Svelte 5 の機能
- ルーン: $state、$derived、$effect、$props など
- スニペット: パラメータ付きの再利用可能なマークアップのチャンク
- Props : 構造化分解によるコンポーネントのプロパティへの新しいアプローチ
- イベント: 標準 HTML イベント属性とコールバックプロパティ
⚠️よくある間違い
- 反応性: 状態を直接エクスポートし、$state を忘れるなど。
- イベント: onclick の代わりに on:click を使用する、イベント修飾子など。
- Props : $props の代わりに export let を使用する、TypeScript の問題など。
🌐 グローバル状態パターン
- 関数ベース: モジュールレベルの状態のゲッター/セッター関数
- オブジェクトベース: より人間工学的な API のためのゲッター/セッターを備えたオブジェクト
- クラスベース:構造化された状態のためのステートフルプロパティを持つクラス
- コンテキストベース: SSR 安全なグローバル状態のための Svelte コンテキスト
💡 包括的な例
すべてのコンテンツには以下が含まれます:
- JavaScriptとTypeScriptの両方の例
- 概念と使用法の明確な説明
- ベストプラクティスと考慮事項
- 避けるべきよくある落とし穴
使用法
インストール
# Install dependencies
npm install
# Build the project
npm run build
# Start the server
npm start
構成
環境変数を設定することでサーバーを構成できます。
DEBUG : デバッグログを有効にするには「true」に設定します
傾斜構成
Cline MCP 設定に以下を追加します:
{
"mcpServers": {
"mcp-svelte-docs": {
"command": "node",
"args": ["/path/to/mcp-svelte-docs/dist/index.js"],
"env": {
"DEBUG": "false"
},
"disabled": false,
"autoApprove": [
"svelte_pattern",
"svelte5_feature",
"svelte5_common_mistakes"
]
}
}
}
LLMと併用する
LLM が Svelte に関するガイダンスを提供する必要がある場合、利用可能なツールとリソースを使用できます。
移住パターン
<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte_pattern</tool_name>
<arguments>
{
"pattern": "event"
}
</arguments>
</use_mcp_tool>
これにより、イベント処理に関連する移行パターンが返され、Svelte 4 と Svelte 5 の両方の実装が表示されます。
Svelte 5の特徴
<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte5_feature</tool_name>
<arguments>
{
"feature": "state",
"includeExamples": true
}
</arguments>
</use_mcp_tool>
これにより、例やベスト プラクティスなど、$state ルーンに関する詳細な情報が返されます。
よくある間違い
<use_mcp_tool>
<server_name>mcp-svelte-docs</server_name>
<tool_name>svelte5_common_mistakes</tool_name>
<arguments>
{
"feature": "props"
}
</arguments>
</use_mcp_tool>
これにより、Svelte 5 のプロップに関連する一般的な間違いが、修正内容と説明とともに返されます。
リソースアクセス
<access_mcp_resource>
<server_name>mcp-svelte-docs</server_name>
<uri>svelte5://runes/state</uri>
</access_mcp_resource>
これにより、$state ルーンの詳細な参照がマークダウン形式で返されます。
API
サーバーは次の MCP ツールを実装します。
スヴェルトパターン
Svelte 4 から Svelte 5 への移行パターンを取得します。
パラメータ:
pattern （文字列、必須）: 検索するパターン名またはカテゴリ
応答例:
{
"patterns": [
{
"name": "Basic state",
"description": "Declaring and using component state",
"svelte4": "<script>\n let count = 0;\n \n function increment() {\n count++;\n }\n</script>\n\n<button on:click={increment}>\n Clicked {count} times\n</button>",
"svelte5": "<script>\n let count = $state(0);\n \n function increment() {\n count++;\n }\n</script>\n\n<button onclick={increment}>\n Clicked {count} times\n</button>",
"notes": "In Svelte 5, state is explicitly declared using the $state rune, and event handlers use standard HTML attributes (onclick) instead of the directive syntax (on:click)."
}
]
}
svelte5_feature
Svelte 5 の機能に関する詳細情報を入手します。
パラメータ:
feature (文字列、必須): 機能名 (例: "runes"、"snippets"、"props")includeExamples (boolean, オプション): コード例を含めるかどうか
応答例:
{
"features": [
{
"name": "$state",
"description": "The $state rune is used to declare reactive state in Svelte 5.",
"examples": [
{
"code": "<script>\n let count = $state(0);\n \n function increment() {\n count++;\n }\n</script>\n\n<button onclick={increment}>\n Clicked {count} times\n</button>",
"explanation": "Basic usage of $state to create a reactive counter. When the button is clicked, the count is incremented and the UI updates automatically."
}
],
"bestPractices": [
"Use $state for any value that needs to trigger UI updates when changed",
"For large arrays or objects that don't need deep reactivity, consider using $state.raw",
"Don't export $state variables directly from modules, use getter/setter functions instead"
]
}
]
}
svelte5のよくある間違い
Svelte 5 の機能に関するよくある間違いと修正方法を紹介します。
パラメータ:
feature (文字列、必須): 機能名 (例: "runes"、"snippets"、"events")
応答例:
{
"mistakes": [
{
"name": "Exporting state directly",
"description": "Directly exporting a stateful variable from a module",
"mistake": "// counter.svelte.js\nlet count = $state(0);\n\nexport { count };",
"correction": "// counter.svelte.js\nlet count = $state(0);\n\nexport function getCount() {\n return count;\n}\n\nexport function setCount(value) {\n count = value;\n}",
"explanation": "When you export a stateful variable directly, the reactivity is lost when it's imported elsewhere. This is because the importing module only gets the current value, not the reactive binding. Instead, export functions that access and modify the state."
}
]
}
リソース
サーバーは次の MCP リソースも提供します。
直接リソース
svelte5://overview : Svelte 5 の機能と変更点の概要svelte5://runes/overview : Svelte 5 のすべてのルーンの概要svelte5://snippets/overview : Svelte 5 のスニペットの概要svelte5://global-state/overview : Svelte 5 におけるグローバル状態アプローチの概要
リソーステンプレート
svelte5://runes/{rune_name} : 特定のルーンの詳細な参照svelte5://patterns/{category}/{pattern_name} : 特定のSvelteパターンの参照svelte5://mistakes/{category} : 特定のカテゴリにおけるよくある間違い
発達
プロジェクト構造
src/
├── index.ts # MCP server entry point
├── config.ts # Basic configuration
├── tools/ # Tool implementations
│ └── handler.ts # Tool registration
├── resources/ # Resource implementations
│ └── index.ts # Resource registration
└── patterns/ # Pattern database
├── index.ts # Exports all patterns
├── state.ts # State management patterns
├── events.ts # Event handling patterns
├── props.ts # Props and component patterns
├── templating.ts # Templating patterns
├── lifecycle.ts # Lifecycle patterns
├── svelte5_features.ts # Svelte 5 specific features
├── common_mistakes.ts # Common mistakes and corrections
└── global_state.ts # Global state patterns
新しいコンテンツの追加
移住パターン
新しい移行パターンを追加するには、 src/patternsディレクトリ内の適切なパターン ファイルに追加します。
{
name: 'Pattern Name',
description: 'Description of the pattern',
svelte4: `Svelte 4 code example`,
svelte5: `Svelte 5 code example`,
notes: 'Additional notes about migration considerations'
}
Svelte 5の特徴
新しい Svelte 5 機能を追加するには、 src/patterns/svelte5_features.tsファイルに追加します。
{
name: 'Feature Name',
description: 'Description of the feature',
examples: [
{
code: `Code example`,
explanation: 'Explanation of the example'
}
],
bestPractices: [
'Best practice 1',
'Best practice 2'
]
}
よくある間違い
新しいよくある間違いを追加するには、 src/patterns/common_mistakes.tsファイルに追加します。
{
name: 'Mistake Name',
description: 'Description of the common mistake',
mistake: `Incorrect code example`,
correction: `Corrected code example`,
explanation: 'Detailed explanation of why the mistake is problematic and how the correction addresses it'
}
グローバル状態パターン
新しいグローバル状態パターンを追加するには、それらをsrc/patterns/global_state.tsファイルに追加します。
{
name: 'Global State Pattern Name',
description: 'Description of the global state pattern',
code: `Implementation example`,
usage: `Usage example`,
notes: 'Additional notes about the pattern, including considerations for server vs. client usage'
}
設定
- リポジトリをクローンする
- 依存関係をインストールします:
- プロジェクトをビルドします。
- 開発モードで実行:
トラブルシューティング
よくある問題
- パターンが見つかりません：データベースに存在するパターンを検索していることを確認してください。具体的なパターン名ではなく、「状態」や「イベント」などのより一般的な用語を使用してください。
- サーバーが起動しません: サーバーを実行するための適切な権限があり、ポートがまだ使用されていないことを確認してください。
- TypeScript エラー: 正しいバージョンの TypeScript がインストールされていること、およびコードがプロジェクトの TypeScript 構成に従っていることを確認してください。
貢献
貢献を歓迎します！お気軽にプルリクエストを送信してください。
ライセンス
MIT ライセンス - 詳細についてはLICENSEファイルを参照してください。
謝辞
構築されたもの: