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手动安装
- 克隆存储库：
git clone https://github.com/CaullenOmdahl/Nextjs-React-Tailwind-Assistant.git
cd Nextjs-React-Tailwind-Assistant- 安装依赖项：
npm install- 构建服务器：
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 “文件”数组。
部署过程：
- 确保内容提交到git：
git add content/
git commit -m "Add documentation and pattern content"- 推送到GitHub：
git push origin main- 部署到Smithery：
- Smithery克隆您的存储库
- 跑
npm install - 跑
npm run build（将内容复制到.smithery/content/) - 部署服务器
备注：服务器使用 process.cwd() + '/content' 查找文件。当部署到Smithery时，存储库中的内容目录应在工作目录中可用。
部署故障排除
如果你在Smithery上出现500错误：
- 验证内容是否在存储库中:
git ls-files content/ | wc -l # Should show files
du -sh content/ # Should show ~5.3M- 检查package.json“files”数组是否包含“content”:
"files": ["dist", "content", "icon.png", "icon.svg"]- 确保生成副本内容:
npm run build
ls -la .smithery/content/ # Should show content directory- 本地测试:
cd .smithery && node index.cjs
# Should start without errors建筑
模块系统
- 仅限ES模块(
"type": "module"在package.json中） - 所有进口使用
.jsTypeScript文件的扩展名 - 没有CommonJS
安全特性
- 使用正则表达式模式（字母数字）进行输入验证+
-_.仅） - 路径净化以防止
../遍历 - 基础路径边界检查
- 文件大小限制（文档3MB，组件1MB）
- 安全错误消息（未暴露内部详细信息）
缓存
- LRU缓存，超时5分钟
- 缓存键使用完全解析的文件路径
- 提高了重复文档查询的性能
许可证
麻省理工学院
鸣谢
- 从专业Next.js模板中抽象出的设计模式
- 来自Tailwind Labs的催化剂组分
- 来自官方Next.js和Tailwind CSS源的文档