欢迎光临
我们一直在努力

Gitnexus WebUI可视化代码依赖关系

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历史索引情况

随便点击一个项目进入

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

赞(0)
未经允许不得转载:171主机测评 » Gitnexus WebUI可视化代码依赖关系
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址