Hosted MCP server · #131 most used on Smithery

Next.js Tailwind Assistant

CaullenOmdahl/nextjs-react-tailwind-assistant

Your comprehensive AI companion for building modern Next.js applications with React and Tailwind CSS. This MCP server provides instant access to complete documentation, production-ready components, and battle-tested design patterns abstracted from professional templates.

Uses
4.1k
Tools
16
Runs
Hosted
Prompts
5
Listed
1.0y ago

Get started

Add it to your agent

npx -y @smithery/cli@latest install CaullenOmdahl/nextjs-react-tailwind-assistant --client claude

Swap --client claude for cursor, vscode, windsurf or another client. The CLI asks for any required settings.

What it can do

16 tools

get_nextjs_full_docsGet the complete Next.js 15+ documentation (~2.5MB, ~320,000 tokens). WARNING: This returns ~320,000 tokens. Only use with LLMs that supp…

Get the complete Next.js 15+ documentation (~2.5MB, ~320,000 tokens). WARNING: This returns ~320,000 tokens. Only use with LLMs that support large context windows (100k+ tokens). For smaller contexts, use 'search_nextjs_docs' instead. Covers: App Router, Server Components, Client Components, routing, layouts, pages, data fetching, Server Actions, middleware, deployment, and optimization.

get_tailwind_full_docsGet the complete Tailwind CSS documentation (~2.1MB, ~730,000 tokens). WARNING: This returns ~730,000 tokens. Only use with LLMs that sup…

Get the complete Tailwind CSS documentation (~2.1MB, ~730,000 tokens). WARNING: This returns ~730,000 tokens. Only use with LLMs that support very large context windows (200k+ tokens). For smaller contexts, use 'search_tailwind_docs' instead. Covers all utility classes, concepts, responsive design, dark mode, customization, and plugins.

search_nextjs_docs2 paramsSearch within the Next.js documentation for specific topics or keywords. Returns relevant excerpts matching the query. Recommended for mo…

Search within the Next.js documentation for specific topics or keywords. Returns relevant excerpts matching the query. Recommended for most use cases as it provides targeted results without the full 320k token context.

ParameterTypeDescription
limitnumberMaximum number of results to return (default: 5, max: 20)
querystringThe search query (e.g., 'routing', 'server actions', 'middleware')
search_tailwind_docs2 paramsSearch within the Tailwind CSS documentation for specific utility classes or concepts. Returns relevant excerpts matching the query. Reco…

Search within the Tailwind CSS documentation for specific utility classes or concepts. Returns relevant excerpts matching the query. Recommended for most use cases as it provides targeted results without the full 730k token context.

ParameterTypeDescription
limitnumberMaximum number of results to return (default: 5, max: 20)
querystringThe search query (e.g., 'padding', 'flex', 'dark mode')
get_catalyst_component1 paramRetrieve the TypeScript source code for a specific Catalyst UI component. Components include forms (button, checkbox, input, etc.), navig…

Retrieve the TypeScript source code for a specific Catalyst UI component. Components include forms (button, checkbox, input, etc.), navigation (navbar, sidebar, dropdown), layout (divider, heading), feedback (alert, badge, dialog), and data display (avatar, table, pagination). All components are production-ready TypeScript React components with Tailwind styling and Headless UI integration.

