AI Application
AI ApplicationFull-Stack Web Application

AI Virtual Assistant

A personalized, voice-enabled AI assistant that converts natural-language commands into conversational responses and browser actions.

My Role:Full-Stack Software Engineer & Project Author
Industry:Personal Productivity & AI Software
See Project in Action
Technologies:React 19ViteReact RouterAxiosTailwind CSSNode.jsExpress 5MongoDBMongooseJWTGemini AICloudinaryWeb Speech API
Making AI Assistance Personal and Actionable

Connecting Conversation with Browser Actions

Many AI interfaces can return text, but they often leave users to translate that response into the next action. This project combines conversational AI with voice input, spoken output, assistant personalization, and browser-based actions in one authenticated experience.

01

Users needed a simple way to interact with the assistant through spoken commands as well as application-driven requests.

02

Search, media requests, date and time questions, and general conversation needed predictable intent classification.

03

The assistant needed a user-defined name and avatar so the experience could be configured for an individual user.

04

User accounts, assistant settings, and command history needed to persist across sessions without exposing passwords or client-managed tokens.

The Engineering Solution

A Focused Full-Stack Workflow for Personalized AI Commands

The React and Vite client connects to an Express REST API. The backend authenticates users, stores account and assistant profile data in MongoDB through Mongoose, and brokers requests to Gemini. Browser speech recognition captures commands while speech synthesis reads responses aloud. Gemini returns structured JSON containing an intent type, cleaned input, and response text, which the backend validates before supported intents open services such as search, media, social, calculator, or weather destinations.

Verified Architectural Decisions & Highlights

  • Gemini returns a constrained JSON shape with intent type, cleaned input, and response text so the backend can route commands consistently.
  • Gemini credentials and prompt construction remain on the server behind the protected /api/user/asktoassistant endpoint.
  • JWT verification is centralized in authentication middleware while protected endpoints retrieve the authenticated user through req.userId.
  • MongoDB stores identity, assistant name, avatar URL, timestamps, and command history while Cloudinary handles image storage.
Core Features & Capabilities

Designed for Voice, Personalization and Action

Personalized Assistant Profile

Users can select or upload an avatar and assign a custom assistant name that persists with their account.

Voice-First Interaction

Browser speech recognition captures commands and SpeechSynthesis reads responses aloud.

Intent-Based Command Execution

Supported intents can open Google Search, YouTube, Instagram, Facebook, calculator, and weather destinations.

Authenticated History and Accounts

Sign up, sign in, profile retrieval, command history, and logout are handled through protected API routes.

Verified Project Outcomes

A Protected and Personalized AI Workflow

No user, revenue, performance, or production-usage metrics are available. These outcomes describe implemented product behavior without inventing numerical claims.

ProfileConfigurable IdentityUsers can save an assistant name and avatar to their account.
VoiceHands-Free InteractionSpeech input and output connect browser voice APIs to the assistant.
APIProtected Gemini IntegrationUser commands pass through authenticated server-side orchestration.
ActionsIntent RoutingSupported intents can open search, media, calculator, social, and weather destinations.

Engineering Insights & Key Takeaways

  • • Structured model output makes AI features easier to integrate by creating a stable contract between probabilistic output and deterministic UI behavior.
  • • Authentication belongs at the API boundary, where cookie parsing and JWT verification can protect route operations centrally.
  • • Browser voice APIs require lifecycle coordination for listening, recognition restarts, speech playback, and cleanup.
  • • External media storage keeps profile data lightweight by separating image delivery from user record persistence.

Experience the Project Live

Explore the voice-enabled AI assistant experience

Have a project or system you would like to build?

Let's collaborate on designing high-performance applications, AI architectures, and scalable web solutions.

Schedule a Consultation