Data Extract

You can extract embedded data from TypeScript and JavaScript source files using the MCP data extractor server. It pulls out strings, translations, and nested object data into JSON, and can also pull out SVG components into standalone SVG files, making it easy to migrate and reuse in your projects.

How to use

Configure your MCP client to connect to the data extractor server, then run data extraction or SVG extraction as needed. You can extract data such as i18n translations from source files and place them into structured JSON, or pull out SVG components into individual .svg files. After extraction, you can replace the source file content with a marker so you know where the extracted data lives.

Two tools are available from the data extractor server:

1. extract_data lets you pull data (for example i18n strings) from a source file and save it as a JSON file with dot notation for nested structures.

2. extract_svg lets you pull SVG components from source files into individual .svg files. It preserves the SVG structure, removes React-specific code, and places the outputs in a target directory.

How to install

Prerequisites: You need Node.js (with npm) installed on your system.

Install and run the MCP data extractor as an MCP server client by using the following configuration.

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

Configuration and usage notes

Source file replacement after successful extraction is enabled by default. After you extract data to a target path, the source file content is replaced with a marker stating where the extracted data now lives. You can disable this behavior by setting an environment variable in your MCP client configuration.

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

Examples of usage patterns

Data extraction targets may include files exporting default objects with nested keys and string values. You can extract simple exports, nested structures, arrays, and template literals. The extracted data is saved as JSON with dot notation for nested keys.

SVG extraction targets are React components that render SVGs. Each extracted SVG becomes an individual .svg file named after the component, and the source component is replaced with a migration marker when extraction completes.

Security and troubleshooting

Run the data extractor and its tools in a trusted environment. If you need to pause or stop extraction, use your MCP client controls. When debugging, you can enable the built-in inspector tooling via your MCP client setup to diagnose issues with the data extraction or SVG extraction processes.

Notes

The extractor uses standard patterns for data collection from code and supports common TypeScript and JavaScript syntax, including JSX. You can adjust behavior with environment variables as needed.

Available tools

extract_data

Extracts data such as i18n translations from source files and saves it as a JSON file using dot notation for nested structures.

extract_svg

Extracts SVG components from React/TypeScript/JavaScript files into standalone .svg files, preserving structure and removing React-specific code.