反应比特-MCP服务器
项目介绍
ReactBits MCP Server
一个模型上下文协议（MCP）服务器，提供AI助手访问ReactBits.dev组件的能力——这是一个包含135多个动画React组件的集合，适用于创意开发者。
⚠️ 重要提示：一些ReactBits组件（按钮、表单、加载器）当前实现不完整。请参阅下方的组件质量状态。
功能
- 🎨 组件发现：浏览并搜索所有ReactBits组件
- 🔍 智能搜索：通过名称、类别或描述查找组件
- 💅 样式选项：访问组件的CSS和Tailwind版本
- 📁 分类导航：按类别筛选组件（动画、背景、按钮等）
- 🚀 快速性能：内置缓存以获得最佳响应时间
- 📝 示例生成：获取任何组件的使用示例和示例代码
安装
# 全局安装
npm install -g reactbits-dev-mcp-server
# 或直接运行（无需安装）
npx reactbits-dev-mcp-server
# 或作为依赖项安装
npm install reactbits-dev-mcp-server
从源码安装
# 克隆仓库
git clone https://github.com/yourusername/reactbits-mcp-server
cd reactbits-mcp-server
# 安装依赖
npm install
# 构建项目
npm run build
# 运行服务器
npm start
配置
Claude Desktop
添加到您的Claude Desktop配置中：
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json
{
"mcpServers": {
"reactbits": {
"command": "npx",
"args": ["reactbits-dev-mcp-server"],
"env": {
"GITHUB_TOKEN": "your_github_token_here"
}
}
}
}
VS Code（带有Continue扩展）
添加到您的VS Code设置中：
{
"continue.server": {
"mcpServers": {
"reactbits": {
"command": "npx",
"args": ["reactbits-dev-mcp-server"]
}
}
}
}
Cursor
添加到您的Cursor设置或.cursorrules中：
{
"mcpServers": {
"reactbits": {
"command": "npx",
"args": ["reactbits-dev-mcp-server"],
"env": {
"GITHUB_TOKEN": "your_github_token_here"
}
}
}
}
快速开始
# 克隆并安装
git clone https://github.com/yourusername/reactbits-mcp-server
cd reactbits-mcp-server
npm install
# 构建
npm run build
# 本地测试
node test-list-components.js
可用工具
list_components
列出所有可用的ReactBits组件，并可选地进行过滤。
参数：
category（可选）：按类别过滤（例如，“animations”，“backgrounds”，“buttons”）style（可选）：按样式方法过滤（“css”，“tailwind”，“default”）limit（可选）：返回的最大组件数量
示例：
"列出所有支持Tailwind的动画组件"
get_component
获取特定ReactBits组件的源代码。
参数：
name（必需）：组件名称（例如，“splash-cursor”，“pixel-card”）style（可选）：首选样式方法（“css”，“tailwind”，“default”）
示例：
"显示splash cursor组件的源代码"
search_components
根据名称或描述搜索ReactBits组件。
参数：
query（必需）：搜索查询category（可选）：按类别过滤limit（可选）：最大结果数量
示例：
"找到所有与卡片相关的组件"
get_component_demo
获取ReactBits组件的使用示例和示例代码。
参数：
name（必需）：组件名称
示例：
"展示如何使用glow button组件"
list_categories
列出所有可用的组件类别。
示例：
"有哪些类别的组件可用？"
使用示例
与AI助手一起使用
一旦配置好，您可以向您的AI助手提问如下问题：
- "展示ReactBits中的所有背景动画组件"
- "我需要一个发光按钮组件，有什么可用的吗？"
- "如何实现粒子背景效果？"
- "找到所有支持Tailwind的文本动画组件"
- "展示glass morphism card组件的代码"
组件类别
ReactBits组件被组织成以下类别：
- 动画：动态光标效果和交互式动画
- 背景：动画和静态背景图案
- 按钮：具有各种效果的交互式按钮组件
- 卡片：具有悬停效果和动画的卡片组件
- 文本动画：动画文本效果和揭示
- 组件：通用UI组件和布局
- 导航：导航菜单和界面
开发
项目结构
reactbits-mcp-server/
├── src/
│ ├── index.ts # 主服务器入口点
│ ├── services/
│ │ └── ReactBitsService.ts # 组件获取逻辑
│ ├── types/
│ │ └── index.ts # TypeScript类型定义
│ └── utils/
│ └── CacheManager.ts # 缓存实用程序
├── dist/ # 编译输出
├── package.json
├── tsconfig.json
└── README.md
构建
# 安装依赖
npm install
# 构建项目
npm run build
# 在开发模式下运行
npm run dev
测试
# 运行MCP检查器用于调试
npx @modelcontextprotocol/inspector
GitHub API令牌（可选但推荐）
该服务器可以在没有GitHub令牌的情况下工作，但每小时仅限60次请求。有了令牌，您每小时可以有高达5,000次请求。
设置GitHub令牌
-
在https://github.com/settings/tokens创建一个GitHub个人访问令牌
- 单击“生成新令牌（经典）”
- 不需要特殊范围（仅公共存储库访问）
- 复制生成的令牌
-
将其设置为环境变量：
# 选项1：在您的shell中导出
export GITHUB_TOKEN=your_token_here
# 选项2：创建一个.env文件（复制自.env.example）
cp .env.example .env
# 编辑.env并添加您的令牌
# 选项3：运行服务器时传递
GITHUB_TOKEN=your_token_here npx reactbits-dev-mcp-server
⚠️ 安全提示：永远不要将GitHub令牌提交到版本控制中。始终使用环境变量。
组件质量状态
基于全面测试，以下是ReactBits组件的当前质量状态：
✅ 优秀质量（9.0-10/10）
- 背景（9.8/10）：极光、光束、粒子等——生产就绪的WebGL效果
- 动画（9.5/10）：BlobCursor、SplashCursor、磁铁等——专业动画
- 文本动画（9.0/10）：模糊文本、计数向上、圆形文本等——完整的Framer Motion
⚠️ 不完整组件（2.0/10）
- 按钮：所有8个按钮组件返回占位符代码
- 表单：所有3个表单组件不完整
- 加载器：所有9个加载器组件不完整
📦 依赖项
MCP服务器现在包括每个组件的依赖信息：
framer-motion：文本动画和交互式组件gsap：光标动画和高级交互three.js/@react-three/fiber：3D背景和效果ogl：WebGL渲染（极光组件）
贡献
欢迎贡献！请随时提交Pull Request。对于重大更改，请先打开一个问题来讨论您想要更改的内容。
- 分叉仓库
- 创建您的功能分支（
git checkout -b feature/amazing-feature） - 提交您的更改（
git commit -m '添加惊人的功能'） - 推送到分支（
git push origin feature/amazing-feature） - 打开Pull Request
许可证
本项目采用MIT许可证——详情见LICENSE文件。
致谢
- ReactBits.dev 提供了令人惊叹的组件集合
- Anthropic 提供了模型上下文协议规范
- MCP社区提供了灵感和示例