mcp-data-extractor 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"
      ]
    }
  }
}

基本的な使い方

サーバーは次の 2 つのツールを提供します。

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や開発者が後でソースファイルにアクセスした際に、抽出されたデータが現在どこに保存されているかを簡単に確認できるようになります。

この動作を無効にするには、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: "Welcome to our app",
  greeting: "Hello, {name}!",
  submit: "Submit form"
};

ネストされたオブジェクト:

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

配列を使用した複雑な構造:

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

変数を含むテンプレートリテラル:

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コンポーネントは、React固有のコードが削除された個別の.svgファイルに抽出されます。例:

入力（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('{{}}');
  }
  // Add support for new node types here
  return null;
}

カスタム値処理： 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
}

カスタム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 Inspectorの使用をお勧めします。

npm run inspector

インスペクターは、ブラウザでデバッグツールにアクセスするための URL を提供します。

ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細についてはLICENSEファイルを参照してください。

mcp-data-extractor

Integrations