mcp-code-indexer-react-ts
mcp-indexer
A reusable code-intelligence engine that indexes any TypeScript / React repository into a queryable code graph — nodes for repos, packages, files, components, and functions; edges for contains, imports, calls, renders, and references — and serves it three ways: an HTTP + WebSocket API, a CLI, and a Model Context Protocol (MCP) server that AI agents (Claude, Cursor) can call directly.
Point it at a repo, get a live graph of how the code fits together.
┌─────────────┐ ts-morph AST ┌──────────────┐ serve ┌─────────────────────────┐
│ any TS/React│ ───────────────▶ │ code graph │ ─────────▶ │ HTTP + WS · CLI · MCP │
│ repo │ walk + analyze │ nodes + edges │ │ (consume from anywhere) │
└─────────────┘ └──────────────┘ └─────────────────────────┘Proof: indexing a real app
This repo's sibling ../app — The Plan Beyond (a standalone React 19 + Vite + TS app) — indexed live:
$ pnpm index:app
Indexed /…/app
nodes: 261 (1 repo · 1 app · 135 file · 63 component · 36 function · 25 folder)
edges: 538 (260 contains · 171 imports · 49 renders · 31 calls · 27 references)
time: ~2.7sThe indexer is generic — it discovers the workspace shape itself and handles both monorepos (pnpm / turbo / lerna) and standalone single-package repos like The Plan Beyond app. Nothing about the target is hardcoded.
Related MCP server: depwire
Quickstart
pnpm install
pnpm build # turbo builds code-graph-core → _shared → code-indexer (topo order)
pnpm test # unit tests across the engine + schema packages (run via turbo)Requires Node ≥ 20.19 and pnpm 10 (pinned to
pnpm@10.32.1viapackageManager;corepack enableselects it).pnpm buildis required before running the CLI or server — the server runs viatsxbut imports the compiled engine, and the CLI/MCP entrypoints are compiled JS.
Three ways to use it
All three resolve the same engine against a target repo root. The examples below point at the sibling ../app (The Plan Beyond); swap in any path.
1. Live server + file-watcher (the demo)
pnpm serve:app
# → 🔭 Indexer server on http://localhost:3002
# root: /…/app
# ✓ 261 nodes · 538 edges in ~2.7s
# 👀 watching for changes — edit a file to see it update liveEndpoint | Description |
|
|
| Full snapshot — |
| One node (e.g. |
| Force a full re-index |
| Push updates as watched files change |
curl localhost:3002/api/graph | jq '.meta'
# { "root": "/…/app", "nodeCount": 261, "edgeCount": 538, "indexerVersion": "0.1.0" }
curl localhost:3002/api/node/file:src/App.tsx | jq '.node | {type, metrics, status}'
# { "type": "file", "metrics": { "loc": 12, "exportsCount": 1 }, "status": { "buildOk": true, "health": "ok" } }Web UI (3D graph). With the server running, launch the visual front-end — an
interactive react-force-graph-3d
viewer with drill-down (repo → app → package → file → component), live
type-health coloring, AI summaries, impact analysis, and a codebase chat:
pnpm ui # → http://localhost:5182 (Vite proxies /api + /ws → :3002)The UI lives in apps/web/code-graph and is a pure
consumer of the HTTP + WS API above — it loads GET /api/graph, then applies
live GraphPatches pushed over WS /ws as you edit files.
2. CLI (one-shot snapshot)
pnpm index:app
# writes ../app/.code-graph/graph.json and prints node/edge counts
# …or any repo:
node tools/code-indexer/build/code-indexer/src/cli.js index --root /path/to/any/repo3. MCP server (connect to Claude Code / Cursor)
The engine is also an MCP server exposing three tools: index_repo, get_graph, get_node.
It is not auto-connected — you register it once. Build first (
pnpm build), then pick one of:
A — Claude Code (CLI, one command):
claude mcp add code-indexer -- node "$(pwd)/tools/code-indexer/build/code-indexer/src/index.js"
claude mcp list # → code-indexer: ✓ connectedNow in any Claude Code session the three tools are callable. Ask, e.g., "use index_repo on /path/to/app, then get_node for file:src/App.tsx."
B — Project config file (.mcp.json at a repo root — Claude Code and Cursor auto-load it when you open that project):
{
"mcpServers": {
"code-indexer": {
"command": "node",
"args": ["/ABSOLUTE/PATH/TO/mcp-indexer/tools/code-indexer/build/code-indexer/src/index.js"]
}
}
}Either way, a tool call returns:
// index_repo { "root": "/…/app" }
{ "success": true, "root": "/…/app", "nodeCount": 261, "edgeCount": 538, "durationMs": 2700 }Path tip: the MCP entry needs an absolute path to
index.js. For tool args, a relativeroot/INDEXER_ROOT(like../app) is resolved against the indexer repo root; absolute paths always work.
Architecture
Deeper rationale — the graph model, why ts-morph, the macro/micro split, and the honest trade-offs — is in docs/DESIGN.md.
A focused Turborepo of four packages (plus two shared-config packages):
mcp-indexer/
├── packages/
│ └── code-graph-core/ @repo/code-graph-core — Zod schemas: nodes, edges, snapshot, status, knowledge
├── tools/
│ ├── _shared/ @tools/shared — MCP server base (McpServerBase, ToolRegistry), error/file utils
│ └── code-indexer/ code-indexer-mcp — the engine: ts-morph analysis, CLI, and MCP server
└── apps/
└── indexer-server/ indexer-server — Express + ws runtime, file-watcher, REST/WS over the graphDependency flow (leaves first):
code-graph-core ─┬─▶ code-indexer ─▶ indexer-server
_shared ──────┘code-graph-core— the contract. Zod schemas validate every node, edge, and snapshot, so the graph shape is guaranteed end-to-end (engine → API → consumer). Pure, dependency-light, fully unit-tested.code-indexer— the analysis engine. Usests-morphto parse source, plus a workspace discovery pass (discoverWorkspace) that detects monorepo vs standalone layouts. Persists incremental snapshots to.code-graph/. Doubles as the MCP server.indexer-server— wraps the engine in Express +ws, indexes on boot, enriches node status in the background, and starts a@parcel/watcherto push live updates.
The graph model
Node types | Edge types |
|
|
Each node carries metrics (loc, exportsCount) and a status block (type errors, lint, build health) so the graph is a foundation for codebase dashboards, impact analysis, and AI-agent code navigation.
Data flow
target repo ──▶ discoverWorkspace ──▶ ts-morph parse ──▶ build nodes + edges ──▶ snapshot (Zod-validated)
│
┌──────────────────────────────────────────────────────────────┤
CLI: write .code-graph/graph.json Server: GET /api/graph, WS push MCP: index_repo / get_graph / get_nodeScripts
Command | What it does |
| Build all packages (topo order via turbo) |
|
|
| Unit tests (schemas + engine) |
| ESLint across all packages ( |
| Index any repo to |
| Run the server against this repo ( |
| The same, pointed at the sibling |
Tech
TypeScript (strict) · Turborepo · pnpm workspaces · ts-morph · Zod · Express · ws · @parcel/watcher · Model Context Protocol SDK · Vitest.
Status
pnpm build ✓ · pnpm typecheck ✓ · pnpm lint ✓ · pnpm test ✓ — verified against the sibling app (The Plan Beyond) via CLI, HTTP/WS, and MCP. CI runs the same gate (build → typecheck → lint → test) on every push and PR (.github/workflows/ci.yml).
This server cannot be installed
Maintenance
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Nishant-Chaudhary5338/mcp-code-indexer'
If you have feedback or need assistance with the MCP directory API, please join our Discord server