DEV Community

Cover image for VibeSafe
Simran Shaikh
Simran Shaikh Subscriber

Posted on

VibeSafe

Gemma 4 Challenge: Build With Gemma 4 Submission

What I Built

VibeSafe — a privacy-first AI code auditor that analyzes your project and generates a Proof of Authorship certificate, identifying your human architectural decisions versus AI-assisted patterns.

The problem VibeSafe solves is real and growing: AI-assisted development is now standard practice, but that creates a trust gap. When submitting to a hackathon, applying for a job, or open-sourcing a project, reviewers increasingly ask — "Did you actually build this, or did an AI?"

VibeSafe answers that question — not by detecting AI, but by surfacing your human decisions: the architecture choices, the product instincts, the specific tradeoffs only you would have made.

How it works

Drop your project files into VibeSafe. Gemma 4 31B reads your entire codebase in one prompt (thanks to the 262K context window) and returns a structured report across four sections:

Section What you get
🔑 Proof of Authorship Your human design decisions vs AI patterns + originality score
🔐 Security Audit Vulnerabilities, exposed secrets, injection risks with specific fixes
🧠 Logic Analysis Edge cases, dead code, race conditions, code quality score
📖 Plain English What your code actually does, explained simply

At the end, you download a signed Proof of Authorship certificate — a plain-text document that lists every architectural decision that proves the project is genuinely yours.

Privacy first

VibeSafe makes a direct API call from your browser to OpenRouter. No backend server. No database. No code stored anywhere. Your API key lives in React state only — closing the tab clears everything.


Demo

🔗 Live App: vibesafe.lovable.app

Quick walkthrough:

Step 1 — Enter your free OpenRouter API key

Step 2 — Upload your project files or paste code

Drag and drop multiple files. VibeSafe accepts .py .js .jsx .ts .tsx .html .css .json .go .rs .php .sql and more.

Step 3 — Watch Gemma 4 analyze your code

The terminal-style loading screen shows exactly what Gemma 4 is doing:

› Connecting to Gemma 4 31B...              ✓
› Reading codebase structure...             ✓
› Running security vulnerability scan...    ✓
› Checking for exposed API keys...          ✓
› Analyzing logic and edge cases...         ✓
› Identifying human architectural decisions ✓
› Detecting AI-generated patterns...        ✓
› Generating Proof of Authorship...         █
Enter fullscreen mode Exit fullscreen mode

Step 4 — Get your full report

Full 4-card report dashboard

Step 5 — Download your Proof of Authorship certificate

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
         VIBESAFE — PROOF OF AUTHORSHIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Generated: 2026-05-16T10:32:11.000Z
Analyzed by: Gemma 4 31B via OpenRouter
Files: app.py, utils.py, config.py

HUMAN CONTRIBUTION SCORE: 78/100

HUMAN ARCHITECTURAL DECISIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Separation of database connection into get_db() factory
   Evidence: Explicit factory pattern in app.py

2. Stateless token design using user ID as token
   Evidence: /login returns raw user ID, deliberate tradeoff

3. Search and todos endpoints intentionally separated
   Evidence: distinct route handlers for different concerns

AI-ASSISTED PATTERNS DETECTED
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Boilerplate Flask route scaffolding
2. Generic try/except error handling blocks

VERDICT: Solid architecture with critical SQL injection 
issues that need fixing before production deployment.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Enter fullscreen mode Exit fullscreen mode

Code

🔗 GitHub: github.com/SimranShaikh20/vibesafe

Tech Stack

  • Frontend: React 18 + Vite + Tailwind CSS + Framer Motion
  • File handling: react-dropzone
  • AI Model: Gemma 4 31B (google/gemma-4-31b-it:free)
  • AI Provider: OpenRouter free tier
  • Deployment: Lovable

Project Structure

