AI导哈

数据提取工具

MCP Server 是一个从 TypeScript/JavaScript 源代码中提取嵌入式数据（如 i18n 翻译或键/值配置）到结构化 JSON 配置文件的工具，支持 SVG 组件提取和复杂嵌套对象处理。

  • by sammcj
  • JavaScript
  • 本地部署
  • 9 星标
  • 更新于
在 GitHub 查看 sammcj/mcp-data-extractor

使用说明

mcp数据提取器mcp服务器

一个模型上下文协议服务器，从TypeScript/JavaScript源代码中提取嵌入式数据（如i18n翻译或键/值配置）到结构化JSON配置文件中。

特性

  • 数据提取：

    • 提取字符串文字、模板文字和复杂嵌套对象
    • 保留模板变量（例如。， Hello, {{name}}!)
    • 支持嵌套对象结构和数组
    • 使用点符号维护分层密钥结构
    • 使用JSX支持处理TypeScript和JavaScript文件
    • 将源文件内容替换为“MIGRATED TO” “成功提取后（可配置）

  • SVG提取：

    • 从React/TypeScript/JavaScript文件中提取SVG组件
    • 保留SVG结构和属性
    • 删除React特定的代码和道具
    • 创建以组件命名的单个.svg文件
    • 将源文件内容替换为“MIGRATED TO” “成功提取后（可配置）

用法

添加到MCP客户端配置中：

{
  "mcpServers": {
    "data-extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-data-extractor"
      ],
      "disabled": false,
      "autoApprove": [
        "extract_data",
        "extract_svg"
      ]
    }
  }
}

基本用法

服务器提供两个工具：

1.数据提取

使用 extract_data 从源文件中提取数据（如i18n翻译）：

<use_mcp_tool>
<server_name>data-extractor</server_name>
<tool_name>extract_data</tool_name>
<arguments>
{
  "sourcePath": "src/translations.ts",
  "targetPath": "src/translations.json"
}
</arguments>
</use_mcp_tool>

2.SVG提取

使用 extract_svg 将SVG组件提取到单个文件中：

<use_mcp_tool>
<server_name>data-extractor</server_name>
<tool_name>extract_svg</tool_name>
<arguments>
{
  "sourcePath": "src/components/icons/InspectionIcon.tsx",
  "targetDir": "src/assets/icons"
}
</arguments>
</use_mcp_tool>

源文件替换

默认情况下，成功提取后，服务器将用以下内容替换源文件的内容：

  • “迁移到 “用于数据提取
  • “迁移到 “用于SVG提取

这有助于跟踪哪些文件已被处理，并防止重复提取。它还使LLM和开发人员在以后遇到源文件时，可以很容易地看到提取的数据现在的位置。

要禁用此行为，请设置 DISABLE_SOURCE_REPLACEMENT 环境变量 true 在MCP配置中：

{
  "mcpServers": {
    "data-extractor": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-data-extractor"
      ],
      "env": {
        "DISABLE_SOURCE_REPLACEMENT": "true"
      },
      "disabled": false,
      "autoApprove": [
        "extract_data",
        "extract_svg"
      ]
    }
  }
}

支持的模式

数据提取模式

数据提取器支持TypeScript/JavaScript应用程序中常用的各种模式：

  1. 简单对象导出：
export default {
  welcome: "Welcome to our app",
  greeting: "Hello, {name}!",
  submit: "Submit form"
};
  1. 嵌套对象：
export default {
  header: {
    title: "Book Your Flight",
    subtitle: "Find the best deals"
  },
  footer: {
    content: [
      "Please refer to {{privacyPolicyUrl}} for details",
      "© {{year}} {{companyName}}"
    ]
  }
};
  1. 带数组的复杂结构：
export default {
  faq: {
    heading: "Common questions",
    content: [
      {
        heading: "What if I need to change my flight?",
        content: "You can change your flight online if:",
        list: [
          "You have a flexible fare type",
          "Your flight is more than 24 hours away"
        ]
      }
    ]
  }
};
  1. 带变量的模板文本：
export default {
  greeting: `Hello, {{username}}!`,
  message: `Welcome to {{appName}}`
};

输出格式

数据提取输出

提取的数据保存为JSON文件，嵌套结构用点表示：

{
  "welcome": "Welcome to our app",
  "header.title": "Book Your Flight",
  "footer.content.0": "Please refer to {{privacyPolicyUrl}} for details",
  "footer.content.1": "© {{year}} {{companyName}}",
  "faq.content.0.heading": "What if I need to change my flight?"
}

SVG提取输出

SVG组件被提取到单独的.SVG文件中，并删除了React特定的代码。例如：

输入（React组件）：

const InspectionIcon: React.FC<InspectionIconProps> = ({ title }) => (
  <svg className="c-tab__icon" width="40px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <title>{title}</title>
    <path className="cls-1" d="M18.89,12.74a3.18,3.18,0,0,1-3.24-3.11..." />
  </svg>
);

输出（InspectionIcon.svg）：

<svg width="40px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path class="cls-1" d="M18.89,12.74a3.18,3.18,0,0,1-3.24-3.11..." />
</svg>

扩展支持的模式

提取器使用Babel来解析和遍历源文件的AST（抽象语法树）。您可以通过修改源代码来扩展支持的模式：

  1. 添加新节点类型：The extractStringValue 方法in src/index.ts 处理不同类型的字符串值。扩展它以支持新的节点类型：
private extractStringValue(node: t.Node): string | null {
  if (t.isStringLiteral(node)) {
    return node.value;
  } else if (t.isTemplateLiteral(node)) {
    return node.quasis.map(quasi => quasi.value.raw).join('{{}}');
  }
  // Add support for new node types here
  return null;
}
  1. 自定义值处理：The processValue 方法处理不同的值类型（字符串、数组、对象）。扩展它以支持新的值类型或自定义处理：
private processValue(value: t.Node, currentPath: string[]): void {
  if (t.isStringLiteral(value) || t.isTemplateLiteral(value)) {
    // Process string values
  } else if (t.isArrayExpression(value)) {
    // Process arrays
  } else if (t.isObjectExpression(value)) {
    // Process objects
  }
  // Add support for new value types here
}
  1. 自定义AST遍历：服务器使用Babel的遍历来遍历AST。您可以添加新访问者来处理不同的节点类型：
traverse(ast, {
  ExportDefaultDeclaration(path: NodePath<t.ExportDefaultDeclaration>) {
    // Handle default exports
  },
  // Add new visitors here
});

发展

安装依赖项：

npm install

构建服务器：

npm run build

对于自动重建的开发：

npm run watch

调试

由于MCP服务器通过stdio进行通信，调试可能具有挑战性。我们建议使用 MCP检查员，可作为包脚本使用：

npm run inspector

检查器将提供一个URL，用于访问浏览器中的调试工具。

许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

相关 MCP