Skip to main content
Glama
ceorkm

ReactBits MCP Server

by ceorkm
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Remote

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

Related MCP server: Enhanced Reablocks MCP Server

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:

"List all animation components with Tailwind support"

get_component

Get the source code for a specific ReactBits component.

Parameters:

  • name (required): Name of the component (e.g., "splash-cursor", "pixel-card")

  • style (optional): Preferred styling method ("css", "tailwind", "default")

Example:

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

search_components

Search for ReactBits components by name or description.

Parameters:

  • query (required): Search query

  • category (optional): Filter by category

  • limit (optional): Maximum number of results

Example:

"Find all components related to cards"

get_component_demo

Get usage example and demo code for a ReactBits component.

Parameters:

  • name (required): Name of the component

Example:

"Show me how to use the glow button component"

list_categories

List all available component categories.

Example:

"What categories of components are available?"

Usage Examples

With AI Assistants

Once configured, you can ask your AI assistant questions like:

  • "Show me all the background animation components from ReactBits"

  • "I need a glowing button component - what's available?"

  • "How do I implement the particle background effect?"

  • "Find all text animation components that support Tailwind"

  • "Show me the code for the glass morphism card component"

Component Categories

ReactBits components are organized into the following categories:

  • Animations: Dynamic cursor effects and interactive animations

  • Backgrounds: Animated and static background patterns

  • Buttons: Interactive button components with various effects

  • Cards: Card components with hover effects and animations

  • Text Animations: Animated text effects and reveals

  • Components: General UI components and layouts

  • Navigation: Navigation menus and interfaces

Development

Project Structure

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

Building

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

Testing

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

GitHub API Token (Optional but Recommended)

The server can work without a GitHub token but will be limited to 60 requests per hour. With a token, you get up to 5,000 requests per hour.

Setting up a GitHub Token

  1. Create a GitHub personal access token at https://github.com/settings/tokens

    • Click "Generate new token (classic)"

    • No special scopes needed (public repository access only)

    • Copy the generated token

  2. Set it as an environment variable:

# 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

⚠️ Security Note: Never commit your GitHub token to version control. Always use environment variables.

Component Quality Status

Based on comprehensive testing, here's the current quality status of ReactBits components:

✅ Excellent Quality (9.0-10/10)

  • Backgrounds (9.8/10): Aurora, Beams, Particles, etc. - Production-ready WebGL effects

  • Animations (9.5/10): BlobCursor, SplashCursor, Magnet, etc. - Professional animations

  • Text Animations (9.0/10): BlurText, CountUp, CircularText, etc. - Complete Framer Motion

⚠️ Incomplete Components (2.0/10)

  • Buttons: All 8 button components return placeholder code

  • Forms: All 3 form components are incomplete

  • Loaders: All 9 loader components are incomplete

📦 Dependencies

The MCP server now includes dependency information for each component:

  • framer-motion: Text animations and interactive components

  • gsap: Cursor animations and advanced interactions

  • three.js / @react-three/fiber: 3D backgrounds and effects

  • ogl: WebGL rendering (Aurora component)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

  1. Fork the repository

  2. Create your feature branch (git checkout -b feature/amazing-feature)

  3. Commit your changes (git commit -m 'Add amazing feature')

  4. Push to the branch (git push origin feature/amazing-feature)

  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

  • ReactBits.dev for the amazing component collection

  • Anthropic for the Model Context Protocol specification

  • The MCP community for inspiration and examples

Support

Available Tools

5 tools
get_componentA

Get the source code for a specific ReactBits component

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesName of the component (e.g., "splash-cursor", "pixel-card")
styleNoPreferred styling method (defaults to available)

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It states 'Get' indicating a read operation, which is minimally transparent. However, it does not disclose any potential limitations (e.g., authentication, rate limits, or error behavior when a component name is invalid).

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence with no wasted words. It is front-loaded with the key action and resource.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no output schema, the description does not explain what the return value looks like (e.g., plain text, JSON). For a simple source retrieval, this is acceptable but not fully complete. It also doesn't address cases like missing components.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema covers 100% of parameters with descriptions. The description adds no additional meaning beyond what the schema already provides, so baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('Get') and resource ('source code for a specific ReactBits component'), clearly distinguishing it from siblings like get_component_demo (which likely returns a demo) and list_components (which lists components).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance on when to use this tool versus alternatives. For example, it doesn't mention that this tool is for source code, while get_component_demo is for a demo or that list_components is for browsing. The description lacks exclusions or context.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_component_demoA

