Web GUI

IGraph includes a built-in Web GUI that lets you manage projects, browse the graph, simulate queries, and edit configuration — all from your browser, without memorizing CLI commands.

Launch

igraph gui

Option	Description	Default
-p, --port <port>	HTTP port	3210
--host <host>	Listen address	127.0.0.1
--open	Auto-open browser	-

Once started, visit http://127.0.0.1:3210.

Feature Overview

Project Dashboard (Home)

The home page is a full-screen project dashboard with no sidebar:

• Project card grid — Shows all imported projects with name, path, file/node/edge counts, vector and summary status
• Import project — Click "Import Project" to select a local repository via the system folder picker or by typing a path
• Build progress — Real-time SSE-streamed progress bar and logs during import or rebuild
• Rebuild — Each project card has a "Rebuild" button
• Global config — Gear button in the top-right corner opens the global config editor

Click a built project card to enter the project detail view.

Project Detail (Sub-page)

After selecting a project, a sidebar appears with a "Back to Dashboard" link and three navigation items:

Graph Structure

• Force-directed graph visualization of nodes and edges
• Click a node to view details (type, file path, source snippet, call relationships)
• Stats cards showing file count, node count, and edge count

Query Simulation

• Enter a natural language query with adjustable TopK and hops parameters
• Real-time display of each retrieval pipeline step: vectorization → Dense/FTS5 retrieval → RRF fusion → graph expansion
• Each step is rendered as a Swagger-style color-coded card with expandable details

Project Configuration

Three tabs:

Tab	Description
Project Config	Edit .igraph/config.json with form mode or JSON editor
Global Config	Edit ~/.igraph/config.json with form mode or JSON editor
Merged Config	Read-only view of the final merged runtime config

JSON editor mode: Click the "JSON Mode" button to switch to a full JSON editor with real-time syntax validation. Click "Save" to apply changes.

Technical Architecture

• Frontend: Vue 3 + Vite + Tailwind CSS v4 single-page application
• Backend: Node.js http module with SSE streaming for build progress
• Data: Reuses the CLI's SQLite database (.igraph/igraph.db); project registry is persisted in ~/.igraph/projects.json