Price Per TokenPrice Per Token
Next.js Tailwind Assistant

Next.js Tailwind Assistant

by caullenomdahl

GitHub 2 2,214 uses Remote
0

About

Next.js Tailwind Assistant is an AI companion for building modern Next.js applications with React and Tailwind CSS. It provides instant access to comprehensive documentation, production-ready components, and battle-tested design patterns. Key features include: - Complete documentation for Next.js 15+ (App Router, Server Components, Server Actions) and Tailwind CSS 3+ with smart, targeted search capabilities - 27 production-ready Catalyst UI components built with TypeScript, Tailwind CSS, and Headless UI—fully accessible, responsive, and customizable across forms, navigation, layout, feedback, and data display categories - 13 design patterns abstracted from professional Next.js templates, including visual effects, color systems, typography scales, and page layouts with built-in accessibility and dark mode support

Tools 16

get_nextjs_full_docs

Get the complete Next.js 15+ documentation (~2.5MB, ~320,000 tokens). WARNING: This returns ~320,000 tokens. Only use with LLMs that support large context windows (100k+ tokens). For smaller contexts, use 'search_nextjs_docs' instead. Covers: App Router, Server Components, Client Components, routing, layouts, pages, data fetching, Server Actions, middleware, deployment, and optimization.

get_tailwind_full_docs

Get the complete Tailwind CSS documentation (~2.1MB, ~730,000 tokens). WARNING: This returns ~730,000 tokens. Only use with LLMs that support very large context windows (200k+ tokens). For smaller contexts, use 'search_tailwind_docs' instead. Covers all utility classes, concepts, responsive design, dark mode, customization, and plugins.

search_nextjs_docs

Search within the Next.js documentation for specific topics or keywords. Returns relevant excerpts matching the query. Recommended for most use cases as it provides targeted results without the full 320k token context.

search_tailwind_docs

Search within the Tailwind CSS documentation for specific utility classes or concepts. Returns relevant excerpts matching the query. Recommended for most use cases as it provides targeted results without the full 730k token context.

get_catalyst_component

Retrieve the TypeScript source code for a specific Catalyst UI component. Components include forms (button, checkbox, input, etc.), navigation (navbar, sidebar, dropdown), layout (divider, heading), feedback (alert, badge, dialog), and data display (avatar, table, pagination). All components are production-ready TypeScript React components with Tailwind styling and Headless UI integration.

list_catalyst_components

List all 28 available Catalyst UI components organized by category. Categories include: forms (button, checkbox, fieldset, input, radio, select, switch, textarea), navigation (navbar, sidebar, dropdown, link), layout (divider, heading, stacked-layout, auth-layout), feedback (alert, badge, dialog), data-display (avatar, description-list, listbox, pagination, table, text), and advanced (combobox).

get_pattern

Retrieve documentation for a specific abstracted pattern. Patterns are organized into: layouts (app-header, sidebar-layout, auth-layout, overlay-navigation), pages (hero-section, pricing-page, blog-layout), and features (animations, dark-mode). Patterns include implementation details, code examples, accessibility considerations, and dependencies.

list_patterns

List all available abstracted template patterns organized by category (layouts, pages, features). Patterns are abstracted from professional Next.js templates and include common architectural approaches, not template-specific implementations. Each pattern includes multiple variants, dependencies, accessibility guidelines, and dark mode support.

get_color_design_guidance

Retrieve comprehensive color design patterns documentation (~20KB). Covers color psychology, premium vs cheap distinctions, harmony systems, industry-specific guidance, and 2024-2025 modern trends. **RECOMMENDED WORKFLOW**: Due to the comprehensive nature of this content, consider using a subagent to execute the color selection workflow with full context. The subagent can analyze the guidance and make informed color decisions for your specific project.

analyze_existing_site

Analyze an existing website or Google Business listing to extract useful information and assets for rebuilding. Extracts business info, contact details, images, content structure, site type, and design elements. **RECOMMENDED WORKFLOW**: Due to the complexity of site analysis and data extraction, use a subagent to perform the analysis. The subagent can use WebFetch to scrape the site, analyze structure, extract assets, and return organized data for the new build.

list_starter_kits

