Developer Reference
This section provides technical documentation for developers who want to understand, modify, or contribute to LLMxRay.
Overview
LLMxRay is a Vue 3 + TypeScript single-page application that communicates with a local Ollama instance. It uses Pinia for state management, IndexedDB for persistence, and a streaming architecture for real-time token display.
| Layer | Technology |
|---|---|
| Framework | Vue 3.5 + Composition API (<script setup>) |
| Language | TypeScript 6 (strict) |
| Build | Vite 8 |
| Styling | Tailwind CSS 4.3 |
| State | Pinia 4 (one store per concern) |
| Routing | Vue Router 5 |
| Charts | Chart.js 4 + vue-chartjs, D3.js 7 |
| Canvas | Vue Flow 1.x (node-based visual editor) |
| Code Editor | CodeMirror 6 |
| AST Parser | Recast + @babel/parser |
| Storage | IndexedDB (browser-native) |
| LLM Backend | Ollama (local, via proxy) |
Sections
- Architecture — Data flow, streaming, storage, plugins
- Stores — All 24 Pinia stores with state and actions
- Services — All 36 service modules with responsibilities
- Composables — All 7 Vue composables
- Types — Key TypeScript interfaces
- API Integration — Ollama endpoints, proxy, streaming protocols
- Testing — Vitest and Playwright setup and patterns