Adding Cookie Consent to AI-Built Apps: A Developer's Guide to Lovable, Bolt, v0, Replit, Base44 and Firebase Studio

Apps built with Lovable, Bolt, v0, Replit, Base44 and Firebase Studio start storing data on a visitor's device the moment the page loads, through auth sessions, built-in analytics, or embedded third-party scripts, yet not one of these tools generates a consent banner for you. Adding one is the developer's job. Where the consent script goes depends almost entirely on a single question: did your builder output a Vite single-page app or a Next.js app?

That split decides everything practical about the implementation. The legal duty is identical across all six platforms. The injection point, the loading order, and the route-change handling are not.

Do AI-built apps actually set cookies that need consent?

Yes. Almost every app generated by these tools writes to the browser before a visitor clicks anything, and most of that storage is not strictly necessary. A login session, an embedded analytics tag, a font or map loaded from a CDN, a payment widget: each can set a cookie or write to local storage on arrival, and under EU law non-essential storage needs prior consent.

The relevant rule is Article 5(3) of the ePrivacy Directive, and one detail trips up most developers working with these platforms: it is technology-neutral. It governs the storing of information, or the gaining of access to information already stored, on a user's device. That covers cookies, but it also covers localStorage, IndexedDB, and session storage. An app that proudly "uses no cookies" while writing an analytics identifier to localStorage sits in exactly the same position as one that sets _ga.

A cookie consent banner is the interface that asks for that permission and, more to the point, holds the non-essential scripts back until the visitor agrees. Strictly necessary storage is exempt: a session token that keeps a logged-in user authenticated while they use a feature they asked for does not need consent. Analytics and advertising cookies always do. The practical task is sorting your app's storage into cookie categories and gating everything that is not essential.

What does the law require, regardless of which builder you used?

The same four things on every platform: consent must be obtained before any non-essential cookie is set, it must be informed and specific, refusing must be as easy as accepting, and a visitor must be able to withdraw it later. Pre-ticked boxes and "by continuing to browse you accept" notices do not count. None of that changes because an AI wrote the code.

Enforcement has made the cost concrete. On 1 September 2025 the French data protection authority, the CNIL, fined SHEIN's Irish subsidiary 150 million euros for placing advertising cookies before any consent was given and for a "Reject all" button that did not actually stop cookies from being set. The same day, the CNIL issued Google a 325 million euro fine over related cookie and consent failures. Across 2025 the regulator handed down 83 sanctions totalling roughly 486.8 million euros, with cookie and tracker violations making up the bulk, including a 1.5 million euro penalty against American Express.

Two points from those decisions apply directly to a vibe-coded app. Cookies that fire on arrival, before the banner loads, are a breach. And a reject control that records a preference while scripts keep running is treated as no consent at all. Both are the exact failure modes an AI builder produces by default, because it wires up analytics and auth without ever sequencing them behind a consent check. The rules apply identically whether you ship to one country or operate across the EU and UK, though the precise thresholds shift by region, which is where per-market global compliance settings start to matter.

The two injection surfaces: Vite single-page apps versus Next.js apps

Every one of the six builders produces one of two app shapes, and that shape is the only thing you need to identify before adding a banner.

The first shape is a Vite single-page app. It has a real index.html file at the project root, and a single consent script in its head runs before any application code. The second shape is a Next.js app. It has no index.html at all, so the script goes into the root layout through the framework's own Script component. Get the shape wrong and the banner either fails to load early enough or throws a build error.

One builder sits in both columns. Bolt runs whatever framework you prompt for inside StackBlitz WebContainers, so a Bolt app might be a Vite project or a Next.js project depending on what you asked for. Check whether the project has an index.html before you start.

How do you add a banner to a Lovable, Base44, or Bolt (Vite) app?

Drop a single script tag into the head of index.html, above the module script that boots the app, then handle route changes in the single-page router. Because the file is plain HTML and loads first, the banner can block non-essential scripts before React mounts. This is the cleaner of the two surfaces to work with.

The injection itself is one line:

<script src="https://cdn.your-cmp.com/loader.js" data-site-id="YOUR_ID"></script>

The catch is routing. These apps never reload the page, so a banner that only runs on first load will not re-evaluate consent when a visitor moves between views, and any analytics that should fire on a virtual page view needs a nudge. Wire a small effect to the router so consent-gated tags re-check on every navigation:

import { useLocation } from "react-router-dom";
import { useEffect } from "react";

function ConsentRouteSync() {
  const location = useLocation();
  useEffect(() => {
    window.cmp?.refresh();
  }, [location.pathname]);
  return null;
}

Lovable

