Nextjs-React-Tailwind-Assistant

CaullenOmdahl/Nextjs-React-Tailwind-Assistant

3.2

If you are the rightful owner of Nextjs-React-Tailwind-Assistant and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

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

Tools
8
Resources
0
Prompts
0

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
  1. Install dependencies:
npm install
  1. 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"
  1. Push to GitHub:
git push origin main
  1. 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
  1. Check package.json "files" array includes "content":
"files": ["dist", "content", "icon.png", "icon.svg"]
  1. Ensure build copies content:
npm run build
ls -la .smithery/content/  # Should show content directory
  1. 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