关键词

Svelte开发辅助代码智能修复文档问答Playground链接LLM工具

项目简介

Svelte MCP 服务器是 Svelte 官方推出的 Model Context Protocol (MCP) 实现。它旨在通过标准化的方式，为大型语言模型（LLM）客户端提供与 Svelte 和 SvelteKit 开发相关的上下文信息和工具。服务器能够托管文档资源、提供代码辅助工具（如 Svelte 代码自动修复和 Playground 链接生成），并支持自定义 Prompt 模板，从而使 LLM 能够更智能、更高效地协助开发者完成 Svelte 相关任务。

主要功能点

  • Svelte 文档资源管理：提供 Svelte 5 和 SvelteKit 的官方文档，允许 LLM 客户端查询、获取最新的技术资料。文档内容包括了详细的用途描述，帮助 LLM 理解何时引用特定文档。
  • Svelte 代码分析与修复：集成了一套强大的 Svelte 代码自动修复工具，能够检测并提供 Svelte 组件或模块中的语法错误、编译警告、ESLint 规范问题以及 Svelte 5 Rune 最佳实践建议。LLM 可反复调用此工具，确保代码质量。
  • Svelte Playground 链接生成：允许 LLM 将最终代码片段打包，生成可直接在 Svelte Playground 中运行的链接，方便用户快速验证和体验代码。
  • 自定义 Prompt 模板：提供预定义的 Prompt 模板，例如 "Svelte Task Prompt"，指导 LLM 如何有效地使用服务器提供的工具和文档来完成 Svelte 相关任务。
  • 多传输协议支持：支持 HTTP (Streamable HTTP) 和 Stdio 两种传输协议，为 MCP 客户端提供灵活的连接方式。

安装步骤

该项目基于 Node.js 环境，使用 'pnpm' 作为包管理器。

  1. 克隆仓库： 
    git clone https://github.com/sveltejs/mcp.git
cd mcp
  2. 安装依赖： 
    pnpm i
  3. 配置环境变量：
    • 复制 '.env.example' 文件到 'apps/mcp-remote/.env'。
    • 在 'apps/mcp-remote/.env' 中设置 'VOYAGE_API_KEY' 以支持嵌入功能（如果需要）。
    • 同样，为 'drizzle.config.ts' 和 'db/index.ts' 配置 'DATABASE_URL' 和 'DATABASE_TOKEN' (例如 'TURSO_DB_URL' 和 'TURSO_DB_AUTH_TOKEN')，用于数据库连接。
    • 如果需要 Anthropic API 功能（例如文档摘要生成），请在 'packages/mcp-server/.env' 或通过环境变量设置 'ANTHROPIC_API_KEY'。
    cp apps/mcp-remote/.env.example apps/mcp-remote/.env
# 编辑 apps/mcp-remote/.env 文件，填写实际的 API 密钥和数据库信息
  4. 启动开发服务器： 
    pnpm dev
    服务器将在 'http://localhost:5173/mcp' 上运行 HTTP 传输，并通过 Stdio 提供另一个传输。

服务器配置

MCP 客户端需要以下配置信息来连接 Svelte MCP 服务器。请根据您启动服务器的方式选择合适的配置。

1. HTTP/SSE 传输 (推荐用于浏览器或需要持久连接的客户端)

MCP 客户端应配置服务器名称、命令和参数，通常无需用户直接修改代码。以下是配置示例中可能包含的信息，用户无需理解或输入代码，仅作参考：

{
  "server name": "Svelte MCP",
  "command": "pnpm",
  "args": ["run", "dev"], // 这会启动 SvelteKit 应用，其中包含 MCP HTTP 传输
  "url": "http://localhost:5173/mcp" // MCP 服务器的 HTTP 端点
}
  • Server Name (服务器名称): 'Svelte MCP' - 服务器的标识名称。
  • Command (启动命令): 'pnpm' - 用于启动服务器进程的命令。
  • Args (命令参数): '["run", "dev"]' - 传递给启动命令的参数。这将启动一个 SvelteKit 开发服务器，其中集成了 MCP HTTP 传输。
  • URL (HTTP 端点): 'http://localhost:5173/mcp' - MCP 客户端通过此 URL 与服务器进行 HTTP 通信。

2. Stdio 传输 (推荐用于命令行或基于进程的客户端)

{
  "server name": "Svelte MCP",
  "command": "pnpm",
  "args": ["--filter", "@sveltejs/mcp-stdio", "run", "start"], // 启动 stdio 传输
}
  • Server Name (服务器名称): 'Svelte MCP' - 服务器的标识名称。
  • Command (启动命令): 'pnpm' - 用于启动服务器进程的命令。
  • Args (命令参数): '["--filter", "@sveltejs/mcp-stdio", "run", "start"]' - 传递给启动命令的参数。这将直接启动 'packages/mcp-stdio' 中的 Stdio MCP 传输服务器。

基本使用方法

作为 MCP 服务器，Svelte MCP 主要通过其暴露的 工具 (Tools)、资源 (Resources) 和 Prompt 模板 (Prompts) 与 LLM 客户端交互。

  1. LLM 客户端连接：确保您的 MCP 客户端已配置上述的服务器连接信息，并成功连接到 Svelte MCP 服务器。
  2. 发现能力：LLM 客户端可以查询服务器，获取其声明的能力，包括可用的工具、资源和 Prompt 模板。
  3. 调用 Prompt 模板：
    • LLM 客户端可以请求 'svelte-task' Prompt 模板，并传入 'task' 参数（例如，"创建一个计数器组件"）。服务器将返回预格式化的用户消息，指导 LLM 如何完成任务。
  4. 访问文档资源：
    • LLM 客户端可以通过调用 'list-sections' 工具来获取所有可用的 Svelte 文档章节列表及其用途描述。
    • 根据 'list-sections' 的输出，LLM 客户端可以调用 'get-documentation' 工具，传入一个或多个章节的名称或路径，以获取完整的文档内容。
    • LLM 客户端也可以直接通过 URI 访问资源，例如 'svelte://{/slug*}.md'。
  5. 使用代码辅助工具：
    • 当 LLM 生成 Svelte 代码后，应调用 'svelte-autofixer' 工具，传入 'code'、'desired_svelte_version' 和 'filename' 参数。
    • 服务器将返回代码中的问题和建议。LLM 应根据这些信息修正代码，并再次调用 'svelte-autofixer'，直到没有问题和建议为止。
    • 一旦代码经过修复并确认无误，LLM 可以调用 'playground-link' 工具，传入 'name'、'tailwind' 和 'files' 参数，生成一个 Svelte Playground 链接。

示例交互流程 (LLM 视角):

  1. 用户要求："帮我写一个可点击的 Svelte 计数器组件。"
  2. LLM 请求 'svelte-task' Prompt，并传入 'task: "创建一个可点击的计数器组件"'。
  3. 服务器返回 Prompt 文本，指导 LLM 使用 'svelte-autofixer' 和 'get-documentation'。
  4. LLM 可能先调用 'list-sections' 查找相关文档（例如关于 '$state' 和事件处理）。
  5. LLM 调用 'get-documentation' 获取 '$state' 相关文档。
  6. LLM 生成计数器代码。
  7. LLM 调用 'svelte-autofixer' 检查代码。
  8. 如果 'svelte-autofixer' 返回问题，LLM 修正代码并再次调用。
  9. 代码无问题后，LLM 询问用户是否需要 Playground 链接。
  10. 用户同意。
  11. LLM 调用 'playground-link' 生成链接，并返回给用户。

信息

分类

开发者工具

访问项目