Get usage example and demo code for a ReactBits component

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesName of the component

TDQS

A3.5/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must carry the full burden. It only states what is returned, without disclosing behaviors such as error handling, performance implications, or whether the result is a code snippet or a full file.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence that is front-loaded with the action and resource. It contains no fluff and is appropriately sized for the tool's simplicity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool has only one parameter and no output schema, the description is minimally adequate. However, it lacks behavioral context (e.g., what happens if the component does not exist) and does not describe the nature of the returned demo code (e.g., format, size).

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has one parameter 'name' with a clear description. Schema coverage is 100%, so the description adds no additional meaning beyond what the schema provides. Baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'Get', the resource 'usage example and demo code', and the domain 'ReactBits component'. It distinguishes from siblings like get_component (which likely returns the component itself) and list categories/components.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage when needing an example or demo, but does not provide explicit guidance on when to use or when not to use this tool versus alternatives like get_component or search_components.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_categoriesA

List all available component categories

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A4.2/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

The description indicates a read operation ('List all'), but no annotations provide safety cues. Lacks details on pagination or return format, but acceptable for a simple list.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single sentence, four words, no wasted verbiage.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a zero-parameter list tool, the description is sufficient. Lacks output schema details, but not critical given simplicity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

No parameters exist; schema coverage is 100%. Baseline 4 applies as description adds no param info beyond schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Clearly states 'List all available component categories', with a specific verb and resource. Sibling tools are about components, making this distinct.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No explicit when-to-use or alternatives, but the tool is self-explanatory and has no sibling for categories, so context is implied.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_componentsA

List all available ReactBits components with optional filtering

ParametersJSON Schema
NameRequiredDescriptionDefault
categoryNoFilter by category (e.g., animations, backgrounds, buttons)
styleNoFilter by styling method
limitNoMaximum number of components to return

TDQS

A3.5/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden. It only says 'list all... with optional filtering', lacking details on whether the operation is read-only, how the 'limit' parameter affects results, or what the return format is. There is a subtle inconsistency: 'list all' suggests unbounded results, but the 'limit' parameter contradicts this.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single concise sentence of 8 words, front-loaded with the key action and resource. No unnecessary words or repetition.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple listing tool, the description covers the basic purpose. However, it lacks return format details and does not explain the behavior of the 'limit' parameter (e.g., pagination or truncation). The absence of output schema increases the need for such info, which is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so each parameter already has a description. The tool description adds only 'optional filtering', which does not enhance meaning beyond what the schema provides. Baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description 'List all available ReactBits components with optional filtering' clearly specifies the action (list), the resource (ReactBits components), and the optional filtering capability. This distinguishes it from siblings like 'get_component' (details), 'list_categories' (categories only), and 'search_components' (text search).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description states 'optional filtering' but does not explicitly guide when to use this tool versus alternatives like 'search_components'. It implies listing all or by category/style, but no exclusion criteria or context for choosing are provided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

search_componentsB

Search for ReactBits components by name or description

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query
categoryNoFilter by category
limitNoMaximum number of results

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It fails to disclose behavioral traits such as read-only nature, result structure, pagination, or any side effects. The minimal description does not compensate for the lack of annotations.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence, which is concise but lacks any structural elements like sections, bullet points, or examples. It is efficient but could be better organized.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the absence of an output schema, the description should explain what is returned (e.g., list of components, count, etc.). It does not, leaving the agent without sufficient context about the tool's output or behavior.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so each parameter has a description. The tool description adds context that the query searches by 'name or description', but does not provide examples or format expectations. Thus it adds marginal value over the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb 'Search' and the resource 'ReactBits components', with a specific scope (by name or description). This distinguishes it from sibling tools like get_component (single component retrieval) and list_components (full listing).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for searching rather than listing or getting a single component, but does not explicitly state when to choose search over list_components or how search differs from them. No alternatives or when-not conditions are mentioned.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

A3.9/5.0
Disambiguation5/5

Each tool has a clear, distinct purpose: retrieving source code, demo code, listing categories, listing components, and searching. No overlap or ambiguity.

Naming Consistency5/5

All tools follow a consistent verb_noun pattern in snake_case (e.g., get_component, list_categories). No naming style conflicts.

Tool Count5/5

Five tools is well-scoped for a component library server, providing essential operations without unnecessary bloat.

Completeness5/5

The set covers all read operations expected for a component library: listing categories, components, retrieving source and demos, plus search. No obvious gaps.

Maintenance

ActivityInactive
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ceorkm/reactbits-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server