Labsco
CaullenOmdahl logo

Tailwind Svelte Assistant

β˜… 10

from CaullenOmdahl

Provides documentation and code snippets for SvelteKit and Tailwind CSS.

πŸ”₯πŸ”₯πŸ”₯βœ“ VerifiedFreeQuick setup

Tailwind Svelte Assistant MCP Server

smithery badge

A secure, high-performance Model Context Protocol (MCP) server that provides complete SvelteKit and Tailwind CSS documentation (100% coverage) and code snippets with enhanced security, proper TypeScript implementation, and comprehensive error handling.

✨ What's New (v0.1.1)

πŸ“š Complete Documentation Coverage

  • 100% Svelte/SvelteKit Coverage: Official LLM-optimized documentation (1.04 MB)
  • 100% Tailwind CSS Coverage: Complete documentation via Repomix extraction (2.1 MB, 249 files)
  • Intelligent Search: Search within complete documentation with context
  • 12.5x-25x Improvement: From 4-8% coverage to 100% coverage

πŸš€ Key Improvements (v0.1.1)

πŸ”’ Security Enhancements

  • Path Traversal Protection: Comprehensive input sanitization prevents directory traversal attacks
  • Input Validation: Strict parameter validation with pattern matching and length limits
  • Secure File Operations: Bounded file access with path validation and size limits
  • Audit Logging: Structured security event logging for monitoring

πŸ—οΈ Architecture Improvements

  • Modular Design: Separated concerns into dedicated services and utilities
  • TypeScript Excellence: Full type safety with proper interfaces and no any types
  • ES Modules: Modern JavaScript module system with proper imports
  • Error Handling: Comprehensive error classification and safe error messaging

⚑ Performance Optimizations

  • Content Caching: LRU cache with configurable timeout for improved response times
  • File Size Limits: Prevents resource exhaustion with configurable limits
  • Async Operations: Non-blocking file operations for better concurrency
  • Memory Management: Automatic cache cleanup and garbage collection

πŸ“ Project Structure

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

πŸ›‘οΈ Security Features

Input Validation

  • Pattern Matching: Only alphanumeric, hyphens, underscores, and dots allowed
  • Length Limits: Configurable maximum input lengths
  • Path Sanitization: Removes directory traversal attempts
  • Bounds Checking: Ensures file access stays within allowed directories

Error Handling

  • Safe Error Messages: No sensitive information exposed to clients
  • Structured Logging: JSON-formatted audit logs for security monitoring
  • Error Classification: Different handling for different error types
  • Graceful Degradation: Fallback responses for non-critical failures

File System Security

  • Path Validation: Verifies resolved paths are within base directories
  • File Size Limits: Prevents resource exhaustion attacks
  • Read-Only Operations: No write operations exposed to clients
  • Cache Isolation: Content caching doesn't expose file system structure

πŸ“Š Performance Features

Caching System

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

Resource Management

  • Memory Limits: File size restrictions prevent memory exhaustion
  • Cache Cleanup: Automatic removal of expired cache entries
  • Async I/O: Non-blocking file operations
  • Error Recovery: Graceful handling of resource limitations

πŸ” Available Tools

πŸ†• Complete Documentation Tools (Recommended)

  • get_svelte_full_docs - Get complete Svelte & SvelteKit documentation (1MB, 100% coverage)

    • No parameters required
    • Returns entire documentation in single LLM-optimized file
    • Official format from Svelte team
  • get_tailwind_full_docs - Get complete Tailwind CSS documentation (2.1MB, 100% coverage)

    • No parameters required
    • Includes all 249 documentation files
    • All utility classes and concepts covered
  • search_svelte_docs - Search within Svelte/SvelteKit documentation

    • Parameters: query (string), limit (optional, default: 5)
    • Returns matching sections with surrounding context
    • Fast in-memory search
  • search_tailwind_docs - Search within Tailwind CSS documentation

    • Parameters: query (string), limit (optional, default: 5)
    • Returns matching sections with surrounding context
    • Covers all utility classes

Legacy Documentation Tools

Note: These tools only cover ~4-8% of available documentation. Use the full docs tools above for complete coverage.

  • get_sveltekit_doc - Retrieve specific SvelteKit documentation topic
  • get_tailwind_info - Get specific Tailwind CSS information
  • list_sveltekit_topics - List available SvelteKit docs (limited)
  • list_tailwind_info_topics - List Tailwind documentation (limited)

Component Tools

  • get_component_snippet - Fetch Svelte component code
  • list_snippet_categories - List component categories
  • list_snippets_in_category - List snippets in category

Enhanced Tool Schemas

All tools include:

  • Pattern validation with regex constraints
  • Length limits for input parameters
  • Comprehensive descriptions with usage examples
  • Security-hardened input sanitization

πŸ§ͺ Testing & Quality Assurance

Security Auditing

npm run security-audit

Dependency Checking

npm run outdated-check

MCP Inspector

npm run inspector

πŸ“ˆ Monitoring & Logging

Structured Logging

All operations are logged with structured JSON for easy parsing:

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

Audit Events

  • Tool requests with parameters
  • Security violations and blocked requests
  • Error conditions with classification
  • Performance metrics and cache hits

πŸ”„ Migration from v0.1.0

Breaking Changes

  • ES Modules: Updated to use import/export instead of require
  • TypeScript: Strict typing may require type assertions in some cases
  • Error Messages: More secure, less detailed error messages

Compatibility

  • Tool Interface: All existing tools work with improved validation
  • Content Structure: No changes to content organization
  • Docker: Updated base image and security hardening

🀝 Contributing

Development Guidelines

  1. Security First: All changes must pass security review
  2. Type Safety: Maintain strict TypeScript compliance
  3. Test Coverage: Include tests for new functionality
  4. Documentation: Update README for any API changes

Code Review Checklist

  • Input validation for all user inputs
  • Error handling with safe error messages
  • TypeScript types without any
  • Security audit for path operations
  • Performance impact assessment

πŸ“š Documentation

πŸ“„ License

This project maintains the same license as the original Tailwind-Svelte-Assistant project.


⚑ Performance Benchmarks

Before vs After (v0.1.1)

  • Documentation Coverage: πŸ”΄ 4-8% β†’ 🟒 100% (12.5x-25x improvement)
  • Security: πŸ”΄ Critical vulnerabilities β†’ 🟒 Hardened
  • Type Safety: 🟑 Mixed types β†’ 🟒 Strict TypeScript
  • Performance: 🟑 No caching β†’ 🟒 5-minute LRU cache
  • Architecture: πŸ”΄ Monolithic β†’ 🟒 Modular services
  • Error Handling: 🟑 Basic β†’ 🟒 Comprehensive classification

Documentation Metrics

  • Svelte/SvelteKit: 1,065,921 bytes (1.04 MB)
  • Tailwind CSS: 2,197,160 bytes (2.1 MB, 249 files)
  • Total Tokens: 606,587 tokens (Tailwind)
  • Update Method: Automated via npm script

Cache Performance

  • Cold Start: ~50-100ms per file read
  • Cache Hit: ~1-5ms response time
  • Memory Usage: ~1-3MB per cached full doc
  • Cache Efficiency: 80-95% hit rate in typical usage
  • Search Performance: <10ms for in-memory search

Documentation Sources

  • Svelte: Official LLM-optimized format from Svelte team
  • Tailwind: Extracted via Repomix from official GitHub repository
  • Updates: Automated script with fallback mechanisms

This upgraded MCP server transforms the original prototype into a production-ready service with complete documentation coverage, enterprise-grade security, performance, and maintainability.