Svelte MCP

The official Svelte MCP server providing docs and autofixing tools for Svelte development

사용해야 할까요

품질 및 안전성

B
설명 품질
100%
스키마 완전성
75%
이름 품질
65%
오염 위험
100%
권한 일치
100%
프로토콜 준수
100%

발견 사항 (4)

  • LOWTool 'get-documentation' doesn't follow camelCase/snake_caseget-documentation에서
  • LOWTool 'list-sections' doesn't follow camelCase/snake_caselist-sections에서
  • LOWTool 'playground-link' doesn't follow camelCase/snake_caseplayground-link에서
  • LOWTool 'svelte-autofixer' doesn't follow camelCase/snake_casesvelte-autofixer에서

도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.

컨텍스트 비용

~1,335토큰 (도구 정의)
~2.0 KB일반적인 응답 크기
중간 정도의 주의 영향 (128k 컨텍스트의 1.04%)

이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.

설치

원클릭 설치

`claude_desktop_config.json` 파일에 다음을 추가하세요:

{
  "mcpServers": {
    "mcp": {
      "command": "npx",
      "args": [
        "@sveltejs/mcp"
      ]
    }
  }
}

실행 가능한 패키지

npm@sveltejs/mcp0.1.26stdio

원격 엔드포인트

https://mcp.svelte.dev/mcpstreamable-http

할 수 있는 일

도구 목록

도구 (4)

🟢 읽기 전용🟡 쓰기🔴 삭제⚪ 알 수 없음
🟢get-documentation(section)

Retrieves full documentation content for Svelte 5 or SvelteKit sections. Supports flexible search by title (e.g., "$state", "routing") or file path (e.g., "cli/overview"). Can accept a single section name or an array of sections. Before running this, make sure to analyze the users query, as well as the output from list-sections (which should be called first). Then ask for ALL relevant sections the user might require. For example, if the user asks to build anything interactive, you will need to fetch all relevant runes, and so on. Before calling this tool, try to implement Svelte components using your own knowledge and the `svelte-autofixer` tool, since calling this tool is token intensive.

입력 스키마

{
  "type": "object",
  "properties": {
    "section": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "array",
          "items": {
            "type": "string"
          }
        }
      ],
      "description": "The section name(s) to retrieve. Can search by title (e.g., \"$state\", \"load functions\") or file path (e.g., \"cli/overview\"). Supports single string and array of strings"
    }
  },
  "required": [
    "section"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}
🟢list-sections

Lists all available Svelte 5 and SvelteKit documentation sections in a structured format. Each section includes a "use_cases" field that describes WHEN this documentation would be useful. You should carefully analyze the use_cases field to determine which sections are relevant for the user's query. The use_cases contain comma-separated keywords describing project types (e.g., "e-commerce", "blog"), features (e.g., "authentication", "forms"), components (e.g., "slider", "modal"), development stages (e.g., "deployment", "testing"), or "always" for fundamental concepts. Match these use_cases against the user's intent - for example, if building an e-commerce site, fetch sections with use_cases containing "e-commerce", "product listings", "shopping cart", etc. If building a slider, look for "slider", "carousel", "animation", etc. Returns sections as "* title: [section_title], use_cases: [use_cases], path: [file_path]". Always run list-sections FIRST for any Svelte query, then analyze ALL use_cases to identify relevant sections, and finally use get_documentation to fetch ALL relevant sections at once.

입력 스키마

{
  "type": "object",
  "properties": {}
}
🟢playground-link(name, tailwind, files)

Generates a Playground link given a Svelte code snippet. Once you have the final version of the code you want to send to the user, ALWAYS ask the user if it wants a playground link to allow it to quickly check the code in the playground before calling this tool. NEVER use this tool if you have written the component to a file in the user project. The playground accept multiple files so if are importing from other files just include them all at the root level.

입력 스키마

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name of the Playground, it should reflect the user task"
    },
    "tailwind": {
      "type": "boolean",
      "description": "If the code requires Tailwind CSS to work...only send true if it it's using tailwind classes in the code"
    },
    "files": {
      "type": "object",
      "propertyNames": {
        "type": "string"
      },
      "additionalProperties": {
        "type": "string"
      },
      "description": "An object where all the keys are the filenames (with extensions) and the values are the file content. For example: { 'Component.svelte': '<script>...</script>', 'utils.js': 'export function ...' }. The playground accept multiple files so if are importing from other files just include them all at the root level."
    }
  },
  "required": [
    "name",
    "tailwind",
    "files"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

출력 스키마

{
  "type": "object",
  "properties": {
    "url": {
      "type": "string"
    }
  },
  "required": [
    "url"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}
🟢svelte-autofixer(code, desired_svelte_version, async, filename)

Given a svelte component or module returns a list of suggestions to fix any issues it has. This tool MUST be used whenever the user is asking to write svelte code before sending the code back to the user

입력 스키마

{
  "type": "object",
  "properties": {
    "code": {
      "type": "string"
    },
    "desired_svelte_version": {
      "anyOf": [
        {
          "type": "string"
        },
        {
          "type": "number"
        }
      ],
      "description": "The desired major svelte version as an integer (must be 4 or 5)...if possible read this from the package.json of the user project, otherwise use some hint from the wording (if the user asks for runes it wants version 5). Default to 5 in case of doubt."
    },
    "async": {
      "type": "boolean",
      "description": "If true the code is an async component/module and might use await in the markup or top-level awaits in the script tag. If possible check the svelte.config.js/svelte.config.ts to check if the option is enabled otherwise asks the user if they prefer using it or not. You can only use this option if the version is 5."
    },
    "filename": {
      "type": "string",
      "description": "The filename of the component if available, it MUST be only the Component name with .svelte or .svelte.ts extension and not the entire path."
    }
  },
  "required": [
    "code",
    "desired_svelte_version"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

출력 스키마

{
  "type": "object",
  "properties": {
    "issues": {
      "type": "array",
      "items": {
        "type": "string"
      }
    },
    "suggestions": {
      "type": "array",
      "items": {
        "type": "string"
      }
    },
    "require_another_tool_call_after_fixing": {
      "type": "boolean"
    }
  },
  "required": [
    "issues",
    "suggestions",
    "require_another_tool_call_after_fixing"
  ],
  "$schema": "http://json-schema.org/draft-07/schema#"
}

커뮤니티

이 서버 평가하기

증거

최근 관측

검증됨버전이 기록되지 않음도구 4개
검증됨버전이 기록되지 않음도구 4개