TypeScript/JavaScript ソース コードから埋め込みデータ (i18n 翻訳やキー/値構成など) を構造化された JSON 構成ファイルに抽出するモデル コンテキスト プロトコル サーバー。
特徴
データ抽出:
文字列リテラル、テンプレートリテラル、および複雑にネストされたオブジェクトを抽出します
テンプレート変数を保持します (例: Hello, {{name}}! )
ネストされたオブジェクト構造と配列をサポート
ドット表記を使用して階層的なキー構造を維持します
JSX サポートにより TypeScript と JavaScript ファイルの両方を処理できます
抽出が成功した後、ソース ファイルの内容を「MIGRATED TO」に置き換えます (構成可能)
SVG抽出:
React/TypeScript/JavaScript ファイルから SVG コンポーネントを抽出します
SVGの構造と属性を保持します
React固有のコードとプロパティを削除します
コンポーネント名にちなんで名付けられた個別の.svgファイルを作成します。
抽出が成功した後、ソース ファイルの内容を「MIGRATED TO」に置き換えます (構成可能)
Related MCP server: mcp-server-code-assist
使用法
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
});
発達
依存関係をインストールします:
サーバーを構築します。
自動リビルドを使用した開発の場合:
デバッグ
MCPサーバーはstdio経由で通信するため、デバッグが困難になる場合があります。パッケージスクリプトとして提供されているMCP Inspectorの使用をお勧めします。
インスペクターは、ブラウザでデバッグ ツールにアクセスするための URL を提供します。
ライセンス
このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細についてはLICENSEファイルを参照してください。
