Graph-It-Live

Give your AI "eyes" to see your entire codebase structure.

Graph-It-Live is a dual-purpose tool:

1.For Humans: A real-time interactive graph to visualize and navigate dependencies in TypeScript, JavaScript, Vue, Svelte, and GraphQL projects. 2.For AI: A built-in Model Context Protocol (MCP) Server that lets assistants like GitHub Copilot, Claude, and Cursor analyze your project's architecture, find impact of changes, and understand complex relationships without hallucinating.

🤖 Supercharge Your AI Assistant

Stop pasting file paths and explaining your project structure. Graph-It-Live exposes 17 powerful dependency analysis tools directly to your AI assistant via the Model Context Protocol (MCP).

What your AI can do with Graph-It-Live:

• "Map out the architecture of the auth module" -> AI crawls the dependency tree.
• "What breaks if I change User.ts?" -> AI performs instant reverse lookup to find all dependents.
• "What calls formatDate() function?" -> AI finds all symbol-level callers with O(1) lookup.
• "Show me function-level dependencies in this file" -> AI analyzes symbol-level relationships.
• "Analyze the impact of changing calculateTotal's signature" -> AI detects breaking changes.
• "Find unused exports in the codebase" -> AI detects dead code automatically.
• "Are there circular dependencies?" -> AI detects cycles automatically.
• "Explain how data flows from App.vue to the API" -> AI traces the import path.

Example: Asking GitHub Copilot to analyze dependencies using Graph-It-Live tools

Features

• MCP Server for AI Integration (New): Built-in Model Context Protocol (MCP) Server exposes dependency analysis tools to AI assistants.
• Symbol-Level Analysis (New): Drill down to see function-to-function and class-to-class dependencies within files.
• Real-time Dependency Visualization: Interactive graph showing file dependencies.
• Multi-Language Support: First-class support for TypeScript (.ts, .tsx), JavaScript (.js, .jsx), Vue (.vue), Svelte (.svelte), and GraphQL (.gql, .graphql).
• Cycle Detection: Automatically detects and highlights circular dependencies with red dashed lines and badges.
• Smart Navigation: Use VS Code's built-in navigation (Go Back / Go Forward) to move through your code history. Graph-It-Live also exposes navigation actions in the webview or panel menu.
• Background Indexing (New): Optionally index your entire workspace in the background for instant reverse dependency lookups. Uses a separate worker thread to avoid blocking the IDE.
• Interactive Graph:
  • Expand/Collapse: Dynamically load dependencies using the node controls available in the webview/panel menu or the node's context menu (hover actions may still appear depending on layout).
  • Bidirectional Navigation: Use the "Find Referencing Files" action from a node's context menu or the webview/panel menu to see files that import the selected file. With background indexing enabled, this is instant (O(1) lookup).
  • File Navigation: Click on any node to instantly open the corresponding file in the editor.
  • Drill-Down (New): Double-click a file node or choose the "Drill Down" action in the node context menu or webview/panel menu to see symbol-level dependencies within that file.

Symbol-level drill-down: explore function and class dependencies within a file

Prerequisites

• Node.js: v18 or higher (v20 LTS recommended)
• VS Code: v1.96.0 or higher

Installation

From Marketplace

Install directly from the VS Code Marketplace (when published) or search for "Graph-It-Live" in the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).

From Open VSX Registry

The extension is also available on the Open VSX Registry. You can install it using a compatible editor (like VSCodium) or by downloading the .vsix from the registry page.

Usage

1.Open a Project: Open a folder containing TypeScript, JavaScript, Vue, Svelte, or GraphQL files. 2.Open the Graph: - Click the Graph-It-Live icon in the Activity Bar (left sidebar). - Or run the command: Graph-It-Live: Show Dependency Graph. - Or click the graph icon in the editor title bar when viewing a supported file. 3.Interact: - Navigate: Click a node to open the file. - Expand: Use the "Expand" action from the node context menu or the webview/panel menu to reveal a node's dependencies. - Drill-Down: Double-click a file node or choose the "Drill Down" action in the node context menu to see symbol-level dependencies (functions, classes) within that file. - Reverse Lookup: Use the "Find Referencing Files" action in the node context menu or the webview/panel menu to see which files import the current file.

