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:
``bash
npm install -g @youhai/react-bits-mcp-server
`

2. Configure Claude Desktop by adding this to your claude_desktop_config.json:
`json
{
"mcpServers": {
"react-bits": {
"command": "npx",
"args": [
"-y",
"@youhai/react-bits-mcp-server"
]
}
}
}
`

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

✨ Features

$3

- 🔍 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

$3

- 🤖 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

$3

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)

$3

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)

$3

List all available component categories and statistics.

Parameters:
- detailed (boolean, optional): Include detailed information (default: false)

$3

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)

$3

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)

$3

Get component preview information and basic usage.

Parameters:
- componentName (string, required): Name of the component

$3

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)

$3

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)

$3

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)

$3

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

$3

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

$3

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

$3

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

$3

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

$3


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

$3

No installation required - use directly:
`json
{
"mcpServers": {
"react-bits": {
"command": "npx",
"args": ["-y", "@youhai/react-bits-mcp-server"]
}
}
}
`

$3

`bash
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

$3

`bash

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"
`

$3

`bash

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"
``

$3

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