让 AI 更懂 Svelte 5：Svelte MCP Server 全面指南

在 AI 辅助编程日益普及的今天，我们习惯了让 ChatGPT 或 Claude 帮我们写代码。但如果你最近在使用 Svelte（特别是 Svelte 5），你可能会遇到这样的尴尬：AI 还在写过时的 export let 语法，或者捏造不存在 API，甚至写出的代码在编译器里全是红线。

为了解决这个问题，Svelte 官方推出了 Svelte MCP Server。本文将带你了解它是什么、有什么用，以及如何快速上手。

1. 是什么？(What is it?)

MCP 全称是 Model Context Protocol（模型上下文协议），它是一个开放标准，旨在让 AI 模型（如 Claude、GPT）能够安全地连接到外部数据和工具。

Svelte MCP Server 就是 Svelte 官方为这个协议提供的服务端。简单来说，它就像是给你的 AI 助手装了一个"Svelte 专家外挂"。

通过这个服务，你的 AI 编辑器（如 Cursor, VS Code）或聊天机器人（如 Claude Desktop）可以直接与 Svelte 的官方文档和工具链进行交互，而不是仅凭它们过时的训练数据"瞎猜"。

2. 有什么用？(Why use it?)

Svelte MCP Server 主要解决了以下三个痛点：

🌟 1. 获取最新文档 (不再胡编乱造)

Svelte 5 引入了 Runes ($state, $props) 等重大变革。很多通用大模型的训练数据还停留在 Svelte 4 甚至更早的版本。

Svelte MCP 提供了 list-sections 和 get-documentation 工具，允许 AI 实时查阅 svelte.dev 上的最新官方文档。

场景：当你问"如何在 Svelte 5 中定义 Props"时，AI 会先去查文档，然后告诉你正确的使用 $props() 的方法，而不是给你旧的 export let。

🛠️ 2. 静态代码分析与自动修复 (Code Quality)

这是最强大的功能。Svelte MCP 提供了一个 svelte-autofixer 工具。

流程：当 AI 生成代码后，它会将代码发送给这个工具进行"预编译"和静态分析。
效果：如果代码有语法错误或不符合最佳实践，工具会返回具体的报错信息。AI 收到报错后会自动自我修正，直到代码通过检查。这意味着你拿到的代码是经过"Svelte 编译器"验证过的，而不是这就只能跑通一半的半成品。

🔗 3. 快速生成 Playground (便于分享)

如果你想快速验证一段逻辑，或者把 AI 写的组件分享给同事，MCP 提供了 playground-link 工具。AI 可以直接为你生成一个包含当前代码的 Svelte Playground 链接，点击即运行，无需在本地创建文件。

3. 怎么用？(How to use)

Svelte MCP 支持两种模式：本地模式 (Local) 和 远程模式 (Remote)。

本地模式 ：速度快，基于 npx 运行，推荐大多数用户使用。
远程模式 ：无需 Node 环境，通过 URL (https://mcp.svelte.dev/mcp) 连接。

以下是主流工具的配置方法：

第一步：安装/配置

🤖 如果你使用 Claude Desktop

在设置中点击 Edit Config，修改 claude_desktop_config.json：

json 复制代码

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

💻 如果你使用 Cursor

打开 Command Palette (Ctrl/Cmd + Shift + P)。
输入并选择 View: Open MCP Settings。
点击 Add custom MCP。
类型选择 command，Name 填 svelte，Command 填 npx，Args 填 -y @sveltejs/mcp。
(或者直接编辑配置文件加入上述 Claude Desktop 同款 JSON)

📝 如果你使用 VS Code

打开 Command Palette。
选择 MCP: Add Server...。
选择 Command (stdio)。
输入 npx -y @sveltejs/mcp 并回车。

第二步：调教 AI (关键步骤)

仅仅连接上 MCP 是不够的，你需要告诉 AI 何时以及如何使用这些工具。Svelte 官方建议在项目的 AGENTS.md (如果你用 Claude Code) 或作为 System Prompt (系统提示词) 包含以下指令。

提示：如果你使用 npx sv add mcp 命令来初始化项目，这部分会自动配置好。

核心指令逻辑如下（你可以复制这段话给 AI）：

你可以使用 Svelte MCP 服务器。

当被问及 Svelte 相关问题时，首先使用 list-sections 查找相关文档，然后用 get-documentation 阅读内容。

每次编写 Svelte 代码前，必须使用 svelte-autofixer 工具进行检查。如果工具返回问题，你必须修复代码并再次检查，直到没有问题为止。

代码完成后，如果用户需要，可以使用 playground-link 生成在线演示链接。

第三步：实战演练

配置完成后，你可以尝试这样提问：

"请帮我用 Svelte 5 的 Runes 语法写一个计数器组件，要求使用 $derived 计算双倍数值，并确保代码通过 svelte-autofixer 检查。"

你会看到 AI 的思考过程：

调用 get-documentation 读取 $state 和 $derived 的文档。
生成代码。
调用 svelte-autofixer 检查代码（如果它写错了，会自动修正）。
最终输出完美运行的代码。

总结

Svelte MCP Server 是连接现代 AI 编程能力与 Svelte 严谨工程标准的桥梁。它不仅能让 AI 学会最新的 Svelte 5 语法，更能通过静态分析即时纠错。如果你正在使用 Svelte 进行开发，强烈建议在你的 IDE 中配置这个神器！

🚀 立即尝试 ：在终端运行 npx sv add mcp 为你的 Svelte 项目添加 AI 超能力吧！