关键词

BEM组件生成前端文件管理AI开发工具代码结构化模块化开发

项目简介

bemg是一个强大的命令行工具，用于生成和管理遵循BEM（Block Element Modifier）命名规范的前端文件和组件。它通过MCP（Model Context Protocol）将自身的能力暴露给AI助手，如Claude Desktop，使其能够以标准化的方式与AI进行交互，执行文件生成、配置初始化、BEM路径分析等任务，并获取相关的资源和提示。

主要功能点

  • BEM文件生成: 根据BEM规范，创建块（block）、元素（element）、修饰符（modifier）及其组合的文件，支持多种文件类型（如TSX、CSS）和自定义模板。
  • 项目配置管理: 初始化和管理bemg工具的默认配置，包括模板文件和命名规则。
  • BEM路径分析: 分析给定目录路径的BEM上下文，识别当前BEM实体、块根目录，并提供相关建议。
  • 提供BEM指南: 作为资源向AI助手提供BEM命名规范和最佳实践的详细文档。
  • MCP服务器接口: 通过JSON-RPC 2.0协议和Stdio传输，让AI助手能够发现、调用上述功能并获取相关信息。

安装步骤

首先，您需要在本地环境中安装Node.js和npm（通常随Node.js一起安装）。然后，通过npm全局安装bemg工具：

npm install -g bemg

服务器配置

bemg MCP服务器是为MCP客户端（例如Claude Desktop）提供服务的。要让您的MCP客户端连接到bemg服务器，您需要将以下配置添加到客户端的配置中。以下是一个示例配置，展示了如何为Claude Desktop配置bemg MCP服务器：

{
  "mcpServers": {
    "bemg": {
      "command": "npx",
      "args": ["bemg", "mcp"],
      "cwd": "/path/to/your/project"
    }
  }
}
  • 'mcpServers': 一个包含所有MCP服务器配置的JSON对象。
  • 'bemg': 您为该MCP服务器定义的唯一名称。
  • 'command': 启动bemg MCP服务器的命令行程序。这里使用'npx'来执行全局安装的'bemg'命令。
  • 'args': 传递给'command'的参数。'["bemg", "mcp"]'指示'npx'运行'bemg'工具的'mcp'子命令来启动MCP服务器。
  • 'cwd': 服务器的工作目录。请将其替换为您的项目根目录的绝对路径，例如 '/Users/YourUser/my-project' 或 'C:\Users\YourUser\my-project'。AI助手将在该目录上下文中调用bemg的各项功能。

配置完成后，您的MCP客户端将能够发现并利用bemg提供的工具、资源和提示。

基本使用方法

一旦MCP服务器配置完毕并由您的AI助手连接，您就可以通过AI助手直接使用bemg的功能。例如，在支持MCP的AI聊天界面中，您可以：

  • 调用工具生成BEM文件：
    • 通过AI助手请求调用 'generate_bem_files' 工具，指定 'targetPath'、'name' (块名)、'types' (文件类型，如 '["tsx", "css"]') 和 'items' (要创建的元素或修饰符，如 '["__icon", "_disabled"]') 来创建新的BEM组件。
  • 读取配置或指南：
    • 请求读取 'bemg://config' 资源来获取当前的bemg配置信息。
    • 请求读取 'bemg://bem-naming-guide' 资源来获取BEM命名规范的详细文档。
  • 利用提示创建组件：
    • 与AI助手交流，利用 'create-bem-component' 提示，让AI引导您创建新的BEM块，它会询问组件名称、所需文件类型和额外的实体。

信息

分类

开发者工具

访问项目