mcp数据提取器mcp服务器
一个模型上下文协议服务器,从TypeScript/JavaScript源代码中提取嵌入式数据(如i18n翻译或键/值配置)到结构化JSON配置文件中。
](https://smithery.ai/server/mcp-data-extractor)
特性
- 数据提取:
- 提取字符串文字、模板文字和复杂嵌套对象 - 保留模板变量(例如。, 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"
]
}
}
}基本用法
服务器提供两个工具:
1.数据提取
使用 extract_data 从源文件中提取数据(如i18n翻译):
data-extractor
extract_data
{
"sourcePath": "src/translations.ts",
"targetPath": "src/translations.json"
}
2.SVG提取
使用 extract_svg 将SVG组件提取到单个文件中:
data-extractor
extract_svg
{
"sourcePath": "src/components/icons/InspectionIcon.tsx",
"targetDir": "src/assets/icons"
}
源文件替换
默认情况下,成功提取后,服务器将用以下内容替换源文件的内容:
- “迁移到 “用于数据提取
- “迁移到 “用于SVG提取
这有助于跟踪哪些文件已被处理,并防止重复提取。它还使LLM和开发人员在以后遇到源文件时,可以很容易地看到提取的数据现在的位置。
要禁用此行为,请设置 DISABLE_SOURCE_REPLACEMENT 环境变量 true 在MCP配置中:
{
"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组件被提取到单独的.SVG文件中,并删除了React特定的代码。例如:
输入(React组件):
const InspectionIcon: React.FC = ({ title }) => (
{title}
);输出(InspectionIcon.svg):
扩展支持的模式
提取器使用Babel来解析和遍历源文件的AST(抽象语法树)。您可以通过修改源代码来扩展支持的模式:
- 添加新节点类型:The
extractStringValue方法insrc/index.ts处理不同类型的字符串值。扩展它以支持新的节点类型:
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;
}- 自定义值处理:The
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) {
// Handle default exports
},
// Add new visitors here
});发展
安装依赖项:
npm install构建服务器:
npm run build对于自动重建的开发:
npm run watch调试
由于MCP服务器通过stdio进行通信,调试可能具有挑战性。我们建议使用 MCP检查员,可作为包脚本使用:
npm run inspector检查器将提供一个URL,用于访问浏览器中的调试工具。
许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。
