React Bits MCP Server

A Model Context Protocol (MCP) server that provides AI assistants with access to 99+ React components from React Bits, including animations, backgrounds, and UI elements.

Features

99+ React Components: Access to a comprehensive library of React components
Multiple Categories: Components organized into Animations, Backgrounds, Components, and TextAnimations
Source Code Access: Get the complete source code for any component
Demo Examples: Access demo code showing how to use each component
Component Metadata: Retrieve detailed information about component props and dependencies
Search Functionality: Find components by name or description
TypeScript Support: Full TypeScript definitions included

Installation

Global Installation (Recommended)

npm install -g reactbits-mcp-server

Local Installation

npm install reactbits-mcp-server

Usage

Command Line

# Show version
npx reactbits-mcp-server --version

# Show help
npx reactbits-mcp-server --help

# Start the MCP server
npx reactbits-mcp-server

MCP Tools Available

`list_components`

Get all available React Bits components, optionally filtered by category.

{
  "category": "TextAnimations" // Optional: Animations, Backgrounds, Components, TextAnimations
}

`get_component`

Get the source code for a specific React Bits component.

{
  "componentName": "AnimatedList",
  "category": "Animations" // Optional but recommended for faster lookup
}

`get_component_demo`

Get demo code showing how to use a specific component.

{
  "componentName": "BlobCursor",
  "category": "Backgrounds"
}

`get_component_metadata`

Get metadata about a component including dependencies and props.

{
  "componentName": "TextCursor",
  "category": "TextAnimations"
}

`search_components`

Search for components by name or description.

{
  "query": "animation",
  "category": "Animations" // Optional
}

Component Categories

Animations

Interactive animation components for enhanced user experience.

Backgrounds

Dynamic background effects and visual elements.

Components

General-purpose UI components for common use cases.

TextAnimations

Specialized text animation and typography effects.

Example Components

AnimatedList: Smooth list animations with stagger effects
BlobCursor: Interactive blob cursor that follows mouse movement
TextCursor: Typewriter-style text animation
SplitText: Character-by-character text animations
VariableProximity: Text that responds to cursor proximity
TrueFocus: Focus-based text highlighting effects

Requirements

Node.js >= 18.0.0
React >= 16.8.0 (for hooks support)
TypeScript >= 4.0.0 (optional but recommended)

Dependencies

The components use modern React patterns and may require:

Framer Motion: For advanced animations
Tailwind CSS: For styling (most components)
React Hooks: useState, useEffect, useRef, etc.

Integration with AI Assistants

This MCP server is designed to work with AI assistants that support the Model Context Protocol. When integrated, AI assistants can:

Browse available React components
Retrieve component source code
Get usage examples and demos
Search for components by functionality
Access component metadata and dependencies

Development

Local Development

# Clone the repository
git clone https://github.com/duocreativelabs/react-bits-mcp-server.git

# Install dependencies
npm install

# Start development server
npm start

Building

npm run build

Testing

npm test

Contributing

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

License

MIT License - see LICENSE file for details.

Support

For issues and questions:

GitHub Issues: https://github.com/duocreativelabs/react-bits-mcp-server/issues
Documentation: https://github.com/duocreativelabs/react-bits-mcp-server#readme

Version History

1.2.6: Fixed path resolution issues on Windows
1.2.5: Corrected version display and package.json references
1.2.4: Fixed base path calculation for component discovery
1.2.3: Added src/ directory to published package
1.0.0: Initial release with basic MCP functionality