List all available template starter kits with their features, use cases, and complexity levels. Each template includes architectural decision guidance that teaches you how to choose the right libraries and patterns for your needs, rather than prescribing specific solutions. Includes: Documentation Site, SaaS Marketing, Portfolio & Blog, Agency/Studio, Content Platform, Event/Conference, App Marketing, Podcast/Media, CMS-Integrated, Pitch Deck, Admin Dashboard, and E-commerce templates.

get_starter_kit

Get detailed information about a specific template starter kit including features, architectural decisions with tradeoffs, alternative approaches, and implementation guidance. Each template teaches decision-making frameworks rather than prescribing specific libraries. Use list_starter_kits to see available template IDs.

recommend_template

Get template recommendations based on your project requirements. Provide criteria like purpose, color preferences, animation level, required features, and complexity. Returns ranked template suggestions with explanations.

answer_questionnaire

Submit answers to the template selection questionnaire and receive personalized recommendations. Provide answers as a key-value object where keys are question IDs (purpose, colorPreference, animations, features, complexity) and values are your choices.

get_library_docs

Get comprehensive documentation for commonly used libraries in Next.js projects. Available: framer-motion, mdx, headless-ui, next-themes, clsx, tailwind-plugins. Includes installation, usage examples, patterns, and best practices.

list_library_docs

List all available library documentation files. Includes commonly used libraries like Framer Motion, MDX, Headless UI, next-themes, clsx, and Tailwind plugins. Each provides installation, usage examples, and best practices.

README

Next.js + React + Tailwind Assistant MCP Server

Your comprehensive AI companion for building modern Next.js applications with React and Tailwind CSS.

Features

