Tailwind Svelte Assistant

顺风Svelte Assistant MCP服务器

](https://smithery.ai/server/@CaullenOmdahl/tailwind-svelte-assistant)

一种安全、高性能的模型上下文协议（MCP）服务器，提供 完成 SvelteKit和Tailwind CSS文档（100%覆盖率）和代码片段，具有增强的安全性、正确的TypeScript实现和全面的错误处理。

✨ 新增功能（v0.1.1）

📚 完整的文档覆盖范围

• 100%Svelte/SvelteKit覆盖：官方LLM优化文档（1.04 MB）
• 100%顺风CSS覆盖率：通过Repomix提取完成文档（2.1 MB，249个文件）
• 智能搜索：在有上下文的完整文档中搜索
• 12.5x-25x改进：从4-8%的覆盖率到100%的覆盖率

🚀 关键改进（v0.1.1）

🔒 增强的安全性

• 路径横向保护：全面的输入净化可防止目录遍历攻击
• 输入验证：通过模式匹配和长度限制进行严格的参数验证
• 安全文件操作：通过路径验证和大小限制进行有界文件访问
• 审计日志：用于监控的结构化安全事件日志

🏗️ 架构改进

• 模块化设计：将关注点分为专用服务和公用事业
• TypeScript卓越：全类型安全，接口正确，无 any 类型
• ES模块：具有适当导入的现代JavaScript模块系统
• 错误处理：全面的错误分类和安全的错误消息

⚡ 性能优化

• 内容缓存：具有可配置超时的LRU缓存，可缩短响应时间
• 文件大小限制：通过可配置的限制防止资源耗尽
• 异步操作：非阻塞文件操作可实现更好的并发性
• 内存管理：自动缓存清理和垃圾回收

📁 项目结构

src/
├── index.ts                 # Main server with security hardening
├── types.ts                 # TypeScript type definitions
├── services/
│   └── fileService.ts       # Secure file operations with caching
└── utils/
    ├── security.ts          # Input validation and path sanitization
    └── errorHandler.ts      # Comprehensive error handling

🚀 快速开始

通过Smithery安装（推荐）

安装此MCP服务器的最简单方法是 史密瑟里:

npx -y @smithery/cli install @CaullenOmdahl/tailwind-svelte-assistant --client claude

这将自动：

• 安装服务器
• 为Claude Desktop配置它
• 设置所有必需的依赖关系

通过直接URL安装

对于其他MCP客户端，请使用直接服务器URL：

https://server.smithery.ai/@CaullenOmdahl/tailwind-svelte-assistant/mcp

将此添加到MCP客户端配置中：

{
  "mcpServers": {
    "tailwind-svelte-assistant": {
      "url": "https://server.smithery.ai/@CaullenOmdahl/tailwind-svelte-assistant/mcp",
      "transport": "http"
    }
  }
}

🛠️ 手动安装和设置

先决条件

• Node.js 20+ （ES模块支持和依赖关系所需）
• npm或纱线
• Git（用于克隆存储库）

再进行

npm install

构建服务器

npm run build

发展模式

npm run watch

🔧 配置

服务器使用安全默认值，但可以通过配置 ServerConfig 接口：

const CONFIG: ServerConfig = {
  maxFileSize: 3 * 1024 * 1024,    // 3MB max file size (for full docs)
  cacheTimeout: 5 * 60 * 1000,     // 5 minutes cache timeout
  contentBasePath: './content',
  svelteFullDocsPath: './content/docs/svelte-sveltekit-full.txt',
  tailwindFullDocsPath: './content/docs/tailwind-docs-full.txt',
  // ... other paths
};

文档更新

文档会自动下载和更新：

# Update all documentation (Svelte + Tailwind)
npm run update-content

此脚本：

• 下载官方Svelte LLM优化文档（Svelte.dev/llms-full.txt）
• 通过Repomix从GitHub提取完整的Tailwind文档
• 更新组件片段时间戳
• 生成内容摘要

来源：

• Svelte/SvelteKit：官方LLM优化文本文件（100%覆盖）
• 顺风CSS：通过Repomix提取的GitHub存储库（249个MDX文件）
• 片段：本地策划的组件示例（43个文件）

🛡️ 安全特性

输入验证

• 模式匹配：只允许使用字母数字、连字符、下划线和点
• 长度限制：可配置的最大输入长度
• 路径消毒：删除目录遍历尝试
• 边界检查：确保文件访问保持在允许的目录内

错误处理

• 安全错误消息：没有敏感信息暴露给客户
• 结构化日志记录：用于安全监控的JSON格式审计日志
• 错误分类：针对不同错误类型的不同处理
• 故障弱化：非关键故障的后备响应

文件系统安全

• 路径验证：验证解析的路径是否在基目录中
• 文件大小限制：防止资源耗尽攻击
• 只读操作：没有向客户端公开的写入操作
• 缓存隔离：内容缓存不公开文件系统结构

📊 性能特点

缓存系统

// Automatic content caching with configurable timeout
const fileService = new SecureFileService(
  1024 * 1024,    // Max file size
  5 * 60 * 1000   // Cache timeout (5 minutes)
);

资源管理

• 内存限制：文件大小限制可防止内存耗尽
• 缓存清理：自动删除过期的缓存条目
• 异步I/O：非阻塞文件操作
• 错误恢复：妥善处理资源限制

🔍 可用工具

🆕 完整的文档工具（推荐）

• get_svelte_full_docs -获取完整的Svelte和SvelteKit文档（1MB，100%覆盖）

- 无需参数 - 在单个LLM优化文件中返回整个文档 - Svelte团队的官方格式

• get_tailwind_full_docs -获取完整的Tailwind CSS文档（2.1MB，100%覆盖率）

- 无需参数 - 包括所有249个文档文件 - 涵盖所有实用程序类别和概念

• search_svelte_docs -在Svelte/SvelteKit文档中搜索

- 参数： query （字符串）， limit （可选，默认值：5） - 返回与周围上下文匹配的部分 - 快速内存搜索

• search_tailwind_docs -在Tailwind CSS文档中搜索

- 参数： query （字符串）， limit （可选，默认值：5） - 返回与周围上下文匹配的部分 - 涵盖所有公用事业类别

传统文档工具

备注：这些工具仅涵盖了可用文档的约4-8%。使用上面的完整文档工具进行全面覆盖。

• get_sveltekit_doc -检索特定的SvelteKit文档主题
• get_tailwind_info -获取特定的Tailwind CSS信息
• list_sveltekit_topics -列出可用的SvelteKit文档（有限）
• list_tailwind_info_topics -列出顺风文件（有限）

组件工具

• get_component_snippet -获取Svelte组件代码
• list_snippet_categories -列出组件类别
• list_snippets_in_category -按类别列出代码片段

增强的工具模式

所有工具包括：

• 模式验证 带有正则表达式约束
• 长度限制 用于输入参数
• 综合说明 使用示例
• 加强安保 输入净化

📝 用法示例

MCP客户端配置

选项1：Smithery托管（推荐）

{
  "mcpServers": {
    "tailwind-svelte-assistant": {
      "url": "https://server.smithery.ai/@CaullenOmdahl/tailwind-svelte-assistant/mcp",
      "transport": "http"
    }
  }
}

选项2：本地安装

{
  "mcpServers": {
    "tailwind-svelte-assistant": {
      "command": "node",
      "args": ["./dist/index.js"],
      "env": {}
    }
  }
}

工具使用

推荐：完整文档

// Get complete Svelte/SvelteKit documentation (1MB, 100% coverage)
await client.callTool("get_svelte_full_docs", {});

// Get complete Tailwind CSS documentation (2.1MB, 100% coverage)
await client.callTool("get_tailwind_full_docs", {});

// Search within Svelte documentation
await client.callTool("search_svelte_docs", {
  query: "load function",
  limit: 5  // optional
});

// Search within Tailwind documentation
await client.callTool("search_tailwind_docs", {
  query: "padding utilities",
  limit: 3  // optional
});

遗产：特定主题（覆盖范围有限）

// Get specific SvelteKit topic (only covers ~8% of docs)
await client.callTool("get_sveltekit_doc", { topic: "routing" });

// Get specific Tailwind info (only covers ~4% of docs)
await client.callTool("get_tailwind_info", { query: "padding" });

// List available topics (limited)
await client.callTool("list_tailwind_info_topics", {});

组件代码段

// Get a component snippet
await client.callTool("get_component_snippet", {
  component_category: "headers",
  snippet_name: "navbar-default"
});

// List snippet categories
await client.callTool("list_snippet_categories", {});

🧪 测试和质量保证

安全审计

npm run security-audit

依赖检查

npm run outdated-check

MCP检查员

npm run inspector

🐳 Docker部署

包括 Dockerfile 提供安全的多阶段构建：

# Multi-stage build with security hardening
FROM node:18-alpine AS builder
# ... build process

FROM node:18-alpine AS release
# ... production setup with non-root user

安全特性

• 多阶段构建 减小攻击面
• Alpine Linux 实现最小占地面积
• 非root用户 集装箱安全
• 仅生产依赖关系

📈 监控和记录

结构化日志记录

所有操作都使用结构化JSON记录，以便于解析：

{
  "timestamp": "2024-01-15T10:30:00.000Z",
  "level": "info",
  "operation": "tool_request",
  "tool": "get_sveltekit_doc",
  "topic": "routing"
}

审核事件

• 工具请求 带参数
• 违反安全规定 并阻止请求
• 错误条件 分类
• 性能指标 缓存命中率

🔄 从v0.1.0迁移

突破性变化

• ES模块：已更新以供使用 import/export 而不是 require
• TypeScript：在某些情况下，严格类型可能需要类型断言
• 错误消息：更安全、更不详细的错误消息

兼容性

• 工具接口：所有现有工具都经过改进的验证
• 内容结构：内容组织不变
• 码头工人：更新了基础图像和安全加固

🤝 贡献

开发指南

1. 安全第一：所有更改都必须通过安全审查
2. 类型安全：保持严格的TypeScript合规性
3. 测试覆盖率：包括新功能的测试
4. 文档：针对任何API更改更新README

代码审查清单

• \[\]所有用户输入的输入验证
• \[\]使用安全错误消息处理错误
• \[\]没有的TypeScript类型 any
• \[\]路径操作的安全审计
• \[\]性能影响评估

📚 文档

• MCP规范
• 安全最佳实践
• TypeScript SDK

🐛 故障排除

常见问题

构建错误

# Clear dist and rebuild
rm -rf dist && npm run build

权限错误

# Ensure executable permissions
chmod +x dist/index.js

导入错误

• 确保Node.js 18+支持ES模块
• 检查 "type": "module" 在package.json中

安全问题

如果您发现安全漏洞，请通过GitHub问题报告 security 标签。

📄 许可证

该项目与原始的Tailwind Svelte Assistant项目保持相同的许可证。

______________________________________________________________________

⚡ 性能基准

前后对比（v0.1.1）

• 文件覆盖范围: 🔴 4-8% → 🟢 100% （提高12.5x-25x）
• 安全: 🔴 关键漏洞→ 🟢 硬化
• 类型安全: 🟡 混合型→ 🟢 严格的TypeScript
• 演出: 🟡 无缓存→ 🟢 5分钟LRU缓存
• 建筑: 🔴 整体的→ 🟢 模块化服务
• 错误处理: 🟡 基础→ 🟢 综合分类

文档度量

• Svelte/SvelteKit：1065921字节（1.04 MB）
• Tailwind CSS：2197160字节（2.1 MB，249个文件）
• 代币总数：606587个代币（顺风）
• 更新方法：通过npm脚本自动执行

高速缓存性能

• 冷启动：每个文件读取约50-100ms
• 缓存命中：~1-5ms响应时间
• 内存使用：每个缓存的完整文档约1-3MB
• 缓存效率：典型使用中80-95%的点击率
• 搜索性能：内存搜索小于10ms

文档来源

• 斯维尔特：Svelte团队官方LLM优化格式
• 顺风：通过Repomix从GitHub官方存储库中提取
• 更新：具有回退机制的自动脚本

升级后的MCP服务器将原始原型转化为生产就绪服务 完整的文件覆盖范围，企业级安全性、性能和可维护性。