PreBunk AI — Multimodal Cognitive Security

PreBunk AI detects manipulative patterns in text and images using Gemini. This is a Vite + React + TypeScript app styled with Tailwind CSS v4.

Quick Start

• Prerequisites: Node.js 18+ and a Gemini API key
• Install dependencies:

npm install

• Configure environment: create .env.local and set your key. The build maps this value in vite.config.ts.

# .env.local
GEMINI_API_KEY=your_key_here

• Run in development:

npm run dev

• Build and preview production:

npm run build
npm run preview

Environment & Security

• The client references process.env.API_KEY defined in vite.config.ts. Client-only deployments can expose the key in bundled code. For production, prefer a backend proxy that calls Gemini server-side and returns JSON to the client.
• Tailwind v4 is configured via postcss.config.js using @tailwindcss/postcss, and index.css imports Tailwind via @import "tailwindcss";.

Deploy

Vercel (recommended)

• Push the repo to your Git provider.
• Import the project in Vercel.
• Environment variable: GEMINI_API_KEY (Production/Preview).
• Build command: npm run build
• Output directory: dist

If you enabled the secure proxy:

• The function is in api/analyze.ts and will read process.env.GEMINI_API_KEY server-side.
• The client calls the proxy via services/geminiService.ts.

Netlify / Cloudflare Pages

• Build: npm run build
• Publish/Output: dist
• Env var: GEMINI_API_KEY

Optional: Secure API Proxy

To hide your API key in production:

1. Add a serverless function (e.g., api/analyze.ts on Vercel) that reads process.env.GEMINI_API_KEY and calls @google/genai.
2. Update services/geminiService.ts to POST user input (text/image) to /api/analyze and use the JSON response.

I can scaffold this proxy and patch the service on request.

Troubleshooting

• Vite not found ('vite' is not recognized'): run npm install to restore dev dependencies, then npm run build.
• Windows EPERM unlink during npm ci:
  • Close apps locking files; pause antivirus temporarily.
  • Remove node_modules and package-lock.json.
  • Clear cache and reinstall:

Stop-Process -Name node -Force
Remove-Item -Recurse -Force node_modules
Remove-Item -Force package-lock.json
npm cache clean --force
npm install

• Tailwind v4 PostCSS error: install @tailwindcss/postcss and ensure postcss.config.js contains:

export default {
   plugins: {
      '@tailwindcss/postcss': {},
   },
};

• Chart container size warning: give the chart wrapper explicit dimensions. See components/RiskGauge.tsx.

Scripts

• npm run dev — start Vite dev server
• npm run build — production build to dist
• npm run preview — serve the built app locally

Tech Stack

• React 19, Vite 6, TypeScript
• Tailwind CSS v4
• @google/genai (Gemini 3 Flash Preview)
• Recharts

Run and deploy your AI Studio app

This contains everything you need to run your app locally.

View your app in AI Studio: https://ai.studio/apps/drive/1IionE69CxyZXezW2wHcjDam1u_XLBJ92

Run Locally

Prerequisites: Node.js

1. Install dependencies: npm install
2. Set the GEMINI_API_KEY in .env.local to your Gemini API key
3. Run the app: npm run dev