Next.js + React + Tailwind Assistant

Next.js+React+顺风助手MCP服务器

您使用React和Tailwind CSS构建现代Next.js应用程序的全面AI伴侣。

特性

📚 完整的文件

• Next.js 15+：应用路由器、服务器组件、服务器操作、路由、数据获取
• 顺风CSS 3+：所有实用类，响应式设计，暗模式，定制
• 智能搜索：有针对性的结果，没有压倒性的背景

🎨 27个Catalyst UI组件

• 生产就绪的TypeScript React组件
• 使用Tailwind CSS和无头UI构建
• 完全可访问、响应迅速且可定制
• 类别：表单、导航、布局、反馈、数据显示

✨ 13种设计模式

摘自11个Next.js专业模板：

视觉效果：渐变、发光、动画、便当网格、装饰性SVG 构件库：按钮、卡片、徽章、输入、化身、警报、工具提示 颜色系统：8种调色板策略（专业、SaaS、粗体、最小、语义、暗模式） 排版：字体系统、字体比例、响应模式 布局：应用程序标题、身份验证页面、侧边栏、覆盖导航 页面：英雄部分、定价表、博客布局

所有模式都包括可访问性、性能和暗模式支持。

安装

通过史密瑟里

npx @smithery/cli install @username/nextjs-react-tailwind-assistant --client claude

手动安装

1. 克隆存储库：

git clone https://github.com/CaullenOmdahl/Nextjs-React-Tailwind-Assistant.git
cd Nextjs-React-Tailwind-Assistant

1. 安装依赖项：

npm install

1. 构建服务器：

npm run build

这将：

• 使用Smithery CLI构建MCP服务器→ .smithery/index.cjs （1.67毫巴）
• 复制内容目录→ .smithery/content/ （5.3 MB）

发展

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

可用工具

• search_nextjs_docs -搜索Next.js文档
• search_tailwind_docs -搜索Tailwind CSS实用程序和概念
• get_nextjs_full_docs -完整的Next.js文档（大）
• get_tailwind_full_docs -完整的顺风文件（大）
• get_catalyst_component -检索生产就绪的组件
• list_catalyst_components -浏览可用组件
• list_patterns -浏览设计模式
• get_pattern -获取详细的模式实现

内容结构

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

部署到Smithery

重要提示：内容目录部署

服务器需要 content/ 目录（5.3 MB）在运行时可用。Smithery从您的GitHub存储库部署，并包含中列出的文件 package.json “文件”数组。

部署过程：

1. 确保内容提交到git：

git add content/
git commit -m "Add documentation and pattern content"

1. 推送到GitHub：

git push origin main

1. 部署到Smithery：

• Smithery克隆您的存储库
• 跑 npm install
• 跑 npm run build （将内容复制到 .smithery/content/)
• 部署服务器

备注：服务器使用 process.cwd() + '/content' 查找文件。当部署到Smithery时，存储库中的内容目录应在工作目录中可用。

部署故障排除

如果你在Smithery上出现500错误：

1. 验证内容是否在存储库中:

git ls-files content/ | wc -l  # Should show files
du -sh content/                # Should show ~5.3M

1. 检查package.json“files”数组是否包含“content”:

"files": ["dist", "content", "icon.png", "icon.svg"]

1. 确保生成副本内容:

npm run build
ls -la .smithery/content/  # Should show content directory

1. 本地测试:

cd .smithery && node index.cjs
# Should start without errors

建筑

模块系统

• 仅限ES模块("type": "module" 在package.json中）
• 所有进口使用 .js TypeScript文件的扩展名
• 没有CommonJS

安全特性

• 使用正则表达式模式（字母数字）进行输入验证+ -_. 仅）
• 路径净化以防止 ../ 遍历
• 基础路径边界检查
• 文件大小限制（文档3MB，组件1MB）
• 安全错误消息（未暴露内部详细信息）

缓存

• LRU缓存，超时5分钟
• 缓存键使用完全解析的文件路径
• 提高了重复文档查询的性能

许可证

麻省理工学院

鸣谢

• 从专业Next.js模板中抽象出的设计模式
• 来自Tailwind Labs的催化剂组分
• 来自官方Next.js和Tailwind CSS源的文档