Version: 0.1.1 Beta
This project is a modern single-page application (SPA) built with React, TypeScript, and Vite. This stack provides a fast, modern development experience and a highly optimized production build.
During local development (using npm run dev), the application is served by the Vite development server. Vite leverages the browser's native ES Modules (ESM) support to serve source files on demand. This provides:
For production, the application is bundled and optimized using Vite's build process (npm run build). The Dockerfile.txt orchestrates this using a robust multi-stage build:
npm install) and run the production build script (npm run build). This transpiles all TypeScript, bundles the application into highly optimized static JavaScript and CSS files, and places them in a /dist directory./dist directory from Stage 1 is copied into the server's public directory.This multi-stage approach results in a small, secure, and performant final Docker image that contains only the static files needed to run the application, with no source code or build tools included.
The application employs a pragmatic, tiered approach to state management without external libraries like Redux.
useState): Most UI state (input values, loading spinners) is kept local to its component.App.tsx component acts as the central hub, managing crucial shared state like the current view, analysis history, and selected reports.useContext): Truly global settings that are needed across the entire application—API keys, theme, selected model—are managed by the SettingsProvider. This avoids prop drilling for ubiquitous data.useWebSecAgent) are used to encapsulate all related state and logic, keeping the main App.tsx component clean.The services/ directory contains the most critical pieces of application logic. It is the sole interface between the frontend UI and the generative AI models, abstracting all API complexity away from the React components.
Service.ts)This file acts as a facade for all AI interactions. No React component should ever call fetch directly. Instead, they call a function from Service.ts (e.g., analyzeUrl, forgePayloads). This centralizes logic and makes the application easier to maintain and debug.
services/prompts/)The effectiveness of the entire application hinges on high-quality prompt engineering. All prompts are modularized and stored in the prompts directory. This separation of concerns allows for easy tuning of the AI's behavior without altering the core application logic.
Generative AI can be non-deterministic. To improve reliability, key analysis functions (like DAST and SAST) use a recursive, multi-attempt strategy. The UI asks for an "Analysis Depth" (e.g., 3), and the service layer then calls the AI 3 times, each with a slightly different prompt variation. The results are then passed to a final "consolidation" prompt, where the AI is asked to merge and de-duplicate the findings into a single, high-quality report. This significantly reduces false negatives and improves consistency.
utils/apiManager.ts)To ensure the application is robust and doesn't abuse the API, a centralized manager handles all requests. It implements:
Each tool's effectiveness relies on its unique prompt engineering methodology.
The application uses a hybrid approach for a consistent and maintainable "hacker" aesthetic.
index.html.:root block in index.html. This allows for easy global theme changes and provides a consistent palette for custom components.--glass-bg) and a subtle border (--glass-border), combined with the backdrop-blur utility from Tailwind.The application is designed for easy deployment using Docker. This method correctly runs the Vite build process and configures an Nginx web server to serve the resulting static files.
Instructions:
chmod +x dockerizer.sh.txt (and rename it to dockerizer.sh)../dockerizer.shThe script will build the Docker image and launch the container. You can then access the application at http://localhost:6869.
This project is open-source and contributions are welcome. To ensure a smooth and secure development process, please be aware of the following files:
The project is licensed under the MIT License. This is a permissive license that allows for broad use, modification, and distribution, both in open-source and proprietary projects, provided the original copyright and license notice are included.
A brief overview of the key files and directories in the project.
/components: Contains all reusable React components that form the UI./contexts: Holds React Context providers, such as SettingsProvider.tsx for global state./hooks: Contains custom React hooks that encapsulate complex logic (e.g., useWebSecAgent.tsx)./services: The core logic layer.
Service.ts: The main entry point for all API calls./prompts: Directory containing all prompt engineering logic, separated by feature.systemPrompts.ts: Defines the core "personas" for the AI agents./utils: Helper functions and utilities, such as the apiManager.ts and reportExporter.ts./devinfo & /userinfo: Static HTML files for the documentation modals.App.tsx: The root component that manages the main application state and routing.types.ts: Centralized TypeScript type definitions and enums.Dockerfile.txt & docker-compose.yml.txt: Configuration for building and running the application with Docker.To make a change, simply edit the relevant .tsx or .ts file. The Vite development server (started with npm run dev) will automatically update the browser with your changes, often without a full page reload, thanks to Hot Module Replacement (HMR).