5 MCP 服务器
用于Svelte 5前端开发的专用模型上下文协议（MCP）服务器，通过符文、代码片段和增强的反应性为现代Svelte开发提供精心策划的知识、代码示例和智能帮助。
特性
🔍 可搜索资源
- 知识库：策划问答，涵盖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-查找具体的实现模式
安装
# Clone and setup
git clone
cd svelte5-mcp-server
# Install dependencies
npm install
# Build the server
npm run build
# Start the server
npm start项目结构
svelte5-mcp-server/
├── src/
│ └── index.ts # Main MCP server implementation
├── data/
│ ├── svelte_5_knowledge.json # Curated Q&A knowledge base
│ └── svelte_5_patterns.json # Code examples and patterns
├── package.json
├── tsconfig.json
├── example system prompt # Svelte 5 specific system prompt (quite strict, adjust for your own preferences)
└── README.md使用Claude Desktop
添加到您的Claude Desktop配置中：
{
"mcpServers": {
"svelte5": {
"command": "node",
"args": ["/path/to/svelte5-mcp-server/dist/index.js"],
"env": {}
}
}
}使用示例
🔍 搜索知识
Tool: search_knowledge
Query: "runes reactivity"返回有关Svelte 5符文和新反应系统的详细解释。
📚 查找代码示例
Tool: search_examples
Query: "counter component $state"使用以下命令返回工作的Svelte 5计数器实现 $state 符文。
🏗️ 生成组件
Tool: generate_with_context
Description: "A todo list with add/remove functionality"
Features: ["$state", "snippets", "accessibility"]使用现代Svelte 5模式和知识库中的相关示例生成完整的todo组件。
🔍 审计代码
Tool: audit_with_rules
Code: "let count = 0; count++}>{count}"
Focus: "best-practices"分析代码并提出Svelte 5改进建议（例如，使用 $state 以及现代事件处理）。
涵盖的关键Svelte 5概念
🎯 运行系统
$state-反应式状态管理$derived-计算值和导出状态$effect-副作用和生命周期$props-组件属性$bindable-双向数据绑定$inspect-开发调试
🧩 现代模式
- 代码片段 -可重复使用的模板块(
{#snippet},{@render}) - 增强反应性 -细粒度更新
- 事件处理 -现代
onclickvs遗产on:click - TypeScript集成 -更好的类型推断
- 无障碍 -内置所有考虑因素
📈 迁移支持
- Svelte 4→ 5 迁移模式
- 遗留的反应性陈述(
$:) → runes - 插槽→ 代码片段转换
- 事件调度员→ 回调道具
数据格式
知识库(svelte_5_knowledge.json)
{
"question": "How do you manage reactive state in Svelte 5?",
"answer": "In Svelte 5, reactive state is managed using the $state rune..."
}示例(svelte_5_patterns.json)
{
"instruction": "Create a Svelte 5 component demonstrating $state",
"input": "The rune allows you to create reactive state...",
"output": "\nlet count = $state(0);\n\n\n count++}>\n clicks: {count}\n"
}配置
服务器使用better squelite3数据库和FTS5查询进行搜索
- 全文检索：利用SQLite的FTS5扩展，在知识库和代码示例中进行强大而高效的搜索。
- 分词：使用
unicode61标记器具有一套全面的分隔符，用于对术语进行稳健的索引。 - 同义词扩展：通过使用预定义的Svelte 5特定同义词自动扩展查询词来增强搜索召回率（例如，“$state”也与“reactive state”匹配）。
- 结果突出显示：搜索结果包括使用FTS5在相关字段（如问题、答案、说明）中突出显示的匹配项
highlight()功能。 - 相关性排名：结果根据FTS5的内部排名算法按相关性排序。
- 高级增压：提供自定义评分和增强功能，以微调搜索结果，例如在问题字段或代码内容中对匹配进行优先级排序。
发展
建筑
npm run build # Compile TypeScript
npm run dev # Watch mode for development数据处理
node process-attached-data.js # Process curated knowledge
node setup-data.js # Create sample data测试
服务器提供全面的日志记录和错误处理：
# Test the server
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list"}' | npm start贡献
添加知识
- 将条目添加到
data/svelte_5_knowledge.json - 格式：
{"question": "...", "answer": "..."} - 关注Svelte 5的特定功能和最佳实践
添加示例
- 将条目添加到
data/svelte_5_patterns.json - 格式：
{"instruction": "...", "input": "...", "output": "..."} - 包括完整的、可工作的Svelte 5代码示例
搜索优化
- 在问题和说明中使用描述性、可搜索的关键字
- 包括常见概念的替代措辞
- 用相关特征名称标记示例(
$state,snippets等等）
高级用法
自定义搜索查询
搜索工具支持复杂的查询：
// Search for state management patterns
search_examples("$state reactive updates")
// Find accessibility guidance
search_knowledge("a11y accessibility screen reader")
// Discover migration patterns
search_examples("svelte 4 migration runes")快速链接
对于复杂的工作流，按顺序使用提示：
search-patterns-查找相关模式generate-component-基于模式创建audit-svelte5-code-审查和优化
集成提示
- 克劳德桌面：最适合交互式开发
- API集成：以编程方式用于代码生成
- CI/CD：自动化工作流中的审计代码
- 文档：生成样式指南示例
故障排除
常见问题
“未找到结果”
- 检查搜索词是否与Svelte 5相关
- 先尝试更广泛的查询，然后缩小范围
- 确保数据文件的json格式正确
“找不到工具”
- 验证服务器是否已构建(
npm run build) - 检查MCP客户端配置
- 查看服务器日志以查找启动错误
“数据格式无效”
- 验证JSON文件
- 检查尾随逗号或语法错误
调试
# Enable debug logging
DEBUG=* npm start许可证
MIT许可证-有关详细信息，请参阅许可证文件。
致谢
- 内置于 MCP TypeScript SDK
- 按以下方式搜索数据库 更好平方3
- 验证 萨德
- 整理Svelte 5官方文档和社区最佳实践知识