AI导哈

ReactBits组件服务器

一个为AI助手提供访问135+个动画React组件的模型上下文协议服务器，支持组件发现、智能搜索、样式选项和演示生成等功能。

  • by ceorkm
  • TypeScript
  • 本地部署
  • 71 星标
  • 更新于
在 GitHub 查看 ceorkm/reactbits-mcp-server

使用说明

ReactBits MCP服务器

一种模型上下文协议（MCP）服务器，为AI助手提供访问 ReactBits.dev components-为创意开发人员提供的135多个动画React组件的集合。

⚠️ 重要提示：一些ReactBits组件（按钮、表单、加载器）目前的实现不完整。看 组件质量状态 在......下面

特性

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

安装

# Install globally
npm install -g reactbits-dev-mcp-server

# Or run directly with npx (no installation required)
npx reactbits-dev-mcp-server

# Or install as a dependency
npm install reactbits-dev-mcp-server

来源

# Clone the repository
git clone https://github.com/yourusername/reactbits-mcp-server
cd reactbits-mcp-server

# Install dependencies
npm install

# Build the project
npm run build

# Run the server
npm start

配置

克劳德桌面

添加到您的Claude Desktop配置中：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %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代码（带Continue扩展名）

添加到您的VS代码设置中：

{
  "continue.server": {
    "mcpServers": {
      "reactbits": {
        "command": "npx",
        "args": ["reactbits-dev-mcp-server"]
      }
    }
  }
}

光标

添加到光标设置或 .cursorrules:

{
  "mcpServers": {
    "reactbits": {
      "command": "npx",
      "args": ["reactbits-dev-mcp-server"],
      "env": {
        "GITHUB_TOKEN": "your_github_token_here"
      }
    }
  }
}

快速开始

# Clone and install
git clone https://github.com/yourusername/reactbits-mcp-server
cd reactbits-mcp-server
npm install

# Build
npm run build

# Test locally
node test-list-components.js

可用工具

list_components

列出所有可用的ReactBits组件，并可选择过滤。

参数：

  • category （可选）：按类别筛选（例如，“动画”、“背景”、“按钮”）
  • style （可选）：按样式方法过滤（“css”、“顺风”、“默认”）
  • limit （可选）：要返回的最大组件数量

例子：

"List all animation components with Tailwind support"

get_component

获取特定ReactBits组件的源代码。

参数：

  • name （必填）：组件名称（例如“飞溅光标”、“像素卡”）
  • style （可选）：首选样式方法（“css”、“顺风”、“默认”）

例子：

"Show me the source code for the splash cursor component"

search_components

按名称或描述搜索ReactBits组件。

参数：

  • query （必填）：搜索查询
  • category （可选）：按类别筛选
  • limit （可选）：最大结果数

例子：

"Find all components related to cards"

get_component_demo

获取ReactBits组件的使用示例和演示代码。

参数：

  • name （必填）：组件名称

例子：

"Show me how to use the glow button component"

list_categories

列出所有可用的组件类别。

例子：

"What categories of components are available?"

使用示例

AI助手

配置后，您可以向AI助手提出以下问题：

  • “显示ReactBits中的所有背景动画组件”
  • “我需要一个发光按钮组件——有什么可用的？”
  • “如何实现粒子背景效果？”
  • “查找支持Tailwind的所有文本动画组件”
  • “给我看看玻璃态射卡组件的代码”

组件类别

ReactBits组件分为以下几类：

  • 动画：动态光标效果和交互式动画
  • 背景：动画和静态背景图案
  • 按钮：具有各种效果的交互式按钮组件
  • 卡片：具有悬停效果和动画的卡片组件
  • 文本动画：动画文本效果和显示
  • 组件：通用UI组件和布局
  • 导航：导航菜单和界面

发展

项目结构

reactbits-mcp-server/
├── src/
│   ├── index.ts           # Main server entry point
│   ├── services/
│   │   └── ReactBitsService.ts   # Component fetching logic
│   ├── types/
│   │   └── index.ts       # TypeScript type definitions
│   └── utils/
│       └── CacheManager.ts # Caching utility
├── dist/                  # Compiled output
├── package.json
├── tsconfig.json
└── README.md

建筑

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

测试

# Run the MCP inspector for debugging
npx @modelcontextprotocol/inspector

GitHub API代币（可选但推荐）

服务器可以在没有GitHub令牌的情况下工作，但每小时只能处理60个请求。使用令牌，您每小时最多可以收到5000个请求。

设置GitHub令牌

  1. 在以下位置创建GitHub个人访问令牌https://github.com/settings/tokens

    • 点击“生成新令牌（经典）”
    • 无需特殊作用域（仅限公共存储库访问）
    • 复制生成的令牌

  2. 将其设置为环境变量：

# Option 1: Export in your shell
export GITHUB_TOKEN=your_token_here

# Option 2: Create a .env file (copy from .env.example)
cp .env.example .env
# Edit .env and add your token

# Option 3: Pass when running the server
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）：模糊文本、倒计时、循环文本等。-完整的帧运动

⚠️ 不完整组件（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 'Add amazing feature')
  4. 推到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

许可证

此项目根据MIT许可证获得许可-有关详细信息，请参阅许可证文件。

致谢

  • ReactBits.dev 令人惊叹的组件系列
  • Anthropic 用于模型上下文协议规范
  • MCP社区的灵感和例子

支持

相关 MCP