Gitnexus WebUI可视化代码依赖关系

gitnexus仓库链接：gitnexus github

gitnexus webui 本质是“代码知识图谱浏览器”，它的核心：Code → AST → Graph → Semantic Layer → LLM

本地启动 GitNexus 的 Web UI 前后端开发环境
整个结构实际上是：

浏览器(Web UI)
↓
gitnexus-web (React/Vite 前端)
↓ HTTP/API
gitnexus serve (后端/MCP/索引服务)
↓
.gitnexus 索引数据库

之前博客中介绍的gitnexus只是CLI+MCP工具
本次安装的是Web可视化界面
功能：

浏览 knowledge graph
查看 symbol dependency
搜索代码关系
可视化调用链
查看 embedding search
调试 repo index

1.1 拉取gitnexus源代码

先把 GitNexus 源码下载到本地（WebUI 目前主要以源码开发模式运行）

git clone https://github.com/abhigyanpatwari/gitnexus.git

执行后生成gitnexus/文件夹
里面含有

gitnexus/
├── gitnexus-cli
├── gitnexus-web
├── gitnexus-shared
├── packages
├── server
└── …

本地运行开发版 frontend
先进入shared公共库 (前后端共享代码，前端和后端都会使用)

cd gitnexus/gitnexus-shared

通常包含：

types
api schema
shared utils
graph model
DTO
common interfaces

1.2 安装 shared package 依赖

npm install

会将如typescript、zod、tsup、eslint安装到 node_modules/下

1.3 编译 shared package

npm run build

1.4 前端Web UI项目

cd ../gitnexus-web

通常是：

React + Vite + Tailwind + Graph visualization

1.5 安装前端依赖

npm install

包括：

React: react、react-odm
Vite开发服务器：vite
图可视化：cytoscape、d3、reactflow、vis-network
UI: tailwind、radix、shadcn

1.6 启动前端开发服务器

npm run dev

本质是vite,启动后会看到localhost: 端口号

按住Ctrl键后鼠标单击本地地址后浏览器启动

1.7 启动 GitNexus backend server

之后再打开另外一个终端执行下面命令

npx gitnexus@latest serve

它会读取.gitnexus、启动API Server、暴露graph query API、提供semantic search、提供MCP backend、

整体运行结构

┌────────────────────┐
│ 浏览器 │
│ localhost:5173 │
└─────────┬──────────┘
↓
┌────────────────────┐
│ gitnexus-web │
│ React/Vite frontend│
└─────────┬──────────┘
↓ HTTP
┌────────────────────┐
│ gitnexus serve │
│ backend API │
└─────────┬──────────┘
↓
┌────────────────────┐
│ .gitnexus index │
│ graph + embeddings │
└────────────────────┘

报错了

node版本太低了，我们升级node到22
先让当前终端激活nvm

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

随后安装node22

nvm install 22

安装完成后切换版本

nvm use 22

验证版本

node -v

v22.22.3

检查npm

npm -v

10.9.8

重新启动gitnexus backend
终端进入项目目录

cd your_project

建立项目代码索引

gitnexus analyze

执行

gitnexus serve

输出
MCP HTTP endpoints mounted at /api/mcp
GitNexus server running on http://localhost:4747

随后看到网页中已经出现了目前gitnexus历史索引情况

随便点击一个项目进入

随便点击一个文件后显示这个文件的依赖关系，如果点击某个类或函数则显示对应的依赖关系