MCP (Model Context Protocol) server providing access to 90+ animated React components with TypeScript/JavaScript and CSS/Tailwind variants
npm install @youhai/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.
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!
Parameters:
- query (string, optional): Search querycategory
- (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)
Parameters:
- componentName (string, required): Name of the componentversion
- (string, optional): Tech stack version (default: js-css)includeDemo
- (boolean, optional): Include demo code (default: true)
Parameters:
- detailed (boolean, optional): Include detailed information (default: false)
Parameters:
- componentName (string, required): Name of the componentversion
- (string, optional): Tech stack version (default: js-css)
Parameters:
- componentName (string, required): Name of the componentprojectType
- (string, optional): Project type (vite, nextjs, cra, remix) (default: vite)techStack
- (string, optional): Tech stack (default: js-css)
Parameters:
- componentName (string, required): Name of the component
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)
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 structurepriority
- (string, optional): Priority for recommendations (performance, visual-impact, user-experience, simplicity) (default: user-experience)techStack
- (string, optional): Preferred technology stack (default: js-css)
Parameters:
- originalCode (string, required): Original frontend codecomponentName
- (string, required): React Bits component to integrateintegrationPoints
- (array, optional): Specific points in code where animation should be addedtechStack
- (string, optional): Technology stack to use (default: js-css)
Parameters:
- code (string, required): Frontend code to optimizeuserRequest
- (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)
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.
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"
``This MCP server fetches component data directly from the React Bits GitHub repository, ensuring you always have access to the latest components and updates.
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.
MIT License - see the React Bits repository for component licensing information.
- React Bits Website
- React Bits GitHub
- JSRepo CLI
- Model Context Protocol