Svelte 5 MCP 服务器

一个专门用于 Svelte 5 前端开发的 Model Context Protocol (MCP) 服务器，提供精选的知识库、代码示例和智能辅助功能，以支持现代 Svelte 开发中的符文（runes）、代码片段和增强的响应性。

功能

🔍 可搜索资源

• 知识库：精选问答，涵盖 Svelte 5 概念、符文和最佳实践
• 代码示例：可搜索的 Svelte 5 模式和组件实现集合

🛠️ 智能工具

• search_knowledge - 查找解释和概念
• search_examples - 发现代码模式和实现
• generate_with_context - 使用精选模式创建组件
• audit_with_rules - 根据 Svelte 5 最佳实践审查代码
• explain_concept - 获取带有示例的详细解释

📝 智能提示

• generate-component - 生成现代 Svelte 5 组件
• audit-svelte5-code - 审查代码以寻找优化机会
• explain-concept - 详细的概念解释
• search-patterns - 寻找特定的实现模式

安装

# 克隆并设置
git clone <repository-url>
cd svelte5-mcp-server

# 安装依赖
npm install

# 构建服务器
npm run build

# 启动服务器
npm start

项目结构

svelte5-mcp-server/
├── src/
│   └── index.ts          # 主 MCP 服务器实现
├── data/
│   ├── svelte_5_knowledge.json    # 精选问答知识库
│   └── svelte_5_patterns.json     # 代码示例和模式
├── package.json
├── tsconfig.json
├── example system prompt         # Svelte 5 特定系统提示（非常严格，根据自己的喜好调整）
└── README.md

使用 Claude Desktop

添加到你的 Claude Desktop 配置：

{
  "mcpServers": {
    "svelte5": {
      "command": "node",
      "args": ["/path/to/svelte5-mcp-server/dist/index.js"],
      "env": {}
    }
  }
}

使用示例

🔍 搜索知识

工具: search_knowledge
查询: "runes reactivity"

返回关于 Svelte 5 符文和新的响应性系统的详细解释。

📚 查找代码示例

工具: search_examples  
查询: "counter component $state"

返回使用 $state 符文的 Svelte 5 计数器实现。

🏗️ 生成组件

工具: generate_with_context
描述: "具有添加/删除功能的待办事项列表"
特性: ["$state", "snippets", "accessibility"]

使用现代 Svelte 5 模式生成完整的待办事项组件，并从知识库中引用相关示例。

🔍 审查代码

工具: audit_with_rules
代码: "<script>let count = 0;</script><button on:click={() => count++}>{count}</button>"
关注点: "best-practices"

分析代码并建议 Svelte 5 改进（例如，使用 $state 和现代事件处理）。

关键 Svelte 5 概念覆盖

🎯 符文系统

• $state - 反应式状态管理
• $derived - 计算值和派生状态
• $effect - 侧效应和生命周期
• $props - 组件属性
• $bindable - 双向数据绑定
• $inspect - 开发调试

🧩 现代模式

• 代码片段 - 可重用模板块（{#snippet}，{@render}）
• 增强的响应性 - 细粒度更新
• 事件处理 - 现代 onclick 对比旧的 on:click
• TypeScript 集成 - 更好的类型推断
• 无障碍性 - 内置 a11y 考虑

📈 迁移支持

• Svelte 4 → 5 迁移模式
• 旧的反应式语句 ($:) → 符文
• 插槽 → 代码片段转换
• 事件分发器 → 回调属性

数据格式

知识库 (svelte_5_knowledge.json)

{
  "question": "如何在 Svelte 5 中管理反应式状态？",
  "answer": "在 Svelte 5 中，反应式状态是通过 `$state` 符文来管理的..."
}

示例 (svelte_5_patterns.json)

{
  "instruction": "创建一个演示 `$state` 的 Svelte 5 组件",
  "input": "该符文允许您创建反应式状态...",
  "output": "<script>\nlet count = $state(0);\n</script>\n\n<button onclick={() => count++}>\n  点击次数: {count}\n</button>"
}

配置

服务器使用 better-sqlite3 数据库和 FTS5 查询进行搜索

• 全文搜索：利用 SQLite 的 FTS5 扩展，在知识库和代码示例中进行强大且高效的搜索。
• 分词：采用 unicode61 分词器，结合全面的分隔符集，对术语进行健壮的索引。
• 同义词扩展：通过自动扩展查询词与预定义的 Svelte 5 特定同义词（如 $state 也匹配 反应式状态），增强搜索召回率。
• 结果高亮：搜索结果包括使用 FTS5 的 highlight() 函数在相关字段（如问题、答案、指令）内的匹配高亮。
• 相关性排序：基于 FTS5 的内部排名算法按相关性排序结果。
• 高级提升：提供自定义评分和提升能力，以微调搜索结果，例如优先匹配问题字段或代码内容。

开发

构建

npm run build     # 编译 TypeScript
npm run dev       # 开发监视模式

数据处理

node process-attached-data.js    # 处理精选知识
node setup-data.js              # 创建示例数据

测试

服务器提供了全面的日志记录和错误处理：

# 测试服务器
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list"}' | npm start

贡献

添加知识

1. 在 data/svelte_5_knowledge.json 中添加条目
2. 格式：{"question": "...", "answer": "..."}
3. 专注于 Svelte 5 特定功能和最佳实践

添加示例

1. 在 data/svelte_5_patterns.json 中添加条目
2. 格式：{"instruction": "...", "input": "...", "output": "..."}
3. 包含完整的、可工作的 Svelte 5 代码示例

搜索优化

• 在问题和指令中使用描述性和可搜索的关键字
• 包括常见概念的替代表述
• 用相关的特性名称标记示例（如 $state，snippets 等）

高级用法

自定义搜索查询

搜索工具支持复杂的查询：

// 搜索状态管理模式
search_examples("$state reactive updates")

// 查找无障碍指导
search_knowledge("a11y accessibility screen reader")

// 发现迁移模式
search_examples("svelte 4 migration runes")

提示链

顺序使用提示以完成复杂的工作流程：

1. search-patterns - 查找相关模式
2. generate-component - 根据模式创建
3. audit-svelte5-code - 审查和优化

集成技巧

• Claude Desktop：适合交互式开发
• API 集成：编程使用以生成代码
• CI/CD：在自动化工作流中审查代码
• 文档：为样式指南生成示例

故障排除

常见问题

“未找到结果”

• 检查搜索词是否与 Svelte 5 相关
• 尝试先使用更广泛的查询，然后缩小范围
• 确保数据文件格式正确

“工具未找到”

• 验证服务器已构建（npm run build）
• 检查 MCP 客户端配置
• 查看服务器启动日志中的错误

“无效的数据格式”

• 验证 JSON 文件
• 检查是否有尾随逗号或语法错误

调试

# 启用调试日志
DEBUG=* npm start

许可

MIT 许可证 - 详情见 LICENSE 文件。

致谢

• 使用 MCP TypeScript SDK 构建
• 搜索数据库由 better-sqlite3 提供
• 验证使用 Zod
• 精选的 Svelte 5 知识来自官方文档和社区最佳实践