mcp-data-extractor

mcp-data-extractor MCP Server

A Model Context Protocol server that extracts embedded data (such as i18n translations or key/value configurations) from TypeScript/JavaScript source code into structured JSON configuration files.

Features

Data Extraction:
- Extracts string literals, template literals, and complex nested objects
- Preserves template variables (e.g., Hello, {{name}}!)
- Supports nested object structures and arrays
- Maintains hierarchical key structure using dot notation
- Handles both TypeScript and JavaScript files with JSX support
- Replaces source file content with "MIGRATED TO " after successful extraction (configurable)
SVG Extraction:
- Extracts SVG components from React/TypeScript/JavaScript files
- Preserves SVG structure and attributes
- Removes React-specific code and props
- Creates individual .svg files named after their component
- Replaces source file content with "MIGRATED TO " after successful extraction (configurable)

Usage

Add to your MCP Client configuration:

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

Basic Usage

The server provides two tools:

1. Data Extraction

Use extract_data to extract data (like i18n translations) from source files:

<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 Extraction

Use extract_svg to extract SVG components into individual files:

<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>

Source File Replacement

By default, after successful extraction, the server will replace the content of the source file with:

"MIGRATED TO " for data extraction
"MIGRATED TO " for SVG extraction

This helps track which files have already been processed and prevents duplicate extraction. It also makes it easy for LLMs and developers to see where the extracted data now lives when they encounter the source file later.

To disable this behavior, set the DISABLE_SOURCE_REPLACEMENT environment variable to true in your MCP configuration:

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

Supported Patterns

Data Extraction Patterns

The data extractor supports various patterns commonly used in TypeScript/JavaScript applications:

Simple Object Exports:

export default {
  welcome: "Welcome to our app",
  greeting: "Hello, {name}!",
  submit: "Submit form"
};

Nested Objects:

export default {
  header: {
    title: "Book Your Flight",
    subtitle: "Find the best deals"
  },
  footer: {
    content: [
      "Please refer to {{privacyPolicyUrl}} for details",
      "© {{year}} {{companyName}}"
    ]
  }
};

Complex Structures with Arrays:

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"
        ]
      }
    ]
  }
};

Template Literals with Variables:

export default {
  greeting: `Hello, {{username}}!`,
  message: `Welcome to {{appName}}`
};

Output Formats

Data Extraction Output

The extracted data is saved as a JSON file with dot notation for nested structures:

{
  "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 Extraction Output

SVG components are extracted into individual .svg files, with React-specific code removed. For example:

Input (React component):

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>
);

Output (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>

Extending Supported Patterns

The extractor uses Babel to parse and traverse the AST (Abstract Syntax Tree) of your source files. You can extend the supported patterns by modifying the source code:

Add New Node Types: The extractStringValue method in src/index.ts handles different types of string values. Extend it to support new node types:

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;
}

Custom Value Processing: The processValue method handles different value types (strings, arrays, objects). Extend it to support new value types or custom processing:

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
}

Custom AST Traversal: The server uses Babel's traverse to walk the AST. You can add new visitors to handle different node types:

traverse(ast, {
  ExportDefaultDeclaration(path: NodePath<t.ExportDefaultDeclaration>) {
    // Handle default exports
  },
  // Add new visitors here
});

Development

Install dependencies:

npm install

Build the server:

npm run build

For development with auto-rebuild:

npm run watch

Debugging

Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector, which is available as a package script:

npm run inspector

The Inspector will provide a URL to access debugging tools in your browser.

License

This project is licensed under the MIT License - see the LICENSE file for details.

You must be authenticated.

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

A Model Context Protocol server that extracts embedded data (such as i18n translations or key/value configurations) from TypeScript/JavaScript source code into structured JSON configuration files.

Related Resources

Reddit Discussion about this server

Related MCP Servers

MCP Server Starter
StevenStavrakis
A
security
A
license
A
quality
A production-ready template for creating Model Context Protocol servers with TypeScript, providing tools for efficient testing, development, and deployment.
Last updated -
1
1
12
JavaScript
MIT License
MCP Server Template
stevennevins
A
security
F
license
A
quality
A TypeScript-based template for developing Model Context Protocol servers with features like dependency injection and service-based architecture, facilitating the creation and integration of custom data processing tools.
Last updated -
1
2
TypeScript
WithSeismic MCP
dougwithseismic
-
security
A
license
-
quality
A TypeScript implementation of a Model Context Protocol server that provides a frictionless framework for developers to build and deploy AI tools and prompts, focusing on developer experience with zero boilerplate and automatic tool registration.
Last updated -
6
TypeScript
MIT License
OSP Marketing Tools MCP Server
x51xxx
A
security
A
license
A
quality
A TypeScript implementation of a Model Context Protocol server that provides marketing tools based on Open Strategy Partners' methodologies, enabling content creation, optimization, and product positioning through tools like value map generation, meta information creation, and content editing.
Last updated -
6
49
1
TypeScript
CC BY-SA 4.0

View all related MCP servers

mcp-data-extractor