AI导哈

组件管理服务器

一个用于管理项目组件、API和编码标准的模型上下文协议（MCP）服务器，提供工具和资源以便Claude Code与项目知识库交互。

  • by bodangren
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 bodangren/components-mcp

使用说明

组件MCP服务器

用于管理项目组件、API和编码标准的模型上下文协议（MCP）服务器。此服务器为Claude Code提供了与项目知识库交互的工具和资源。

特性

  • 组件管理：使用文件路径和使用示例跟踪可重用的UI组件
  • API文档：使用完整的请求/响应详细信息管理API端点
  • 环境变量：记录所需的环境变量
  • 风格指南：维护设计系统模式和CSS类
  • 状态管理：记录全球状态管理战略
  • 定制挂钩：跟踪可重用的React钩子
  • 代码约定：维护编码标准和linting规则
  • MCP协议：完整的模型上下文协议实现
  • Claude代码集成：与Claude Code的本地集成

安装

来自npm（发布时）

npm install -g components-mcp

来源

git clone https://github.com/bodangren/components-mcp.git
cd components-mcp
npm install

用法

作为MCP服务器

添加到您的Claude Code项目设置中：

{
  "mcpServers": {
    "components-mcp": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/components-mcp/server.js"]
    }
  }
}

或者全局安装并使用：

{
  "mcpServers": {
    "components-mcp": {
      "type": "stdio",
      "command": "components-mcp"
    }
  }
}

可用工具

配置后，Claude Code将可以访问这些MCP工具：

组件

  • get_components -列出所有组件或按ID获取特定组件
  • create_component -创建新组件
  • update_component -更新现有组件
  • delete_component -删除组件

应用程序编程接口

  • get_apis -列出所有API或按ID获取特定的API
  • create_api -创建新的API终结点
  • update_api -更新现有API
  • delete_api -删除API

其他工具

  • get_environment -管理环境变量
  • create_environment -创建环境变量
  • get_style_guide -管理风格指南图案
  • create_style_guide -创建样式引导图案
  • get_state -获取状态管理配置
  • get_hooks -获取自定义挂钩
  • get_conventions -获取编码约定

可用资源

通过MCP资源访问项目数据：

  • components-mcp://components -所有组件
  • components-mcp://apis -所有API
  • components-mcp://environment -环境变量
  • components-mcp://style-guide -风格指南图案
  • components-mcp://state -国家管理
  • components-mcp://hooks -定制挂钩
  • components-mcp://conventions -代码惯例

数据模型

组件

interface Component {
  id: string;
  name: string;
  description: string;
  filePath: string;
  usageExample?: string;
}

API

interface Api {
  id: string;
  name: string;
  endpoint: string;
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
  description: string;
  requestBody?: object;
  responseBody?: object;
}

环境变量

interface EnvironmentVariable {
  id: string;
  name: string;
  description: string;
  isPublic: boolean;
}

风格指南图案

interface StyleGuidePattern {
  id: string;
  element: string;
  description: string;
  className: string;
  usageExample?: string;
}

状态管理

interface StateManagement {
  id: string;
  library: string;
  storeDirectory: string;
  usagePattern: string;
}

定制挂钩

interface CustomHook {
  id: string;
  name: string;
  filePath: string;
  description: string;
  usage: string;
}

公约

interface Convention {
  id: string;
  rule: string;
  description: string;
}

Claude代码中的示例用法

配置后，您可以通过Claude Code与服务器交互：

/mcp
# Shows available MCP servers including components-mcp

# Claude can now use tools like:
# - get_components to list all components
# - create_component to add new components
# - get_apis to see API documentation
# - create_style_guide to document design patterns

数据存储

数据保存在 data/db.json 具有以下结构：

{
  "components": [],
  "apis": [],
  "environment": [],
  "style-guide": [],
  "state": [],
  "hooks": [],
  "conventions": []
}

发展

# Start development server
npm run dev

# Type checking
npm run type-check

# Build TypeScript
npm run build

模型上下文协议

此服务器实现了MCP规范：

  • 运输：stdio（标准输入/输出）
  • 工具：15多种CRUD操作工具
  • 资源：7个用于数据访问的资源端点
  • 错误处理：正确的MCP错误响应
  • 类型安全：完全支持TypeScript

需求

  • Node.js 14+
  • 克劳德代码（用于MCP集成）

许可证

麻省理工学院

版本

1.0.5

作者

博丹仁

仓库

https://github.com/bodangren/components-mcp

相关 MCP