Project Story: CodeGuardian
Inspiration
In the fast-paced world of software development, security often takes a backseat to feature delivery. We noticed a recurring pattern: developers want to write secure code, but traditional Static Application Security Testing (SAST) tools are often expensive, slow, or flood them with false positives. Furthermore, these tools lack the contextual awareness to explain why a piece of code is vulnerable.
We were inspired by the capabilities of modern Large Language Models (LLMs), specifically Google Gemini, to understand code semantics. We asked ourselves: What if we could give every developer an AI security expert that sits right in their browser?
What it does
CodeGuardian is an intelligent security auditor that lives in your browser. It allows developers to:
- Analyze Code Instantly: Users can paste snippets, upload files, or provide a GitHub repository URL.
- Identify Vulnerabilities: The system scans for critical issues like SQL injection, XSS, hardcoded secrets, and insecure authentication patterns (OWASP Top 10).
- Understand the Risks: Unlike standard linters, CodeGuardian provides natural language explanations for why a specific line is dangerous.
- Get Remediation Steps: It offers concrete, copy-pasteable code fixes to resolve security flaws immediately.
- Privacy-First Auditing: All API keys are stored locally, and code is sent directly to the LLM without passing through an intermediary server.
How we built it
We scrutinized every part of the stack to ensure speed and privacy:
- Frontend: Built with React and Vite for performance. We used TypeScript for type safety.
- UI/UX: Designed with Tailwind CSS and Shadcn UI to create a professional "Dark Mode" aesthetic that developers love.
- AI Engine: We integrated the Google Gemini API (Generative AI SDK). We engineered complex system prompts to act as a strict security rubric.
- Algorithm: The app preprocesses code inputs, chunks large files to fit context windows, and constructs a prompt vector $P = f(C, R)$ where $C$ is code and $R$ is our security rubric.
- State Management: leveraged React Context for managing application state and ensuring a smooth user flow between scanning and reporting.
Challenges we ran into
- Hallucinations: Early versions of the model would sometimes "invent" vulnerabilities. We had to rigorously tune our prompt engineering to demand citation of specific line numbers and confidence scores.
- Context Limits: Scanning entire GitHub repositories hit token limits. We implemented a strategy to fetch only relevant file types and process them in logical chunks.
- Browser Security: Handling local API keys securely without a backend required careful implementation of client-side storage best practices.
Accomplishments that we're proud of
- Zero-Backend Architecture: We successfully built a fully functional SaaS-level tool that runs entirely in the client's browser, significantly reducing hosting costs and privacy risks.
- The UI Polish: We managed to create a dashboard that looks and feels like a premium enterprise security product.
- Real-time Analysis: Achieving a response time that feels almost instantaneous for small-to-medium files, making security checks strictly faster than waiting for a CI/CD pipeline.
What we learned
- Prompt Engineering is Engineering: The difference between a generic chat bot and a security tool is entirely in the structure and constraints of the system prompt.
- User Trust: We learned that explaining why something is wrong is just as important as flagging it. The educational aspect turns the tool from a "gatekeeper" into a "guide."
- Modern Web Capabilities: The browser is capable of handling much heavier workflows (like parsing and file processing) than we initially gave it credit for.
What's next for CodeGuardian
- VS Code Extension: Bringing CodeGuardian directly into the IDE so developers see alerts as they type.
- Custom Rule Sets: Allowing organizations to define their own compliance rules (e.g., "Always use company-internal crypto library").
- CI/CD Integration: Creating a GitHub Action that automatically comments on Pull Requests with CodeGuardian's findings.
- Multi-Model Support: Adding support for other models like Claude or GPT-4 for cross-verification of results.
Built With
- github
- google-gemini-api
- react
- shadcn-ui
- tailwind-css
- typescript
- vercel
- vite
Log in or sign up for Devpost to join the conversation.