エコシステム

Svelte 公式 MCP 以外にも、Svelte 開発を支援するツールやリソースが存在します。

公式 MCP

パッケージ特徴
@sveltejs/mcp Svelte チームが保守、最も信頼性が高い
推奨

基本的には公式の @sveltejs/mcp を使用することを推奨します。 公式 MCP は Svelte チームによって保守され、常に最新の仕様に対応しています。

関連パッケージ

Svelte MCP の内部で使用されている、または関連するパッケージです。

svelte-eslint-parser

Svelte ファイルを解析する ESLint パーサー。svelte-autofixerの内部で使用されています。

npm install -D svelte-eslint-parser
bash

eslint-plugin-svelte

Svelte 向けの ESLint ルール集。MCP と組み合わせることで、より強力な静的解析が可能です。

npm install -D eslint-plugin-svelte
bash

設定例

// eslint.config.js
import svelte from 'eslint-plugin-svelte';
import svelteParser from 'svelte-eslint-parser';

export default [
	...svelte.configs['flat/recommended'],
	{
		files: ['**/*.svelte'],
		languageOptions: {
			parser: svelteParser,
		},
	},
];
javascript

UI ライブラリとの統合

shadcn-svelte

shadcn-svelte は、Radix UI をベースにした高品質なコンポーネントライブラリです。 MCP と組み合わせて使用することで、コンポーネントの使い方を LLM に質問しながら開発できます。

npx shadcn-svelte@latest init
bash

Flowbite-Svelte

Flowbite-Svelte は、Tailwind CSS ベースの UI コンポーネントライブラリです。

npm install flowbite-svelte
bash

MCP 開発に興味がある方へ

独自の MCP サーバーを開発したい場合は、以下のリソースを参照してください。

基本的な MCP サーバーの構造

import { Server } from '@modelcontextprotocol/sdk/server/index.js';

const server = new Server({
	name: 'my-svelte-mcp',
	version: '1.0.0',
});

// ツールの定義
server.setRequestHandler('tools/list', async () => ({
	tools: [
		{
			name: 'my-tool',
			description: 'My custom tool',
			inputSchema: { type: 'object', properties: {} },
		},
	],
}));

// ツールの実装
server.setRequestHandler('tools/call', async (request) => {
	const { name, arguments: args } = request.params;
	// ツールのロジック
});
typescript

まとめ

Svelte MCP エコシステムはまだ発展途上ですが、公式 MCP を中心に以下の方向で進化しています。

  1. 公式 MCP の機能拡充 - より多くのドキュメント、より精度の高い静的解析
  2. UI ライブラリ対応 - shadcn-svelte、Flowbite 等との連携
  3. 開発ツール統合 - ESLint、Prettier 等との連携強化

公式の動向は svelte.dev/docs/mcp で確認してください。

Last update at: 2026/01/09 18:10:16