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 클라이언트 구성에 추가:

지엑스피1

기본 사용법

서버는 두 가지 도구를 제공합니다.

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"

이를 통해 이미 처리된 파일을 추적하고 중복 추출을 방지할 수 있습니다. 또한 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 순회 : 서버는 바벨의 순회를 사용하여 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 라이선스에 따라 라이선스가 부여되었습니다. 자세한 내용은 라이선스 파일을 참조하세요.

mcp-data-extractor

Integrations