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

MIT

Credits

• Design patterns abstracted from professional Next.js templates
• Catalyst components from Tailwind Labs
• Documentation from official Next.js and Tailwind CSS sources