frontend-analysis-mcp/
├── src/                          # 源代码目录
│   ├── analyzer/                 # 代码分析器 (100% 完成)
│   │   ├── FrontendCodeAnalyzer.ts    # 主分析器
│   │   ├── VariableTracker.ts         # 变量追踪器
│   │   ├── FunctionAnalyzer.ts        # 函数分析器
│   │   ├── ComponentAnalyzer.ts       # 组件分析器
│   │   └── FlowDiagramGenerator.ts    # 流程图生成器
│   ├── server/                   # MCP服务器 (100% 完成)
│   │   ├── FrontendAnalysisMCPServer.ts  # 主服务器
│   │   ├── ToolHandler.ts              # 工具处理器
│   │   └── ResourceHandler.ts          # 资源处理器
│   ├── types/                    # 类型定义 (100% 完成)
│   │   ├── ProjectInfo.ts        # 项目信息类型
│   │   ├── VariableInfo.ts       # 变量信息类型
│   │   ├── FunctionInfo.ts       # 函数信息类型
│   │   ├── ComponentInfo.ts      # 组件信息类型
│   │   └── errors.ts             # 错误类型定义
│   ├── utils/                    # 工具函数 (100% 完成)
│   │   ├── fileUtils.ts          # 文件操作工具
│   │   ├── astUtils.ts           # AST操作工具
│   │   ├── typeUtils.ts          # 类型工具
│   │   ├── performance.ts        # 性能优化工具
│   │   ├── logger.ts             # 日志工具
│   │   └── errorHandler.ts       # 错误处理工具
│   └── index.ts                  # 入口文件
├── tests/                        # 测试目录 (100% 通过)
│   ├── unit/                     # 单元测试
│   ├── integration/              # 集成测试
│   └── fixtures/                 # 测试数据
├── examples/                     # 示例目录
├── docs/                         # 文档目录
└── README.md

npm install

# 开发模式运行
npm run dev

# 构建项目
npm run build

# 运行测试
npm run test

# 运行测试并生成覆盖率报告
npm run test:coverage

# 代码检查
npm run lint

# 代码格式化
npm run format

# 类型检查
npm run type-check

// 1. 分析整个React项目
const projectAnalysis = await mcpServer.handleToolCall('analyze_project', {
  projectPath: '/path/to/react-project',
  framework: 'react',
});

// 2. 获取特定组件的详细信息
const componentInfo = await mcpServer.handleToolCall('get_component_info', {
  componentName: 'UserProfile',
  filePath: '/path/to/UserProfile.jsx',
});

// 3. 生成控制流图
const flowDiagram = await mcpServer.handleToolCall('generate_flow_diagram', {
  type: 'control-flow',
  filePath: '/path/to/component.jsx',
});

// 4. 访问项目资源
const projectStructure = await mcpServer.handleResourceRequest('project://structure');
const allVariables = await mcpServer.handleResourceRequest('project://variables');

# 运行所有测试
npm run test

# 运行测试并监听文件变化
npm run test:watch

# 运行测试并生成覆盖率报告
npm run test:coverage

# 运行特定模块测试
npm test -- --testPathPattern="ComponentAnalyzer.test.ts"

# 克隆项目
git clone <repository-url>
cd frontend-analysis-mcp

# 安装依赖
npm install

# 构建项目
npm run build

import { FrontendAnalysisMCPServer } from './dist/src/server/index.js';

// 创建并启动MCP服务器
const server = new FrontendAnalysisMCPServer();
await server.run();

import { FrontendCodeAnalyzer } from './dist/src/analyzer/index.js';

// 创建分析器实例
const analyzer = new FrontendCodeAnalyzer('/path/to/your/project');

// 分析项目
const projectInfo = await analyzer.analyzeProject();

console.log('项目框架:', projectInfo.framework);
console.log('文件数量:', projectInfo.files.length);
console.log('组件数量:', projectInfo.components.length);
console.log('函数数量:', projectInfo.functions.length);
console.log('变量数量:', projectInfo.variables.length);

import { FlowDiagramGenerator } from './dist/src/analyzer/index.js';

const generator = new FlowDiagramGenerator();

// 生成控制流图
const controlFlow = generator.generateControlFlow(ast);

// 生成数据流图
const dataFlow = generator.generateDataFlow(ast);

// 生成组件树图
const componentTree = generator.generateComponentTree(components);

# 开发模式运行
npm run dev

# 监听模式运行测试
npm run test:watch

# 代码质量检查
npm run lint

# 类型检查
npm run type-check