Reactbits MCP Server

🚀 ReactBits MCP Server

ReactBits MCP Server 是一个模型上下文协议（MCP）服务器，它能让 AI 助手访问 ReactBits.dev 上的组件。ReactBits.dev 为富有创造力的开发者提供了 135 多个动画 React 组件。

⚠️ 重要提示

部分 ReactBits 组件（按钮、表单、加载器）目前的实现尚不完整。请查看下面的组件质量状态。

✨ 主要特性

• 🎨 组件发现：浏览并搜索所有 ReactBits 组件。
• 🔍 智能搜索：可按名称、类别或描述查找组件。
• 💅 样式选项：可获取组件的 CSS 和 Tailwind 版本。
• 📁 类别导航：按类别（动画、背景、按钮等）过滤组件。
• 🚀 快速性能：内置缓存，确保最佳响应时间。
• 📝 演示生成：获取任何组件的使用示例和演示代码。

📦 安装指南

使用 npm 进行全局安装

# 全局安装
npm install -g reactbits-dev-mcp-server

# 或者直接使用 npx 运行（无需安装）
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 的文本动画组件"
• "展示玻璃 morphism 卡片组件的代码"

组件类别

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 次。使用令牌后，每小时最多可进行 5000 次请求。

设置 GitHub 令牌

1. 在 https://github.com/settings/tokens 创建一个 GitHub 个人访问令牌：
   • 点击 "Generate new token (classic)"
   • 无需特殊权限（仅需公共仓库访问权限）
   • 复制生成的令牌
2. 将其设置为环境变量：

# 选项 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）：Aurora、Beams、Particles 等 - 可用于生产的 WebGL 效果
• 动画（9.5/10）：BlobCursor、SplashCursor、Magnet 等 - 专业动画
• 文本动画（9.0/10）：BlurText、CountUp、CircularText 等 - 完整的 Framer Motion

⚠️ 未完成组件（2.0/10）

• 按钮：所有 8 个按钮组件返回占位符代码
• 表单：所有 3 个表单组件未完成
• 加载器：所有 9 个加载器组件未完成

📦 依赖项

MCP 服务器现在包含每个组件的依赖信息：

• framer-motion：文本动画和交互式组件
• gsap：光标动画和高级交互
• three.js / @react-three/fiber：3D 背景和效果
• ogl：WebGL 渲染（Aurora 组件）

🤝 贡献

欢迎贡献代码！请随时提交拉取请求。对于重大更改，请先打开一个问题，讨论你想要进行的更改。

1. 分叉仓库
2. 创建你的功能分支 (git checkout -b feature/amazing-feature)
3. 提交你的更改 (git commit -m '添加惊人的功能')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 打开一个拉取请求

📄 许可证

本项目采用 MIT 许可证 - 详情请参阅 LICENSE 文件。

🙏 致谢

• ReactBits.dev 提供了出色的组件集合
• Anthropic 提供了模型上下文协议规范
• MCP 社区提供了灵感和示例

💪 支持

• 🐛 报告问题
• 💬 讨论