youhai-react-bits-mcp
Advanced tools
MCP (Model Context Protocol) server providing access to 90+ animated React components with TypeScript/JavaScript and CSS/Tailwind variants
A Model Context Protocol (MCP) server that provides seamless access to 90+ animated React components through Claude Desktop and other MCP-compatible AI assistants.
Install the MCP server:
npm install -g @youhai/react-bits-mcp-server
Configure Claude Desktop by adding this to your claude_desktop_config.json:
{
"mcpServers": {
"react-bits": {
"command": "npx",
"args": [
"-y",
"@youhai/react-bits-mcp-server"
]
}
}
}
Restart Claude Desktop and start using React Bits components!
search-react-bits-componentsSearch for React Bits components by name, category, or functionality.
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)get-react-bits-componentGet complete code and documentation for a specific component.
Parameters:
componentName (string, required): Name of the componentversion (string, optional): Tech stack version (default: js-css)includeDemo (boolean, optional): Include demo code (default: true)list-react-bits-categoriesList all available component categories and statistics.
Parameters:
detailed (boolean, optional): Include detailed information (default: false)get-react-bits-demoGet demo code and usage examples for a component.
Parameters:
componentName (string, required): Name of the componentversion (string, optional): Tech stack version (default: js-css)get-react-bits-install-guideGet installation and setup guide for a component.
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)preview-react-bits-componentGet component preview information and basic usage.
Parameters:
componentName (string, required): Name of the componentanalyze-frontend-codeAnalyze 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-animationsRecommend 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 structurepriority (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-codeGenerate code to integrate React Bits components into existing frontend code.
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)optimize-frontend-with-animationsComprehensive tool to analyze code and provide complete animation optimization recommendations.
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)Perfect for adding smooth transitions and micro-interactions:
Bring typography to life with engaging effects:
Interactive UI elements ready for production:
Eye-catching background effects to enhance your design:
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.
npm install -g @youhai/react-bits-mcp-server
No installation required - use directly:
{
"mcpServers": {
"react-bits": {
"command": "npx",
"args": ["-y", "@youhai/react-bits-mcp-server"]
}
}
}
git clone https://github.com/your-username/react-bits-mcp.git
cd react-bits-mcp
npm install
npm start
Each component is available in 4 different implementations:
# 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"
# 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"
You can now use natural language requests like:
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.
FAQs
MCP (Model Context Protocol) server providing access to 90+ animated React components with TypeScript/JavaScript and CSS/Tailwind variants
The npm package youhai-react-bits-mcp receives a total of 0 weekly downloads. As such, youhai-react-bits-mcp popularity was classified as not popular.
We found that youhai-react-bits-mcp demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.
Product
Socket Firewall blocks malicious VS Code and Open VSX extensions before install, protecting developers from compromised editor marketplaces.
Research
More than 140 Mastra npm packages were compromised in a supply chain attack that used a typosquatted dependency to deliver a cross-platform infostealer during installation.