Decompile.AI — Frontend
A web-based reverse engineering platform. Upload binaries, run static analysis engines (IDA, Ghidra), explore disassembly with an IDE-style interface, and interact with an AI assistant that suggests code mutations.
Tech Stack
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript 6 |
| Bundler | Vite 8 |
| Routing | React Router 7 (client-side, lazy-loaded routes) |
| Styling | Tailwind CSS 4 + shadcn/ui (Radix UI primitives) |
| Server state | TanStack React Query 5 |
| HTTP client | Axios |
| API codegen | Orval (from OpenAPI spec) |
| Chat streaming | SSE via fetch + ReadableStream |
| Markdown | react-markdown + remark-gfm + remark-breaks |
| Code highlighting | react-syntax-highlighter |
| Graph layout | @dagrejs/dagre (CFG visualization) |
| Fonts | Inter (sans) + JetBrains Mono (monospace) |
Project Structure
src/
├── api/
│ ├── api.ts # Axios instance
│ └── generated/ # Orval auto-generated hooks & types
├── components/
│ ├── layout/ # AppLayout, Header
│ └── ui/ # shadcn/ui components
├── features/
│ ├── binary/ # Analysis page: code viewer, CFG, AI chat, mutations
│ ├── home/ # Workspace list
│ ├── jobs/ # Job queue
│ ├── libraries/ # Library symbol database
│ ├── project/ # Binary list + upload
│ └── workspace/ # Project list
├── pages/ # Route-level page components + Router
├── providers/ # React Query + Tooltip + Toaster
├── lib/utils.ts # cn() class helper
└── utils/ # Formatting utilities
Getting Started
Prerequisites
- Node.js 22+
- A running instance of the Decompile.AI backend (default:
http://localhost:8080)
Setup
# Install dependencies
npm install
# Copy and configure environment
cp .env.example .env.local
# Edit VITE_API_BASE_URL if your backend runs on a different host/port
Environment Variables
| Variable | Default | Description |
|---|---|---|
VITE_API_BASE_URL |
http://localhost:8080 |
Backend API base URL |
Development
npm run dev # Start Vite dev server with HMR
The app will be available at http://localhost:5173.
Production Build
npm run build # Type-check + production bundle
npm run preview # Preview the production build locally
Lint & Format
npm run lint # ESLint check
npm run lint:fix # ESLint auto-fix
npm run format # Prettier format
API Client Generation
The API client in src/api/generated/ is auto-generated by Orval from the backend's OpenAPI spec.
npx orval # Regenerate API hooks and types
The spec endpoint is configured in orval.config.ts (default: http://localhost:8080/v3/api-docs).
Docker
Build
docker build -t decompile-ai-frontend .
Uses a multi-stage build: Node.js builder (node:22-alpine) → Nginx runtime (nginx:alpine).
Run with Docker Compose
docker-compose up
The docker-compose.yml exposes the frontend on port 3000 and expects the backend at http://backend:8080. Nginx proxies /api/ requests to the backend.
Features
Workspace & Project Management
- Create, edit, delete workspaces and projects
- Upload binaries (executables, DLLs, etc.)
- Manage companion dependencies for binaries
Binary Analysis (IDE-Style 3-Panel Layout)
- Left panel — Function tree (filterable, segmentable), strings, imports, global variables, structures, enums, cross-references
- Center panel — Assembly view with syntax highlighting, control-flow graph visualization (dagre), pseudocode (decompiled C)
- Right panel — AI chat assistant with SSE streaming, mutation suggestion cards (rename, signature, comments, flags)
Analysis Engines
- Trigger analysis via IDA or Ghidra engines
- Track analysis progress on the Jobs page
AI Chat
- Multi-session chat with streaming responses (SSE)
- Markdown rendering with code syntax highlighting
- AI-suggested mutations: approve or reject renames, signatures, comments, and flags for functions, global variables, labels, and structures
Jobs Queue
- View and filter all jobs (status, type)
- Statistics dashboard (running, queued, completed, failed)
- Cancel running jobs
Library Symbols
- Upload library symbol dumps (Turbo Dump format)
- Browse library symbols (paginated)
- Bulk resolution of imports against libraries
Pages
| Route | Page | Description |
|---|---|---|
/ |
Home | Workspace list |
/workspace/:id |
Workspace | Projects within a workspace |
/project/:id |
Project | Binaries within a project |
/binary/:id |
Binary | Main analysis view (3-panel IDE) |
/jobs |
Jobs | Job queue and stats |
/libraries |
Libraries | Library symbol database |
Theme
Dark-only IDE theme using OKLCH color space with teal accent. Custom CSS properties for code syntax highlighting (keywords, strings, comments, functions, addresses).