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 社區提供了靈感和示例

💪 支持

• 🐛 報告問題
• 💬 討論