ParameterTypeDescription
component_namestringName of the Catalyst component (e.g., 'button', 'dialog', 'table')
list_catalyst_componentsList all 28 available Catalyst UI components organized by category. Categories include: forms (button, checkbox, fieldset, input, radio, …

List all 28 available Catalyst UI components organized by category. Categories include: forms (button, checkbox, fieldset, input, radio, select, switch, textarea), navigation (navbar, sidebar, dropdown, link), layout (divider, heading, stacked-layout, auth-layout), feedback (alert, badge, dialog), data-display (avatar, description-list, listbox, pagination, table, text), and advanced (combobox).

get_pattern2 paramsRetrieve documentation for a specific abstracted pattern. Patterns are organized into: layouts (app-header, sidebar-layout, auth-layout, …

Retrieve documentation for a specific abstracted pattern. Patterns are organized into: layouts (app-header, sidebar-layout, auth-layout, overlay-navigation), pages (hero-section, pricing-page, blog-layout), and features (animations, dark-mode). Patterns include implementation details, code examples, accessibility considerations, and dependencies.

ParameterTypeDescription
categorystringPattern category: 'layouts', 'pages', or 'features'
pattern_namestringName of the pattern (e.g., 'app-header', 'pricing-page', 'dark-mode')
list_patternsList all available abstracted template patterns organized by category (layouts, pages, features). Patterns are abstracted from profession…

List all available abstracted template patterns organized by category (layouts, pages, features). Patterns are abstracted from professional Next.js templates and include common architectural approaches, not template-specific implementations. Each pattern includes multiple variants, dependencies, accessibility guidelines, and dark mode support.

get_color_design_guidanceRetrieve comprehensive color design patterns documentation (~20KB). Covers color psychology, premium vs cheap distinctions, harmony syste…

Retrieve comprehensive color design patterns documentation (~20KB). Covers color psychology, premium vs cheap distinctions, harmony systems, industry-specific guidance, and 2024-2025 modern trends. **RECOMMENDED WORKFLOW**: Due to the comprehensive nature of this content, consider using a subagent to execute the color selection workflow with full context. The subagent can analyze the guidance and make informed color decisions for your specific project.

analyze_existing_site1 paramAnalyze an existing website or Google Business listing to extract useful information and assets for rebuilding. Extracts business info, c…

Analyze an existing website or Google Business listing to extract useful information and assets for rebuilding. Extracts business info, contact details, images, content structure, site type, and design elements. **RECOMMENDED WORKFLOW**: Due to the complexity of site analysis and data extraction, use a subagent to perform the analysis. The subagent can use WebFetch to scrape the site, analyze structure, extract assets, and return organized data for the new build.

ParameterTypeDescription
urlstringURL of the existing website or Google Business listing to analyze
list_starter_kitsList all available template starter kits with their features, use cases, and complexity levels. Each template includes architectural deci…

List all available template starter kits with their features, use cases, and complexity levels. Each template includes architectural decision guidance that teaches you how to choose the right libraries and patterns for your needs, rather than prescribing specific solutions. Includes: Documentation Site, SaaS Marketing, Portfolio & Blog, Agency/Studio, Content Platform, Event/Conference, App Marketing, Podcast/Media, CMS-Integrated, Pitch Deck, Admin Dashboard, and E-commerce templates.

get_starter_kit1 paramGet detailed information about a specific template starter kit including features, architectural decisions with tradeoffs, alternative ap…

Get detailed information about a specific template starter kit including features, architectural decisions with tradeoffs, alternative approaches, and implementation guidance. Each template teaches decision-making frameworks rather than prescribing specific libraries. Use list_starter_kits to see available template IDs.

ParameterTypeDescription
idstringThe starter kit ID (e.g., 'documentation', 'saas-marketing', 'portfolio-blog')
recommend_template5 paramsGet template recommendations based on your project requirements. Provide criteria like purpose, color preferences, animation level, requi…

Get template recommendations based on your project requirements. Provide criteria like purpose, color preferences, animation level, required features, and complexity. Returns ranked template suggestions with explanations.

ParameterTypeDescription
purposestringPrimary purpose: documentation, marketing, portfolio, agency, learning, event, app, media, content
featuresarrayRequired features: blog, search, darkmode, forms, cms, auth, media, ecommerce
animationsstringAnimation level: minimal, moderate, high
complexitystringComplexity preference: beginner, intermediate, advanced
colorPreferencestringColor preference: professional, vibrant, creative, minimal, warm, modern
answer_questionnaire1 paramSubmit answers to the template selection questionnaire and receive personalized recommendations. Provide answers as a key-value object wh…

Submit answers to the template selection questionnaire and receive personalized recommendations. Provide answers as a key-value object where keys are question IDs (purpose, colorPreference, animations, features, complexity) and values are your choices.

ParameterTypeDescription
answersobjectQuestionnaire answers as key-value pairs
get_library_docs1 paramGet comprehensive documentation for commonly used libraries in Next.js projects. Available: framer-motion, mdx, headless-ui, next-themes,…

Get comprehensive documentation for commonly used libraries in Next.js projects. Available: framer-motion, mdx, headless-ui, next-themes, clsx, tailwind-plugins. Includes installation, usage examples, patterns, and best practices.

ParameterTypeDescription
library_namestringLibrary name (e.g., 'framer-motion', 'mdx', 'headless-ui', 'next-themes', 'clsx', 'tailwind-plugins')
list_library_docsList all available library documentation files. Includes commonly used libraries like Framer Motion, MDX, Headless UI, next-themes, clsx,…

List all available library documentation files. Includes commonly used libraries like Framer Motion, MDX, Headless UI, next-themes, clsx, and Tailwind plugins. Each provides installation, usage examples, and best practices.

Ready-made

Prompts

  • build-landing-pageComplete workflow to build a professional landing page with Next.js, Tailwind CSS, and Catalyst UI components. Guides you through template selection, component retrieval, and pattern implementation.
  • setup-dashboardComplete workflow to build a dashboard layout with sidebar navigation, header, and responsive design using Catalyst components and abstracted patterns.
  • implement-dark-modeComplete workflow to add dark mode support to your Next.js project using next-themes, Tailwind CSS dark classes, and system preference detection.
  • create-form-with-validationComplete workflow to build a validated form using Catalyst UI components, React Hook Form or native validation, and accessible field patterns.
  • select-templateInteractive workflow to select the best template starter kit for your project, understand architectural decisions, and get implementation guidance.

Readable data

Resources

  • Complete Next.js 15+ DocumentationFull Next.js documentation in LLM-optimized format (~2.5MB, 77k+ lines)
  • Complete Tailwind CSS DocumentationFull Tailwind CSS documentation extracted from official docs (2.1MB)
  • Content SummarySummary of available documentation, components, and patterns