Skip to main content
Glama
CaullenOmdahl

Next.js + React + Tailwind Assistant

by CaullenOmdahl
OverviewSchemaSourceRelated ServersScoreDiscussionsAdmin
TypeScript
Remote

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