ReactBits へのアクセスで AI アシスタントを提供するモデルコンテキストプロトコル (MCP) サーバー。 dev コンポーネント - 135+ アニメーション React コンポーネントのクリエイティブな開発者のためのコレクション。

⚠️ 重要な注意: いくつかの反応 Bits コンポーネント (buttons, form, loader) は、現在不完全な実装を持っています。 コンポーネントの品質ステータスを参照してください。

##特徴

• インポートコンポーネントのディスカバリー:すべてのReactを閲覧して検索 ビット部品
• ANSI スマート検索:名前、カテゴリ、または説明でコンポーネントを見つける
• スタイルオプション**: コンポーネントのCSSとTailwindバージョンの両方にアクセス
• 📁Category Navigation: 分類(アニメーション、背景、ボタンなど)によるフィルタコンポーネント
• OST Fast Performance:最適な応答時間のための組み込みキャッシュ
• リリースDemo Generation:任意のコンポーネントの使用法例とデモコードを取得する

インストール

ソースから

設定

##Claudeデスクトップ

Claudeデスクトップの設定に追加します。

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json Linux: ~/.config/Claude/claude_desktop_config.json

VS コード (続行拡張付き)

ReactBits MCP Server

A Model Context Protocol (MCP) server that provides AI assistants with access to ReactBits.dev components - a collection of 135+ animated React components for creative developers.

⚠️ Important Note: Some ReactBits components (buttons, forms, loaders) currently have incomplete implementations. See Component Quality Status below.

Features

• 🎨 Component Discovery: Browse and search through all ReactBits components
• 🔍 Smart Search: Find components by name, category, or description
• 💅 Style Options: Access both CSS and Tailwind versions of components
• 📁 Category Navigation: Filter components by categories (animations, backgrounds, buttons, etc.)
• 🚀 Fast Performance: Built-in caching for optimal response times
• 📝 Demo Generation: Get usage examples and demo code for any component

Installation

# 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

From Source

# 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

Configuration

Claude Desktop

Add to your Claude Desktop configuration:

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 (with Continue extension)

Add to your VS Code settings:

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

Cursor

Add to your Cursor settings or .cursorrules:

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

Quick Start

# 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

Available Tools

list_components

List all available ReactBits components with optional filtering.

Parameters:

• category (optional): Filter by category (e.g., “animations”, “backgrounds”, “buttons”)
• style (optional): Filter by styling method (“css”, “tailwind”, “default”)
• limit (optional): Maximum number of components to return

Example: