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

Manual Installation

1. Clone the repository:

2. Install dependencies:

3. Build the server:

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

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

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:

2. Push to GitHub:

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:

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

3. Ensure build copies content:

4. Test locally:

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

MIT

Credits

• Design patterns abstracted from professional Next.js templates

• Catalyst components from Tailwind Labs

• Documentation from official Next.js and Tailwind CSS sources