vibesafe/
├── src/
│   ├── App.jsx
│   └── components/
│       ├── CodeUploader.jsx     ← drag-drop + paste + API key
│       ├── LoadingAnalysis.jsx  ← animated terminal steps
│       ├── ReportDashboard.jsx  ← 4-card report layout
│       ├── AuthorshipCard.jsx   ← hero card + certificate export
│       ├── SecurityCard.jsx     ← expandable vulnerability list
│       ├── LogicCard.jsx        ← quality score + logic issues
│       └── PlainEnglishCard.jsx ← plain language explanation
Enter fullscreen mode Exit fullscreen mode

How I Used Gemma 4

Model chosen: Gemma 4 31B Dense (google/gemma-4-31b-it)

This was a deliberate choice, not a default. Here is exactly why:

Why not Gemma 4 4B or 2B (edge models)?

The small Gemma 4 models are remarkable for their size — running on a phone or Raspberry Pi is genuinely impressive. But VibeSafe needs to reason across an entire codebase simultaneously, identify cross-file architectural patterns, and generate nuanced judgments about human intent vs AI generation. A 4B model cannot hold enough context or produce reliable structured JSON for this level of analysis.

Why not Gemma 4 26B MoE?

The MoE model is excellent for throughput — activating only 3.8B parameters per token makes it fast and efficient. But for security analysis, I need consistent reasoning quality on every token. A dense model that activates all 31B parameters gives more reliable vulnerability detection. Missing one SQL injection is worse than slower inference.

The killer feature: 262K context window

This is what makes the whole idea possible. I send the entire project — every file concatenated with filename headers — in a single prompt. No chunking, no lost context between files, no missed cross-file dependencies.

// Every file in one shot
const combined = files.map(f => 
  `\n\n=== FILE: ${f.name} ===\n${f.content}`
).join('')

// Single call to Gemma 4 — 262K tokens available
const response = await fetch(
  'https://openrouter.ai/api/v1/chat/completions',
  {
    body: JSON.stringify({
      model: 'google/gemma-4-31b-it:free',
      messages: [{ role: 'user', content: buildPrompt(combined) }],
      temperature: 0.1,
      max_tokens: 4000
    })
  }
)
Enter fullscreen mode Exit fullscreen mode

The authorship prompt

The most interesting engineering decision was how to prompt Gemma 4 to distinguish human decisions from AI patterns. Generic code review prompts don't work — I needed Gemma 4 to think specifically about intent:

You are VibeSafe. Your job is to identify what the human developer 
intentionally designed versus AI-generated or boilerplate code.

Look for:
- Architecture decisions that reflect product thinking
- Specific tradeoffs that reveal human judgment  
- Patterns that are generic and could be AI-generated
- Cross-file design consistency that shows planned thinking

Return structured JSON with human_decisions and ai_patterns arrays.
Enter fullscreen mode Exit fullscreen mode

The key insight: asking about intent produces better results than asking about code quality. Gemma 4's reasoning capability is what makes this distinction meaningful.

Results on VibeSafe's own code

I ran VibeSafe on itself. Here is what Gemma 4 identified as my human decisions:

  • Separating the authorship report as the hero card rather than security (product decision)
  • Using a terminal aesthetic for a code tool (design decision)
  • Direct browser-to-API calls instead of a backend (architecture decision — prioritizing privacy)

And what it flagged as AI-assisted:

  • Boilerplate Tailwind utility class combinations
  • Standard React useState patterns
  • Generic error boundary structure

Originality score: 74/100. That felt honest.


Why this matters beyond the hackathon

The question "did you build this?" is going to become one of the most important questions in software hiring, education, and open source in the next few years. Right now there is no good answer — just vibes and gut instinct.

VibeSafe is a first attempt at making that question answerable. Not by detecting AI (which is an arms race), but by documenting human contribution in a structured, verifiable way.

Gemma 4's 262K context and reasoning capability made this possible to build in a weekend. That says something about where open models are right now.


Built with React + Gemma 4 31B + OpenRouter free tier
GitHub: github.com/SimranShaikh20/vibesafe[=

Top comments (0)