mcp-data-extractor MCP 服务器

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

特性

• 数据提取：

  • 提取字符串字面量、模板字面量和复杂的嵌套对象
  • 保留模板变量（例如 Hello, {{name}}!）
  • 支持嵌套的对象结构和数组
  • 使用点符号保持层次化的键结构
  • 同时支持 TypeScript 和 JavaScript 文件，包括 JSX
  • 成功提取后将源文件内容替换为 "MIGRATED TO <目标绝对路径>"（可配置）

• SVG 提取：

  • 从 React/TypeScript/JavaScript 文件中提取 SVG 组件
  • 保留 SVG 结构和属性
  • 移除 React 特定的代码和 props
  • 创建以组件命名的单独 .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>

源文件替换

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

• 对于数据提取："MIGRATED TO <目标路径>"
• 对于 SVG 提取："MIGRATED TO <目标目录>"

这有助于跟踪哪些文件已经被处理，并防止重复提取。这也使得 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 应用程序中常用的多种模式：

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. 添加新的节点类型：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('{{}}');
  }
  // Add support for new node types here
  return null;
}

1. 自定义值处理：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 的 traverse 来遍历 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 Inspector，它作为一个包脚本提供：

npm run inspector

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

许可证

该项目根据 MIT 许可证发布 - 详情请参阅 LICENSE 文件。