React Bits MCP Server

A Model Context Protocol (MCP) server that provides seamless access to 90+ animated React components through Claude Desktop and other MCP-compatible AI assistants.

🚀 Quick Start with Claude Desktop

1. Install the MCP server:

   npm install -g @youhai/react-bits-mcp-server

2. Configure Claude Desktop by adding this to your claude_desktop_config.json:

   {
     "mcpServers": {
       "react-bits": {
         "command": "npx",
         "args": [
           "-y", 
           "@youhai/react-bits-mcp-server"
         ]
       }
     }
   }

3. Restart Claude Desktop and start using React Bits components!

✨ Features

Core Component Access

• 🔍 Smart Search - Find components by name, category, or functionality with fuzzy matching
• 📦 Complete Code - Get full component code, CSS, and demo files
• 📋 Category Browser - Explore 4 component categories with detailed statistics
• 🎬 Live Demos - Interactive demo code and usage examples
• ⚡ Installation Guides - Tailored setup instructions for Vite, Next.js, CRA
• 👀 Quick Previews - Component overviews and feature highlights

AI-Enhanced Development

• 🤖 Code Analysis - Analyze your frontend and identify animation opportunities
• 💡 Natural Language - Request components like "add beautiful loading animations"
• 🔧 Auto Integration - Generate code that integrates seamlessly with your project
• 🎯 Smart Optimization - Complete frontend animation enhancement with implementation plans

Available Tools

search-react-bits-components

Search for React Bits components by name, category, or functionality.

Parameters:

• query (string, optional): Search query
• category (string, optional): Filter by category (animations, text-animations, components, backgrounds)
• techStack (string, optional): Preferred tech stack (js-css, js-tailwind, ts-css, ts-tailwind)
• limit (number, optional): Maximum results (default: 10)

get-react-bits-component

Get complete code and documentation for a specific component.

Parameters:

• componentName (string, required): Name of the component
• version (string, optional): Tech stack version (default: js-css)
• includeDemo (boolean, optional): Include demo code (default: true)

list-react-bits-categories

List all available component categories and statistics.

Parameters:

• detailed (boolean, optional): Include detailed information (default: false)

get-react-bits-demo

Get demo code and usage examples for a component.

Parameters:

• componentName (string, required): Name of the component
• version (string, optional): Tech stack version (default: js-css)

get-react-bits-install-guide

Get installation and setup guide for a component.

Parameters:

• componentName (string, required): Name of the component
• projectType (string, optional): Project type (vite, nextjs, cra, remix) (default: vite)
• techStack (string, optional): Tech stack (default: js-css)

preview-react-bits-component

Get component preview information and basic usage.

Parameters:

• componentName (string, required): Name of the component

analyze-frontend-code

Analyze frontend code structure and identify opportunities for animation enhancements.

Parameters:

• code (string, required): Frontend code to analyze (HTML, CSS, JSX, etc.)
• framework (string, optional): Frontend framework being used (react, vue, angular, vanilla) (default: react)
• codeType (string, optional): Type of code being analyzed (component, page, layout, partial) (default: component)

recommend-animations

Recommend suitable animation components based on user requirements and code context.

Parameters:

• requirement (string, required): User requirement in natural language (e.g., "add loading animation", "make cards more interactive")
• codeContext (string, optional): Context about the code structure
• priority (string, optional): Priority for recommendations (performance, visual-impact, user-experience, simplicity) (default: user-experience)
• techStack (string, optional): Preferred technology stack (default: js-css)

generate-integration-code

Generate code to integrate React Bits components into existing frontend code.

Parameters:

• originalCode (string, required): Original frontend code
• componentName (string, required): React Bits component to integrate
• integrationPoints (array, optional): Specific points in code where animation should be added
• techStack (string, optional): Technology stack to use (default: js-css)

optimize-frontend-with-animations

Comprehensive tool to analyze code and provide complete animation optimization recommendations.

Parameters:

• code (string, required): Frontend code to optimize
• userRequest (string, required): User request in natural language (e.g., "make my frontend more engaging", "add loading animations")
• framework (string, optional): Frontend framework (default: react)
• techStack (string, optional): Preferred technology stack (default: js-css)
• budget (string, optional): Animation complexity budget (minimal, moderate, extensive) (default: moderate)

📋 Component Library

🎬 Animations (18 components)

