LogSniffer is a full-stack web application that provides a security-focused dashboard for analyzing Snyk audit logs. The application integrates with Snyk's API to fetch audit log data and uses configurable AI (e.g. Google Gemini, OpenAI, or custom OpenAI-compatible endpoints) to provide intelligent insights and recommendations about security events. Built with React, Express, and PostgreSQL, it offers real-time audit log monitoring, AI-powered analysis, and an interactive chat interface for security insights.
Preferred communication style: Simple, everyday language.
Follow these instructions to get the project up and running on your local machine for development and testing purposes.
- Node.js (v18 or later recommended)
- npm (comes with Node.js)
- Git
-
Clone the repository:
git clone <repository-url> cd log-sniffer
-
Install dependencies: This command will install all the necessary packages for both the client and server.
npm install
-
Environment Variables
Create a
.envfile in the project root if needed. Snyk API credentials and the AI provider (e.g. Gemini, OpenAI) are configured in the application UI after you run the app—no server-side API keys are required for AI. You can set Snyk and database-related variables in.envif you prefer; the UI will override session-stored config. -
Run the Application
To start the development server, run the following command from the root directory:
npm run dev
This will start both the backend server and the frontend Vite development server. You can access the application in your browser at
http://localhost:5000.
- Framework: React 18 with TypeScript in a Vite-based build system
- UI Library: Radix UI components with shadcn/ui design system implementation
- Styling: Tailwind CSS with Snyk's 2025 brand colors and design tokens
- State Management: TanStack Query for server state management and caching
- Routing: Wouter for lightweight client-side routing
- Form Handling: React Hook Form with Zod validation schemas
- Runtime: Node.js with Express.js framework
- Language: TypeScript with ES modules
- API Design: RESTful endpoints with structured error handling
- Development Server: Vite middleware integration for hot module replacement
- Request Logging: Custom middleware for API request/response logging
- Database: PostgreSQL with Drizzle ORM for type-safe database operations
- Connection: Neon Database serverless PostgreSQL adapter
- Schema Management: Drizzle Kit for migrations and schema evolution
- Storage Strategy: Hybrid approach with in-memory storage for development and PostgreSQL for production
- API Integration: Snyk API token-based authentication
- Session Management: PostgreSQL-backed session storage with connect-pg-simple
- Configuration Management: Environment-based API token and connection string management
- Snyk API: Core integration for fetching audit logs, organizations, and groups data
- AI/LLM: Configurable in the UI—support for Google Gemini, OpenAI, and custom OpenAI-compatible endpoints for analysis and chat
- Neon Database: Serverless PostgreSQL hosting and management
- Database: Drizzle ORM, @neondatabase/serverless, connect-pg-simple
- AI/ML: @google/genai for Gemini; OpenAI-compatible HTTP for OpenAI and custom providers
- UI Components: Comprehensive Radix UI primitive collection
- State Management: @tanstack/react-query for server state caching
- Validation: Zod schemas with drizzle-zod integration
- Utilities: date-fns for date manipulation, clsx and tailwind-merge for styling
- Build System: Vite with React plugin and TypeScript support
- Code Quality: TypeScript for type safety across the full stack
- Development Experience: Replit-specific plugins for error overlay and cartographer
The application follows a modern full-stack architecture with clear separation of concerns, type safety throughout, and integration with external security and AI services to provide comprehensive audit log analysis capabilities.
- Auto-Generated Executive Summaries: When audit data is fetched, the system automatically generates executive summaries for AppSec and Engineering leaders
- Real-Time Data Analysis: Executive summaries fetch fresh data directly from Snyk API for the last 24 hours (up to 500 logs)
- Leadership-Focused Content: Summaries include Executive Overview, Critical Events, Risk Analysis, User Activity, Recommendations, and Metrics
- Download/Copy Functionality: Summaries can be downloaded as text files or copied to clipboard for leadership reports
- Persistent Display: Executive summaries remain visible in the chat interface and don't disappear when new messages are added
- Enhanced UI: Green-themed design distinguishes executive summaries from regular chat messages with dedicated file icons and action buttons
- Title Change: Updated main application title from "Snyk Audit Log Dashboard" to "Log Sniffer"
- Icon Update: Changed title icon from shield (🛡️) to magnifying glass emoji (🔍) for better alignment with "sniffer" concept
- Chat Interface: Removed message icon from "Security Analyst AI" header for cleaner design
- Dialog Fix: Removed duplicate close button ("extra x") from audit log details dialog - now uses only the built-in shadcn/ui dialog close button
- Markdown Enhancement: Added proper Markdown rendering for executive summaries with custom green-themed styling and React Markdown components
- UI-configured AI: Users choose provider (Google Gemini, OpenAI, or Custom), model, and API key in the app—no server env vars required for AI.
- Session-stored config: LLM configuration is stored per session alongside Snyk config.
- Executive Summary Persistence: Executive summaries remain visible when new chat messages are added.
- Gemini API Fix: Updated Gemini AI API call structure to use proper contents array format for SDK compatibility