Configuration

Customize the extension in VS Code Settings (Cmd+, or Ctrl+,):

MCP Server (AI/LLM Integration)

Graph-It-Live includes an optional Model Context Protocol (MCP) Server that exposes its dependency analysis capabilities to AI assistants and LLMs.

Enabling the MCP Server

Set graph-it-live.enableMcpServer to true in your VS Code settings. The server will automatically start when the extension activates.

Available Tools

The MCP server exposes 17 tools for AI/LLM consumption:

Manual MCP Server Configuration

If the automatic MCP server registration doesn't work in your editor (e.g., when using Antigravity, Cursor, or if you want to use the server outside of VS Code), you can manually configure the MCP server.

{
  "servers": {
    "graph-it-live": {
      "type": "stdio",
      "command": "node",
      "args": ["${extensionPath:magic5644.graph-it-live}/dist/mcpServer.mjs"],
      "env": {
        "WORKSPACE_ROOT": "${workspaceFolder}",
        "EXCLUDE_NODE_MODULES": "true",
        "MAX_DEPTH": "50"
      }
    }
  }
}

{
  "mcpServers": {
    "graph-it-live": {
      "command": "bash",
      "args": ["-c", "node ~/.cursor/extensions/magic5644.graph-it-live-*/dist/mcpServer.mjs"],
      "env": {
        "WORKSPACE_ROOT": "${workspaceFolder}",
        "EXCLUDE_NODE_MODULES": "true",
        "MAX_DEPTH": "50"
      }
    }
  }
}

{
  "mcpServers": {
    "graph-it-live": {
      "command": "node",
      "args": ["${extensionPath:magic5644.graph-it-live}/dist/mcpServer.mjs"],
      "env": {
        "WORKSPACE_ROOT": "${workspaceFolder}",
        "EXCLUDE_NODE_MODULES": "true",
        "MAX_DEPTH": "50"
      }
    }
  }
}

ls ~/.vscode/extensions/ | grep graph-it-live
# Example output: magic5644.graph-it-live-1.0.0

{
  "mcpServers": {
    "graph-it-live": {
      "command": "bash",
      "args": ["-c", "node ~/.vscode/extensions/magic5644.graph-it-live-*/dist/mcpServer.mjs"],
      "env": {
        "WORKSPACE_ROOT": "/path/to/your/project",
        "EXCLUDE_NODE_MODULES": "true",
        "MAX_DEPTH": "50"
      }
    }
  }
}

{
  "mcpServers": {
    "graph-it-live": {
      "command": "node",
      "args": ["/path/to/Graph-It-Live/dist/mcpServer.mjs"],
      "env": {
        "WORKSPACE_ROOT": "/absolute/path/to/your/project",
        "TSCONFIG_PATH": "/absolute/path/to/your/project/tsconfig.json",
        "EXCLUDE_NODE_MODULES": "true",
        "MAX_DEPTH": "50"
      }
    }
  }
}

Development

Project Structure

Graph-It-Live/
├── src/
│   ├── analyzer/          # Dependency analysis (AST parsing)
│   ├── extension/         # VS Code extension host logic
│   ├── shared/            # Shared types
│   └── webview/           # React + ReactFlow UI
├── tests/                 # Vitest unit tests
└── ...

Setup

1.Clone: bash git clone https://github.com/magic5644/Graph-It-Live.git cd Graph-It-Live 2.Install: bash npm install 3.Run: - Press F5 in VS Code to start the Extension Development Host.

License

MIT License - see LICENSE file for details.

Author

magic56 (magic5644)