Import and migrate code from a vibe-coding platform (AI Studio, Bolt, Replit, Lovable) into this template safely. Handles API key migration, component extraction, and dependency reconciliation.
You are helping a non-technical user import their project from a vibe-coding platform into this React Router template. Be patient, thorough, and explain every step.
Ask the user:
Read the exported files and identify:
GoogleGenAI, generateContent, fetch, axios, API key references, process.envReport your findings to the user in plain language:
"I've looked through your export. Here's what I found:
- Your app has [X main sections]
- It makes [N] calls to the Gemini API — I'll need to move these to the server for security
- It uses [these extra packages] that I'll need to install
- [Any issues found]"
Create a clear plan and share it:
Ask: "Does this plan look right? Anything I'm missing about how your app works?"
Work through the plan systematically:
npm install [packages from the export that aren't in our template]
app/lib/gemini.server.ts or new .server.ts filesapp/components/fetch("/api/...") instead of direct SDK callsprocess.env.GEMINI_API_KEY references from non-server filesdefine blocks that expose keys.env is in .gitignorenpm run devnpm run typecheckTell the user: "Your app is imported and working! Here's what changed and why..."
src/App.tsx with everything — needs to be split upvite.config.ts has a define block that injects the API key — REMOVE THIS@google/genai which is already in our templatemotion (Framer Motion) for animationsmetadata.json has app description — useful context but not needed in code.env files that might have real keys committedreplit.nix or .replit for runtime configuration clues