快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

命令预览

docker run -d --name reactbits-mcp \

详细介绍

ReactBits MCP服务器

](https://www.npmjs.com/package/@johncarter09/reactbits-mcp-server) ](https://www.npmjs.com/package/@johncarter09/reactbits-mcp-server) ](https://github.com/JohnCarter09/ReactBits_MCP/issues) ![License: MIT](https://opensource.org/licenses/MIT)

生产准备就绪模型上下文协议用于浏览和检索React组件的服务器 ReactBits.dev 具有全面的TypeScript支持、真正的数据集成和高级部署功能。

🚀 特性

核心MCP能力

🔧 5个MCP工具：搜索、浏览和检索完全符合MCP协议的React组件
📊 真实数据集成：来自ReactBits.dev的实时组件数据，具有自动抓取功能
⚡ 性能优化：高级缓存、速率限制和内存管理
🛡️ 生产就绪：健康监控、指标收集和错误处理

开发者体验

📝 TypeScript优先：具有全面类型定义的全类型安全
🐳 Docker支持：多阶段构建、开发/生产配置
🔄 CI/CD管道：使用GitHub Actions进行自动化测试、构建和发布
📈 监控：内置健康检查、Prometheus指标和Grafana仪表板

部署选项

📦 NPM包：全球或本地安装 npm install -g @johncarter09/reactbits-mcp-server
🐳 Docker镜像：多架构支持（AMD64、ARM64），具有安全强化功能
☁️ 云就绪：AWS、GCP、Azure和Kubernetes的生产级配置

📋 快速开始

Docker（推荐）

# Run with Docker
docker run -d --name reactbits-mcp \
  -v $(pwd)/data:/app/data \
  reactbits/mcp-server:latest

# Or use Docker Compose
curl -O https://raw.githubusercontent.com/DavidHDev/react-bits/main/mcp-server/docker-compose.yml
docker-compose up -d

NPM安装

# Install globally
npm install -g @johncarter09/reactbits-mcp-server

# Run the server
reactbits-mcp-server

# Or use with Claude Desktop
# Add to your MCP configuration

Claude桌面集成

添加到您的Claude Desktop MCP配置中：

{
  "mcpServers": {
    "reactbits": {
      "command": "reactbits-mcp-server",
      "args": []
    }
  }
}

🛠 可用工具

1. `search_components`

搜索具有高级过滤功能的React组件：

// Search for animated buttons
{
  "query": "animated button",
  "category": "buttons",
  "difficulty": "beginner",
  "limit": 10
}

2. `get_component`

使用完整源代码检索详细的组件信息：

{
  "id": "animated-button-1",
  "includeCode": true,
  "includeExamples": true
}

3. `list_categories`

获取所有可用的组件类别：

{} // No parameters needed

4. `browse_category`

浏览特定类别中的组件：

{
  "categoryId": "buttons",
  "limit": 20,
  "offset": 0
}

5. `get_random_component`

获取一个随机组件以获得灵感：

{} // No parameters needed

📊 真实数据集成

该服务器包括与ReactBits.dev的实时数据集成：

25+真实组件：从ReactBits.dev自动抓取和索引
实时更新：计划数据刷新以保持组件最新
元数据：完整的组件分析，包括依赖关系、复杂性和样式
代码示例：使用最佳实践完成TypeScript/React源代码

组件类别

🎨 UI组件：核心界面元素
🎯 动画：平滑过渡和效果
🧭 导航：标题、侧栏和布局实用程序
💬 反馈：烤面包机、工具提示和通知
🔘 按钮：各种风格的互动元素

🏗 建筑

生产级特征

缓存系统：支持TTL的多级LRU缓存
速率限制：可配置的请求限制和客户端跟踪
错误处理：全面的错误恢复和日志记录
健康监测：内置健康检查和指标收集
安全：输入验证、净化和安全默认值

性能优化

内存管理：可配置的限制和垃圾收集
请求批处理：高效的数据加载和处理
压缩：优化数据结构和传输
延迟加载：按需获取组件代码

🚀 部署

发展

git clone https://github.com/DavidHDev/react-bits.git
cd react-bits/mcp-server
npm install
npm run dev

使用Docker进行生产

# Production deployment
docker-compose -f docker-compose.prod.yml up -d

# With monitoring stack
docker-compose --profile monitoring up -d

# Access Grafana dashboard
open http://localhost:3001

Kubernetes

# Deploy to Kubernetes
kubectl apply -f k8s/

# Check deployment
kubectl get pods -l app=reactbits-mcp-server

📈 监测和可观察性

健康检查

# Basic health check
curl http://localhost:3000/health

# Detailed metrics
curl http://localhost:3000/health?detailed=true

# Prometheus metrics
curl http://localhost:3000/metrics

Grafana仪表板

预配置的仪表板包括：

请求率和响应时间
内存和CPU使用率
缓存命中率和性能
错误率和健康状况
组件数据新鲜度

⚙️ 配置

环境变量

NODE_ENV=production
LOG_LEVEL=info
ENABLE_METRICS=true
CACHE_EXPIRY=3600000
MAX_REQUESTS_PER_MINUTE=1000

配置文件

{
  "server": {
    "logLevel": "info",
    "enableMetrics": true,
    "maxRequestsPerMinute": 1000,
    "cacheExpiry": 3600000
  },
  "tools": {
    "search_components": {
      "enabled": true,
      "cacheExpiry": 300000
    }
  }
}

🔒 安全

安全功能

输入验证：所有输入的JSON模式验证
速率限制：可配置的请求限制
错误清理：无数据泄漏的安全错误消息
集装箱安全：非root用户，只读文件系统
依赖关系扫描：自动漏洞检查

安全最佳实践

以最低权限运行
对敏感配置使用机密管理
启用安全标头和CORS
通过自动化CI/CD定期进行安全更新

🧪 测试

测试套件

# Run all tests
npm test

# Type checking
npm run typecheck

# CI test suite
npm run test:ci

# Docker tests
npm run docker:test

MCP协议合规性

完整的MCP规范合规性测试
工具模式验证
错误处理验证
性能基准测试

📚 文档

部署指导：全面的部署说明
架构指南：系统设计和架构
api参考：完整的API文档
配置指南：配置选项和示例

🤝 贡献

我们欢迎捐款！请查看我们的贡献指南了解详情。

开发设置

# Fork and clone
git clone https://github.com/your-username/react-bits.git
cd react-bits/mcp-server

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

📝 许可证

MIT© ReactBits团队

🙏 致谢

模型上下文协议通过Anthropic
ReactBits.dev 组件库。全部归功于ReactBits的创建者
TypeScript和Node.js社区

______________________________________________________________________

🔗 链接

网站: https://reactbits.dev
文档: https://docs.reactbits.dev
NPM包:
Docker Hub:
GitHub:

______________________________________________________________________

*内置于❤️ 约翰·卡特*

目录标签

生产就绪JavaScriptClaudeReact组件本地部署TypeScript支持实时数据MCP协议

支持客户端

Claude DesktopClaude

接入字段

传输方式（transport，传输协议）

stdio

鉴权方式（authType，认证方式）

none

运行时（runtime，运行环境）

Docker

工具数量（toolCount，工具数）

5

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

stdionone部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

来源信息

MCP World

mcpworld.com

/detail/b1fbde920d515539fd270f0834db9044

一个生产就绪的Model Context Protocol服务器，用于从ReactBits.dev浏览和检索React组件，提供全面的TypeScript支持、实时数据集成和高级部署能力。

继续浏览同类 MCP

更多AI代理 MCP（18,706）返回 MCP 目录

上一个 MCP

React Analyzer MCP (Azer)

全面解析React Analyzer MCPMCP Server的核心功能、安装配置和实用案例。作为顶级Model Context Protocol服务器，React Analyzer MCP能让AI助手访问实时数据、执行操作，为您提供更智能的工作体验和自动化解决方案。

下一个 MCP

Reactbits MCP Server

一个为AI助手提供访问135+个动画React组件的模型上下文协议服务器，支持组件发现、智能搜索、样式选项和演示生成等功能。

reactbits MCP