Perfect for adding smooth transitions and micro-interactions:

• Magnet - Magnetic hover effects for interactive elements
• Click Spark - Satisfying click interaction animations
• Star Border - Animated star border effects
• Elastic Slider - Smooth elastic sliding animations
• Dock - MacOS-style dock with bounce animations

✨ Text Animations (22 components)

Bring typography to life with engaging effects:

• Split Text - Character-by-character reveal animations
• Blur Text - Text blur and focus transition effects
• Shiny Text - Shimmer and shine gradient effects
• Type Writer - Classic typewriter animation effects
• Text Scramble - Matrix-style character scrambling

🧩 Components (29 components)

Interactive UI elements ready for production:

• Spotlight Card - Interactive cards with dynamic spotlight effects
• Magic Bento - Grid layouts with elegant hover animations
• Rolling Gallery - Smooth infinite carousel animations
• Infinite Scroll - Seamless infinite scrolling components
• Stack - Layered card interactions and transitions

🌈 Backgrounds (21 components)

Eye-catching background effects to enhance your design:

• Aurora - Beautiful northern lights animated backgrounds
• Particles - Interactive particle system backgrounds
• Liquid Chrome - Flowing metallic liquid effects
• Lightning - Electric bolt and storm animations
• Gradient - Dynamic animated gradient backgrounds

🔧 Tech Stack Options

Each component is available in 4 optimized variants:

| Tech Stack | Description | File Extension | CSS Included | |------------|-------------|----------------|--------------| | js-css | JavaScript + CSS | .jsx | ✅ | | js-tailwind | JavaScript + Tailwind | .jsx | ❌ | | ts-css | TypeScript + CSS | .tsx | ✅ | | ts-tailwind | TypeScript + Tailwind | .tsx | ❌ |

Recommendation: Use ts-tailwind for the best developer experience with type safety and utility-first styling.

📦 Installation Options

Option 1: Global NPM Install (Recommended)

npm install -g @youhai/react-bits-mcp-server

Option 2: Direct NPX Usage

No installation required - use directly:

{
  "mcpServers": {
    "react-bits": {
      "command": "npx",
      "args": ["-y", "@youhai/react-bits-mcp-server"]
    }
  }
}

Option 3: Local Development

git clone https://github.com/your-username/react-bits-mcp.git
cd react-bits-mcp
npm install
npm start

Tech Stack Versions

Each component is available in 4 different implementations:

• js-css: JavaScript + CSS (vanilla styling)
• js-tailwind: JavaScript + Tailwind CSS
• ts-css: TypeScript + CSS (with type safety)
• ts-tailwind: TypeScript + Tailwind CSS (recommended for production)

Example Usage

Basic Component Operations

# Search for card components
search-react-bits-components --query "card" --category "components"

# Get a specific component
get-react-bits-component --componentName "spotlight-card" --version "ts-tailwind"

# Get installation guide
get-react-bits-install-guide --componentName "stack" --projectType "nextjs" --techStack "ts-tailwind"

# Preview a component
preview-react-bits-component --componentName "dock"

AI-Powered Optimization

# Analyze your frontend code
analyze-frontend-code --code "your-react-component-code" --framework "react"

# Get recommendations from natural language
recommend-animations --requirement "帮我添加好看的加载动画效果" --techStack "ts-tailwind"

# Generate integration code
generate-integration-code --originalCode "your-code" --componentName "orb" --techStack "js-tailwind"

# Complete optimization (recommended)
optimize-frontend-with-animations --code "your-frontend-code" --userRequest "帮我给前端添加好看合适的动画效果" --budget "moderate"

Natural Language Examples

You can now use natural language requests like:

• "帮我给前端添加好看合适的动画效果"
• "帮我添加一个好看的加载动画效果"
• "Make my cards more interactive with hover effects"
• "Add smooth transitions to my navigation menu"
• "I need engaging background animations for my landing page"

Data Source

This MCP server fetches component data directly from the React Bits GitHub repository, ensuring you always have access to the latest components and updates.

Contributing

This MCP server is designed to work with the React Bits component library. For component-related issues or feature requests, please visit the React Bits repository.

For MCP server issues, please create an issue in this repository.

License

MIT License - see the React Bits repository for component licensing information.

Related Links

• React Bits Website
• React Bits GitHub
• JSRepo CLI
• Model Context Protocol