Hey bugs, I know it’s been a while.

Lately, I’ve been experimenting with building small hacking-inspired tools. My latest creation is a “vibe-coded” security helper which is an app that uses AI to detect potential vulnerabilities in source code and offer quick insights. Think of it as a playful but useful tool for developers who want a first-pass security check.

To make it work, I built the frontend with Lovable, tapped into Gemini’s API for AI-powered analysis, and used Cloudflare Workers to keep my API key locked down and secure.

If you’re looking for a hands-on example of connecting an AI model securely to a front-end app, this guide is for you.

What We’re Building

• Frontend: Lovable (drag-and-drop app builder).
• AI Model: Gemini API (Google’s generative AI).
• Security Layer: Cloudflare Workers to hide and protect the API key.

We’ll let users paste in code snippets, send them securely to the Gemini model for vulnerability analysis — without ever exposing the Gemini API key to the browser.

Why Use Cloudflare Workers?

Normally, if you connect directly from the frontend to Gemini’s API, you’d need to expose your API key — not good.
Cloudflare Workers act as a secure middle layer:

Browser <--> Cloudflare Worker <--> Gemini API

This way:

• The Worker stores the secret key securely.
• The frontend only calls the Worker endpoint.
• You can add rate limiting, logging, or extra validation at the edge.

Step 1: Set Up the Worker

1. Log in to Cloudflare and go to Workers.
2. Create a new Worker (e.g., gemini-proxy).
3. In the Worker’s settings, add your Gemini API key as an Environment Variable / Secret:

wrangler secret put GEMINI_API_KEY

4. Add the Worker code (example below).

Cloudflare Worker Code

export default {
  async fetch(request, env) {
    if (request.method !== 'POST') {
      return new Response('Only POST allowed', { status: 405 });
    }
export default {
  async fetch(request, env) {
    if (request.method !== 'POST') {
      return new Response('Only POST allowed', { status: 405 });
    }
    // Get the JSON body from the frontend
    const body = await request.json();
    const codeSnippet = body.code; // user-submitted code snippet
    // Forward request to Gemini API securely
    const geminiResponse = await fetch('https://api.gemini.com/v1/generate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${env.GEMINI_API_KEY}`,
      },
      body: JSON.stringify({
        prompt: `Analyze the following code for security vulnerabilities:\n\n${codeSnippet}`,
        max_tokens: 200
      })
    });
    const result = await geminiResponse.json();
    return new Response(JSON.stringify(result), {
      headers: { 'Content-Type': 'application/json' }
    });
  },
};

This Worker does three things:

1. Accepts code snippets from the frontend.
2. Sends them securely to Gemini API using the secret key.
3. Returns AI-powered vulnerability analysis to the browser.

Step 2: Connect Lovable Frontend to the Worker

In Lovable:

• Create a form with a text area for the code snippet.
• On submit, send a POST request to your Cloudflare Worker URL:

async function analyzeCode(code) {
  const res = await fetch('https://your-worker-url.workers.dev', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ code })
  });
  const data = await res.json();
  // Display Gemini’s response in your Lovable app
  return data;
}

Because the Worker is public, but the key stays hidden, your front-end is safe.

Extra Security Tips

• Rate limit requests: In the Worker, add logic to block abuse based on IP or tokens.
• Validate input: Check for empty or malicious inputs before sending to Gemini.
• Use HTTPS: Workers automatically run on HTTPS.
• Monitor usage: Cloudflare Analytics + Gemini dashboard help you see traffic and spot anomalies.

The Result

You now have:

• A no-code/low-code frontend built with Lovable.
• A powerful AI backend using Gemini API for vulnerability analysis.
• A secure edge-layer with Cloudflare Workers to protect your secret keys and API usage.

Users just paste code and get instant AI-powered insights, while your keys stay private and safe.

Takeaways

• Don’t expose API keys on the client. Always use a server or edge function.
• Cloudflare Workers are perfect for lightweight API proxies.
• Combining low-code tools + serverless security layers = fast MVPs without cutting corners.

Hope you liked this one, feel free to build your own tool based off this template and feel free to share it!