Lovable ships a Vite and React single-page app with a near-empty index.html head, and its Supabase backend sets an auth session cookie once a user logs in. The session itself is essential; anything analytics-related is not. The full walk-through for cookie consent on Lovable covers the Agent Mode prompt that adds the tag for you.

Base44

Base44 apps are standard React apps built with Vite, so the same index.html approach applies. The twist is that Base44 bundles its own authentication and its own usage analytics inside its hosted backend, so the app can be tracking visitors through first-party storage even when you have added no third-party tags at all. Treat that built-in analytics as non-essential. The Base44 banner guide goes into the hosted-backend specifics.

Bolt

If Bolt generated a Vite project, this is your surface; if it generated Next.js, skip to the next section. Bolt commonly pairs with Supabase or, since Bolt v2, its own built-in auth, both of which set session storage on login. The Bolt.new consent guide has the framework-detection steps.

How do you add a banner to a v0, Firebase Studio, or Replit (Next.js) app?

Inject the consent loader through next/script in app/layout.tsx with a beforeInteractive strategy, so it runs before the page hydrates. Next.js has no index.html to edit, and pasting a raw script tag into a component is the wrong move because the framework controls script ordering itself. The root layout is the one place a tag reliably loads on every route.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://cdn.your-cmp.com/loader.js"
          data-site-id="YOUR_ID"
          strategy="beforeInteractive"
        />
        {children}
      </body>
    </html>
  );
}

Server-rendered routes add a second place cookies can appear: Next.js can write them in a Server Component or Route Handler through the cookies() function, entirely outside the browser script's view. Audit the server side as well as the client.

v0 by Vercel

v0 generates Next.js components with shadcn/ui, and a bare component genuinely sets nothing. The "no cookies" reputation breaks the instant the app reaches production. Vercel Web Analytics and the @vercel/analytics package begin tracking the moment they load and ship with no built-in consent gate, and because that tracking can run through localStorage, the technology-neutral wording of Article 5(3) still catches it. Gate the <Analytics /> component behind consent rather than rendering it unconditionally. The v0 and Vercel guide shows the conditional wrapper.

Firebase Studio

Firebase Studio's App Prototyping agent builds Next.js apps and publishes them to Firebase App Hosting, usually with Firebase Authentication and Cloud Firestore wired in. Firebase Auth stores its session in IndexedDB by default rather than a cookie, which, again, Article 5(3) still covers. One timing note for anyone reading this in 2026: Google disabled new Firebase Studio sign-ups on 22 June 2026 and is sunsetting the product on 22 March 2027, with migration pointed at Google AI Studio and Antigravity, though apps already deployed keep running. The Firebase Studio consent guide covers the Firebase-specific tags.

Replit

Replit's Agent defaults to a Next.js and PostgreSQL stack for most full-stack builds, so the app/layout.tsx method is the usual route, but the Agent can produce other stacks, so confirm yours first. Replit Auth sets a first-party session cookie, and the one-click deployment puts the app on a live URL straight away, tracking and all. The Replit consent guide handles the stack-detection edge cases.

How do you confirm the banner actually blocks cookies?

Open the browser developer tools, go to the Application panel, and read what is in Cookies and Local Storage before you touch the banner. On a compliant setup, only strictly necessary entries should be present at that point. Anything analytics or advertising related appearing before consent is the SHEIN failure mode, and it is the single most common defect in a vibe-coded app.

Then test the controls properly. Click "Reject all" and confirm no new non-essential storage appears and nothing already set keeps transmitting in the Network tab. Reload, accept, and confirm the tags fire only then. On a single-page app, navigate between routes and re-check, since that is where a first-load-only banner quietly leaks. A scan with a cookie scanner automates the inventory and flags anything firing before consent, which is faster than reading the storage panel by hand on every build.

Is cookie law about to get easier for these apps?

Possibly, but not yet, and not in a way you can build on today. In September 2025 the European Commission opened a call for evidence for its Digital Omnibus package, which floats simplifying parts of the EU's cookie rules to cut consent fatigue. Nothing is in force, the scope is undecided, and the ePrivacy Directive as written still applies in full.

The UK is moving on a similar track. The Data (Use and Access) Act 2025 will let sites set a narrow set of low-risk cookies without consent once its provisions commence, while raising the maximum penalty for cookie breaches from 500,000 pounds towards the GDPR-level ceiling of 17.5 million pounds. Until these reforms actually land, the prudent build for any app shipped from one of these six tools is consent-first.

Frequently Asked Questions

Scan Your AI-Built App Before You Ship It

If you built your app with one of these tools and have not checked what it stores on arrival, start with a scan. Kukie.io detects first-party and third-party cookies and local storage, sorts them by category, and loads a consent banner from a single script tag that drops into index.html or a Next.js layout.

Start free and scan your app