jsc-typescript-ast-mcp

TypeScript AST MCP 服务

一个提供 TypeScript AST（抽象语法树）分析功能的模型上下文协议（MCP）服务。该服务借助 ts-morph 库，让你能够查找类和方法的引用、分析组件树，并查找 TypeScript 代码中的依赖项。非常适合用于表示 React 组件的 JSON 结构。

功能

• MCP 服务：实现模型上下文协议，以便与 AI 助手集成
• TypeScript 分析：使用 ts-morph 进行强大的 TypeScript AST 解析和分析
• 查找引用：查找代码库中对指定类方法的所有引用
• 查找依赖项：使用 find_dependency 工具列出所有导入指定库的文件。
• 组件树分析：使用 component_tree 工具分析代码库中的 React 组件结构。
• 这些工具属于 MCP 服务的一部分，可通过 Claude Code 或其他 MCP 客户端调用。

前提条件

• Node.js（版本与项目兼容）
• Yarn 包管理器

设置

1. 创建 .env，并填写项目的 tsconfig 路径：

   PROJECT_TSCONFIG_PATH=/path/to/your/project/tsconfig.json
   

如何运行

将此包添加为依赖项并运行

yarn typescript-ast

这将启动 MCP 服务，MCP 兼容客户端可连接到该服务。

在 Claude Code 中安装

要在 Claude Code 中使用此 MCP 服务：

1. 配置 Claude Code：

• 复制 .mcp.json（或使用 MCP 配置的内容更新现有文件）：

{
  "mcpServers": {
    "typescript-ast": {
      "type": "stdio",
      "command": "yarn",
      "args": [
        "typescript-ast"
      ],
      "env": {
        "PROJECT_TSCONFIG_PATH": "PATH/TO/YOUR/TYPESCRIPT/PROJECT/tsconfig.json"
      }
    }
  }
}

对于项目路径，如果你使用 Vite，可能需要改用 tsconfig.app.json。

• 编辑 .claude/settings.local.json 并添加 MCP 部分（如果你已配置了一些 MCP，也可以只添加所需部分）

  “enableAllProjectMcpServers”: true,
  “enabledMcpjsonServers”: [
    “typescript-ast”
  ]

• 启动 Claude Code
• 输入 /mcp 命令并检查 MCP 是否已连接

工具说明

该服务提供三个工具：

1. find_reference

查找代码库中对指定类方法的所有引用。

• 输入：
  • filePath：文件路径
  • className：类名
  • methodName：方法名
• 输出：包含方法引用位置及行号的文件路径列表

2. find_dependency

列出所有导入指定库的文件。

• 输入：
  • dependencyName：要搜索的依赖项名称
• 输出：导入指定依赖项的文件路径列表

3. component_tree

分析代码库中的 React 组件结构。

• 输入：
  • entryFilePath：入口文件路径
  • maxDepth：组件树的最大深度（默认值：3）
  • data-id（可选）：要捕获到 TreeNode.dataId 的属性名称（示例：data-attribute-id）
• 输出：组件树结构的 JSON 表示，其中包含可选的元素元数据，例如 props、dataId 和 onClick

许可证

MIT