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
- Clone the repository:
git clone https://github.com/CaullenOmdahl/Nextjs-React-Tailwind-Assistant.git
cd Nextjs-React-Tailwind-Assistant
- Install dependencies:
npm install
- 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 documentationsearch_tailwind_docs- Search Tailwind CSS utilities and conceptsget_nextjs_full_docs- Complete Next.js documentation (large)get_tailwind_full_docs- Complete Tailwind documentation (large)get_catalyst_component- Retrieve production-ready componentslist_catalyst_components- Browse available componentslist_patterns- Browse design patternsget_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:
- Ensure content is committed to git:
git add content/
git commit -m "Add documentation and pattern content"
- Push to GitHub:
git push origin main
- 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:
- Verify content is in repository:
git ls-files content/ | wc -l # Should show files
du -sh content/ # Should show ~5.3M
- Check package.json "files" array includes "content":
"files": ["dist", "content", "icon.png", "icon.svg"]
- Ensure build copies content:
npm run build
ls -la .smithery/content/ # Should show content directory
- 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
.jsextensions 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