📚 Complete Documentation

  • Next.js 15+: App Router, Server Components, Server Actions, routing, data fetching
  • Tailwind CSS 3+: All utility classes, responsive design, dark mode, customization
  • Smart Search: Targeted results without overwhelming context
  • 🎨 27 Catalyst UI Components

  • Production-ready TypeScript React components
  • Built with Tailwind CSS and Headless UI
  • Fully accessible, responsive, and customizable
  • Categories: forms, navigation, layout, feedback, data display
  • ✨ 13 Design Patterns

    Abstracted from 11 professional Next.js templates:

    Visual Effects: Gradients, glows, animations, bento grids, decorative SVGs Component Library: Buttons, cards, badges, inputs, avatars, alerts, tooltips Color Systems: 8 palette strategies (Professional, SaaS, Bold, Minimal, Semantic, Dark Mode) Typography: Font systems, type scales, responsive patterns Layouts: App headers, auth pages, sidebars, overlay navigation Pages: Hero sections, pricing tables, blog layouts

    All patterns include accessibility, performance, and dark mode support.

    Installation

    Via Smithery

    npx @smithery/cli install @username/nextjs-react-tailwind-assistant --client claude
    

    Manual Installation

    1. Clone the repository:

    git clone https://github.com/CaullenOmdahl/Nextjs-React-Tailwind-Assistant.git
    cd Nextjs-React-Tailwind-Assistant
    

    2. Install dependencies:

    npm install
    

    3. Build the server:

    npm run build
    

    This will:

  • Build the MCP server using Smithery CLI → .smithery/index.cjs (1.67 MB)
  • Copy the content directory → .smithery/content/ (5.3 MB)
  • Development

    npm run dev          # Start development server with hot reload
    npm run inspector    # Launch MCP inspector for testing
    npm run build        # Build production bundle
    npm run watch        # TypeScript watch mode
    

    Available Tools

  • search_nextjs_docs - Search Next.js documentation
  • search_tailwind_docs - Search Tailwind CSS utilities and concepts
  • get_nextjs_full_docs - Complete Next.js documentation (large)
  • get_tailwind_full_docs - Complete Tailwind documentation (large)
  • get_catalyst_component - Retrieve production-ready components
  • list_catalyst_components - Browse available components
  • list_patterns - Browse design patterns
  • get_pattern - Get detailed pattern implementations
  • Content Structure

    content/
    ├── components/
    │   └── catalyst/          # 27 TypeScript React components
    ├── docs/
    │   ├── nextjs/           # Complete Next.js 15+ docs (2.9 MB)
    │   └── tailwind/         # Complete Tailwind CSS docs (2.1 MB)
    ├── patterns/
    │   ├── features/         # 6 feature patterns
    │   ├── layouts/          # 4 layout patterns
    │   └── pages/            # 3 page patterns
    └── content-summary.json  # Catalog of all content
    

    Deployment to Smithery

    Important: Content Directory Deployment

    The server requires the content/ directory (5.3 MB) to be available at runtime. Smithery deploys from your GitHub repository and includes files listed in package.json "files" array.

    Deployment Process:

    1. Ensure content is committed to git:

    git add content/
    git commit -m "Add documentation and pattern content"
    

    2. Push to GitHub:

    git push origin main
    

    3. Deploy to Smithery:

  • Smithery clones your repository
  • Runs npm install
  • Runs npm run build (which copies content to .smithery/content/)
  • Deploys the server
  • Note: The server uses process.cwd() + '/content' to locate files. When deployed to Smithery, the content directory from your repository should be available in the working directory.

    Troubleshooting Deployment

    If you get a 500 error on Smithery:

    1. Verify content is in repository:

    git ls-files content/ | wc -l  # Should show files
    du -sh content/                # Should show ~5.3M
    

    2. Check package.json "files" array includes "content":

    "files": ["dist", "content", "icon.png", "icon.svg"]
    

    3. Ensure build copies content:

    npm run build
    ls -la .smithery/content/  # Should show content directory
    

    4. Test locally:

    cd .smithery && node index.cjs
    

    Should start without errors

    Architecture

    Module System

  • ES Modules only ("type": "module" in package.json)
  • All imports use .js extensions for TypeScript files
  • No CommonJS
  • Security Features

  • Input validation with regex patterns (alphanumeric + -_. only)
  • Path sanitization to prevent ../ traversal
  • Base path boundary checking
  • File size limits (3MB for docs, 1MB for components)
  • Safe error messages (no internal details exposed)
  • Caching

  • LRU cache with 5-minute timeout
  • Cache keys use full resolved file paths
  • Improves performance for repeated documentation queries
  • License

    Related MCP Servers

    AI Research Assistant

    AI Research Assistant

    hamid-vakilzadeh

    AI Research Assistant provides comprehensive access to millions of academic papers through the Semantic Scholar and arXiv databases. This MCP server enables AI coding assistants to perform intelligent literature searches, citation network analysis, and paper content extraction without requiring an API key. Key features include: - Advanced paper search with multi-filter support by year ranges, citation thresholds, field of study, and publication type - Title matching with confidence scoring for finding specific papers - Batch operations supporting up to 500 papers per request - Citation analysis and network exploration for understanding research relationships - Full-text PDF extraction from arXiv and Wiley open-access content (Wiley TDM token required for institutional access) - Rate limits of 100 requests per 5 minutes with options to request higher limits through Semantic Scholar

    Web & Search
    12 8
    Linkup

    Linkup

    LinkupPlatform

    Linkup is a real-time web search and content extraction service that enables AI assistants to search the web and retrieve information from trusted sources. It provides source-backed answers with citations, making it ideal for fact-checking, news gathering, and research tasks. Key features of Linkup: - Real-time web search using natural language queries to find current information, news, and data - Page fetching to extract and read content from any webpage URL - Search depth modes: Standard for direct-answer queries and Deep for complex research across multiple sources - Source-backed results with citations and context from relevant, trustworthy websites - JavaScript rendering support for accessing dynamic content on JavaScript-heavy pages

    Web & Search
    2 24
    Math-MCP

    Math-MCP

    EthanHenrickson

    Math-MCP is a computation server that enables Large Language Models (LLMs) to perform accurate numerical calculations through the Model Context Protocol. It provides precise mathematical operations via a simple API to overcome LLM limitations in arithmetic and statistical reasoning. Key features of Math-MCP: - Basic arithmetic operations: addition, subtraction, multiplication, division, modulo, and bulk summation - Statistical analysis functions: mean, median, mode, minimum, and maximum calculations - Rounding utilities: floor, ceiling, and nearest integer rounding - Trigonometric functions: sine, cosine, tangent, and their inverses with degrees and radians conversion support

    Developer Tools
    22 81