ki-zore/voice-based-coding-assistant

Purpose and entry points

This is a Vite-powered React/TypeScript single-page voice coding assistant for visually impaired developers. It accepts spoken commands, generates or explains code through Gemini, and presents accessible transcript/editor feedback. Browser startup is src/main.tsx; application composition and state coordination begin in src/App.tsx.

Application shell and orchestration

src/App.tsx is the central UI/controller boundary: it assembles the voice, transcript, command-processing, editor, explanation, and session-facing components. src/index.css provides the shared presentation layer. There is no Express server in the supplied tree; external AI and persistence calls appear to be made from the client-side library modules.

Voice I/O pipeline

Speech capture is encapsulated by src/hooks/useSpeechRecognition.ts and surfaced through src/components/VoiceInput.tsx. Recognized speech is forwarded as text into the command/transcript flow. Spoken output is isolated in src/hooks/useSpeechSynthesis.ts, allowing generated responses and UI feedback to be read aloud without coupling speech APIs to AI or editor logic.

Command and AI generation boundary

src/components/CommandProcessor.tsx interprets user text as coding requests and coordinates generation behavior. The Gemini service boundary is src/lib/gemini.ts; this module should own requests, API configuration, and response normalization so UI components do not directly depend on the GenAI API. Generated code and explanations are then routed to presentation components.

Code and explanation workspace

src/components/CodeEditor.tsx is the generated-code display/editing surface. src/components/ExplanationPanel.tsx presents explanatory output separately from code, preserving a distinction between executable/editable artifacts and natural-language guidance. src/components/TranscriptBox.tsx exposes the conversational record, serving as the user-visible history of voice input and assistant output.

Session persistence

src/components/SessionTracker.tsx represents session lifecycle/history behavior. Its backend integration boundary is src/lib/supabase.ts, with schema ownership in supabase/migrations/20251013162434_create_voco_sessions_table.sql. The intended flow is UI/session events → Supabase client → persisted voco_sessions records; database details should remain outside voice and AI components.

Runtime and external dependencies

The frontend runs in the browser via Vite (src/main.tsx, vite.config.ts) and React. Material external services are Gemini for generative AI (src/lib/gemini.ts) and Supabase for session storage (src/lib/supabase.ts, supabase/migrations/20251013162434_create_voco_sessions_table.sql). Browser speech-recognition and speech-synthesis capabilities are core runtime dependencies, wrapped by the hooks rather than accessed throughout the UI.