Skip to content

Architecture Overview

┌──────────────────────────────────────────────────────┐
│                    UI (React/TS)                     │
│         Browser-based indexer + graph explorer       │
│           localhost:5173         ┌─────────────────┐ │
│                                  │  Web Worker     │ │
│                                  │  tree-sitter    │ │
│                                  │  WASM parsers   │ │
│                                  └─────────────────┘ │
│                                  ┌─────────────────┐ │
│                                  │  LadybugDB WASM    │ │
│                                  │  graph store    │ │
│                                  └─────────────────┘ │
└──────────────────────────────────────────────────────┘

Components

UI (ui/)

React/TypeScript frontend that runs entirely in the browser. Includes:

  • Graph Explorer — visual graph navigation and search
  • Tree-sitter Web Worker — parses source files using WASM grammars
  • LadybugDB WASM — embedded graph database for storing and querying the knowledge graph
  • Chat Agent — in-app AI agent with access to graph tools via MCP

Protobuf Definitions (proto/)

Shared API contracts used across components.

Claude Code Plugin (claude-code-plugin/)

MCP server configuration that connects Claude Code to OpenTrace.