Next.js TypeScript制图器
一个MCP工具，用于为Next.js和TypeScript代码建立索引，以便与Claude code和Kiro等代理协同工作。
概述
Next.js TypeScript Cartographer解决了人工智能代理处理复杂的TypeScript代码库时的一个关键问题：快速定位代码元素而无需昂贵的搜索。当用户说“让我们修改”时 UserProfile“，AI代理可以立即找到组件定义的确切位置，而不是运行多个grep命令或bash脚本来查找它。
目标
主要目标
- 即时符号导航：立即跳转到任何类、函数、接口或组件定义。
- 深入的代码理解：提供有关符号的丰富元数据，包括文档（JSDoc）和源代码范围。
- 零配置：为标准Next.js和TypeScript项目开箱即用。
建筑
Next.js TypeScript制图器使用 ts-morph 用于语义代码分析：
- ts变形集成：使用TypeScript编译器API包装对TypeScript代码进行完整的语义理解。
- 项目加载：负载
tsconfig.json了解项目结构和依赖关系。 - MCP服务器：基于
@modelcontextprotocol/sdk用于模型上下文协议支持。
- 使用Node.js异步/等待 - 工具参数的JSON模式验证 - 用于AI代理集成的标准传输
用例
- 人工智能辅助开发：使AI代理能够以外科手术的精度导航和修改代码。
- 代码导航：快速查找开发人员和工具。
- 重构支持：了解代码库中更改的影响。
- 文档生成：提取和组织代码文档。
当前实施情况
服务器提供两个功能齐全的工具：
工具
find_symbol
按名称查找所有出现的TypeScript符号（类、函数、接口、变量等）。
特征：
- 搜索模式：精确、模糊（默认）或前缀匹配。
- 类型筛选：仅将结果筛选为类型符号（类、接口、枚举、类型别名）。
- 元数据：返回符号名称、种类、文件路径、行号和文档。
示例用法：
{
"query": "UserProfile",
"mode": "exact",
"typesOnly": true
}enumerate_file
列出特定文件中定义的所有符号。
特征：
- 返回所有函数、方法、类、接口、变量等。
- 提供符号名称、种类、行号范围和JSDoc文档。
- 自动过滤掉不相关的符号类型。
示例用法：
{
"filePath": "/absolute/path/to/components/UserProfile.tsx"
}实现细节
- 语义分析：用途
ts-morph以获得准确的类型信息。 - 项目加载：自动加载
tsconfig.json. - 符号种类：支持类、方法、属性、函数、接口、变量、TypeAlias和枚举。
运行服务器
要安装依赖项，请执行以下操作：
npm install要运行服务器（通过stdio通信）：
npm run mcp或者：
npx tsx scripts/mcp-server.ts /path/to/project与AI代理集成
要将Next.js TypeScript制图器与MCP兼容的AI代理一起使用，请将其添加到MCP配置中。
例如，使用Claude Code：
{
"mcpServers": {
"nextjs-cartographer": {
"command": "npx",
"args": ["-y", "tsx", "/path/to/next.js_typescript_cartographer/scripts/mcp-server.ts", "/path/to/target/project"]
}
}
}配置后，AI代理将可以访问 find_symbol 和 enumerate_file 用于导航代码库的工具。