react-bits-mcp-server-v2

duolabstech/react-bits-mcp-server-v2

3.2

If you are the rightful owner of react-bits-mcp-server-v2 and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The React Bits MCP Server provides access to a collection of modern, animated React components through a Model Context Protocol server.

Tools
3
Resources
0
Prompts
0

React Bits MCP Server

A Model Context Protocol (MCP) server that provides access to React Bits components - a collection of modern, animated React components.

Features

  • List Components: Browse all available React Bits components by category
  • Get Component: Retrieve detailed information and code for specific components
  • Search Components: Find components by name or description
  • Real-time Access: Direct access to the React Bits repository structure

Categories

  • Animations: Interactive animations and effects (BlobCursor, ClickSpark, Magnet, etc.)
  • Backgrounds: Animated background components (Aurora, Galaxy, Particles, etc.)
  • Components: UI components and layouts (AnimatedList, Carousel, Dock, etc.)
  • Text Animations: Text-based animation effects

Installation

Método Recomendado: Usar con npx (Sin instalación)

¡No necesitas instalar nada! Simplemente usa la configuración con npx en Claude Desktop:

{
  "mcpServers": {
    "react-bits": {
      "command": "npx",
      "args": ["react-bits-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_tu_token_opcional"
      }
    }
  }
}

Métodos Alternativos

Instalación Global:

npm install -g react-bits-mcp-server

Instalación Local:

npm install react-bits-mcp-server

Solución de Problemas

Si encuentras problemas de instalación, consulta nuestra .

Usage

The server provides three main tools:

1. List Components

{
  "name": "list_components",
  "arguments": {
    "category": "animations" // or "backgrounds", "components", "text-animations", "all"
  }
}

2. Get Component

{
  "name": "get_component",
  "arguments": {
    "name": "BlobCursor",
    "category": "animations" // optional
  }
}

3. Search Components

{
  "name": "search_components",
  "arguments": {
    "query": "cursor",
    "category": "animations" // optional
  }
}

Development

# Install dependencies
npm install

# Build the project
npm run build

# Run the server
npm start

# Development mode with watch
npm run dev

Configuration

Para Instalación Local

Add to your Claude Desktop configuration file:

{
  "mcpServers": {
    "react-bits": {
      "command": "node",
      "args": ["./node_modules/react-bits-mcp-server/dist/index.js"],
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

Para Instalación Global (Recomendado)

{
  "mcpServers": {
    "react-bits": {
      "command": "npx",
      "args": ["react-bits-mcp-server"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_tu_token_opcional"
      }
    }
  }
}

Component Structure

Each component includes:

  • Name: Component identifier
  • Category: Component category
  • Description: Detailed description of functionality
  • Code: Complete JSX/React code
  • CSS: Associated CSS styles (if any)
  • Dependencies: Required npm packages
  • Props: Component properties and types

Examples

Popular Components

  • BlobCursor: Dynamic blob that follows mouse movement
  • Aurora: Beautiful aurora background effect
  • AnimatedList: List with smooth animations
  • Dock: macOS-style dock component
  • Galaxy: Animated galaxy background
  • Particles: Particle system background

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Related