QuickVest

QuickVest Copilot: Voice-first account opening and first-trade assist

Tracks

Fidelity Open to Invest
Gemini API
Eleven Labs

Inspiration

QuickVest Copilot was inspired by a real problem we saw: new investors freeze at step one. Traditional investing apps throw long forms and financial jargon at people, which creates fear and confusion. Most users drop off before they even complete account setup. We asked a simple question: what if opening an investment account felt like talking to someone who understands finance, compliance, and your goals — not a cold form? That idea became QuickVest Copilot, a conversational onboarding experience where users speak naturally and the app does the rest.

What We Built

QuickVest Copilot is a voice-enabled onboarding assistant integrated into a Next.js account signup flow. Users hold a mic button, speak casually, and the assistant:

Listens and autofills the correct fields on each step
Explains terms in plain language
Carries context across pages
Asks follow-up questions when needed
Suggests a first investment based on goals and risk comfort

How We Built It

Stack

Layer	Tech Used
Frontend	Next.js App Router, React, Tailwind CSS
Voice	`MediaRecorder` API, ElevenLabs STT + TTS
AI Assistant	Gemini 1.5 Flash for NLU + schema extraction
State	React Context Store per onboarding step

Voice → AI → Autofill Flow

Record: User holds mic button, audio captured with MediaRecorder.
Transcribe (STT): Audio sent to /api/stt, ElevenLabs returns { text }.
Understand (Gemini): We send { page, text, context } → Gemini returns:

   {
     "autofill": { "firstName": "John", "email": "john@example.com" },
     "speakToUser": "Thanks John. What's your date of birth?"
   }

Autofill: Only current page fields are merged safely.
Respond: Assistant replies with voice + text using ElevenLabs TTS.
Review: Clean review page before submission.

Data Model

We kept structured onboarding slices to stay organized and LLM-safe:

basics: { firstName, lastName, preferredName, email, phone }
military: { hasService, status, branch, rank }
security: { dob, citizenship }
address: { line1, line2, city, state, zip }
employment: { status, title, employer, regAffiliation, insider, IRSBackup }
trustedContact: { firstName, lastName, phone, email, skip }

Prompt Design

We passed Gemini only what it needed:

Current page name
Page data (fields already filled)
Conversation context
Required response JSON format

This made outputs reliable and prevented hallucinations.

What We Learned

Fast feedback = better voice UX. Showing “Listening…” and “Working…” helps users trust the assistant.
Schema discipline matters. Forcing valid keys prevents AI chaos later.
Route handlers + file uploads require care in Next.js. MIME types must be handled manually.
React Context was enough. No need for Zustand/Redux for small wizards.
Copywriting matters. Short assistant responses outperform paragraphs.

Challenges

HTTP pain: 404, 415, and 502 errors from file uploads and STT timing.
TypeScript quirks: JSX parsing errors until .tsx + "use client" were enforced.
Audio formats: Browsers returned webm/mp4/mpeg. Had to normalize.
Autofill collisions: Fixed by scoping updates to only active pages.