playbooks

home / mcp / reactbits mcp server

ReactBits MCP Server

MCP server providing access to 135+ animated React components from ReactBits.dev (9.2/10 test score)

Installation
Add the following to your MCP client configuration file.

Configuration

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

You use this MCP server to expose ReactBits.dev components to AI assistants. It lets you discover, search, and demo components, then deliver usage examples and code snippets to your assistants in real time.

How to use

Install and run the MCP server on your machine or in your environment, then connect your AI assistant to the exposed MCP endpoints. You can ask your assistant to list components by category, filter by style (CSS or Tailwind), search by name or description, and fetch usage demos for any component. Use the provided commands in your shell or tooling to start the server, then point your MCP client to the running process.

How to install

Prerequisites: you need a recent Node.js installation (Node.js 14+ recommended) and npm or npx available in your environment.

# Install the MCP server 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 project dependency
npm install reactbits-dev-mcp-server

Configuration and usage notes

The MCP server can be run in a local process via the standard npm/npx invocation. For environments like Claude Desktop, VS Code Continue, or Cursor, you typically provide a command and arguments to start the MCP server. The following configurations show common stdio-based setups that you can use to connect these tools to the MCP server.

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

Security and tokens

Using a GitHub token can increase request limits for token-based access. Store tokens in environment variables and avoid committing them. Use placeholders in examples and provide real values only in your secure environment.

Available tools

list_components

List all available ReactBits components with optional filtering by category, style, and limit.

get_component

Get the source code for a specific ReactBits component with optional style preference.

search_components

Search components by query, optionally filtering by category and limiting results.

get_component_demo

Get usage examples and demo code for a specific component.

list_categories

List all available component categories.