MCP数据提取器

Name: MCP数据提取器
Author: sammcj

作者：sammcj8 星标更新：2025-02-27

安装使用来源：spider==github.com

项目介绍

mcp-data-extractor MCP Server

这是一个从TypeScript/JavaScript源代码中提取嵌入数据（如i18n翻译或键值配置）到结构化JSON配置文件的Model Context Protocol服务器。

特性

数据提取：
- 提取字符串字面量、模板字面量和复杂的嵌套对象
- 保留模板变量（例如：Hello, {{name}}!）
- 支持嵌套对象结构和数组
- 使用点符号表示法维护层次键结构
- 处理带有JSX支持的TypeScript和JavaScript文件
- 成功提取后，用“已迁移到<目标绝对路径>”替换源文件内容（可配置）
SVG提取：
- 从React/TypeScript/JavaScript文件中提取SVG组件
- 保留SVG结构和属性
- 移除React特定代码和属性
- 创建以组件命名的独立.svg文件
- 成功提取后，用“已迁移到<目标绝对路径>”替换源文件内容（可配置）

使用方法

添加到您的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提取：“已迁移到<目标目录>”

这有助于追踪哪些文件已被处理并防止重复提取。它还使LLMs和开发者在遇到源文件时容易看到提取的数据现在位于何处。

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

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

支持模式

数据提取模式

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

简单对象导出：

export default {
  welcome: "欢迎来到我们的应用",
  greeting: "你好，{name}！",
  submit: "提交表单"
};

嵌套对象：

export default {
  header: {
    title: "预订航班",
    subtitle: "找到最佳交易"
  },
  footer: {
    content: [
      "请参阅{{privacyPolicyUrl}}了解详情",
      "© {{year}} {{companyName}}"
    ]
  }
};

包含数组的复杂结构：

export default {
  faq: {
    heading: "常见问题",
    content: [
      {
        heading: "如果我需要更改我的航班怎么办？",
        content: "如果您可以在线更改航班，则需要：",
        list: [
          "您有灵活的票价类型",
          "您的航班距离现在超过24小时"
        ]
      }
    ]
  }
};

带有变量的模板字面量：

export default {
  greeting: `你好，{{username}}！`,
  message: `欢迎来到{{appName}}`
};

输出格式

数据提取输出

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

{
  "welcome": "欢迎来到我们的应用",
  "header.title": "预订航班",
  "footer.content.0": "请参阅{{privacyPolicyUrl}}了解详情",
  "footer.content.1": "© {{year}} {{companyName}}",
  "faq.content.0.heading": "如果我需要更改我的航班怎么办？"
}

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（抽象语法树）。通过修改源代码来扩展支持模式：

添加新的节点类型：src/index.ts中的extractStringValue方法处理不同类型的字符串值。扩展它以支持新的节点类型：

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('{{}}');
  }
  // 在这里添加对新节点类型的支撑
  return null;
}

自定义值处理：processValue方法处理不同的值类型（字符串、数组、对象）。扩展它以支持新的值类型或自定义处理：

private processValue(value: t.Node, currentPath: string[]): void {
  if (t.isStringLiteral(value) || t.isTemplateLiteral(value)) {
    // 处理字符串值
  } else if (t.isArrayExpression(value)) {
    // 处理数组
  } else if (t.isObjectExpression(value)) {
    // 处理对象
  }
  // 在这里添加对新值类型的支撑
}

自定义AST遍历：服务器使用Babel的遍历来行走AST。您可以添加新的访问者来处理不同的节点类型：

traverse(ast, {
  ExportDefaultDeclaration(path: NodePath<t.ExportDefaultDeclaration>) {
    // 处理默认导出
  },
  // 在这里添加新的访问者
});

开发

安装依赖项：

npm install

构建服务器：

npm run build

开发时自动重建：

npm run watch

调试

由于MCP服务器通过stdio通信，调试可能具有挑战性。我们推荐使用MCP Inspector，它作为包脚本可用：

npm run inspector

Inspector将提供一个URL，以便在浏览器中访问调试工具。

许可证

该项目根据MIT许可证发布 - 查看LICENSE文件获取详细信息。