ZN AI (Zunayra)

Public voice Q&A about Zohaib Nawaz on ai.zohaibnawaz.dev—Gemini Live in the browser with server-minted ephemeral tokens and Z-dark noir styling.

Industry: Personal brand · Visitor experience
Category: Voice AI · Portfolio companion
Role: Full Stack Product Engineer — voice UX, token security, deploy
Timeline: 2026
Status: Production deploy (Vercel)
Stack: Vite · React · Express · Gemini Live · ephemeral auth tokens · PWA

Executive Overview

Visitors who prefer speaking over scrolling get a phone-style Q&A about skills, work, and contact—without opening the full portfolio chat drawer.

The product stays intentionally narrow: no desktop agent, no memory editor, no theme lab—just voice, character visuals, and answers grounded in the same facts as zohaibnawaz.dev.

Security is the engineering story: Gemini API keys never reach the browser; /api/live-token mints one-use Live constraints with rate limits and CORS aligned to the production origin.

Business Problem

Existing workflow

Portfolio visitors read long pages or type into text chat when they only want a quick spoken answer about availability, stack, or how to hire.

Pain points

Embedding a full API key in client bundles is unacceptable for a public marketing surface.
Voice sessions feel broken when tokens expire or mint endpoints get hammered without quotas.
A generic assistant voice undermines brand; visitors expect a named guide aligned with Z-dark noir.

Why it matters

A public voice surface must be delightful and safe—short-lived credentials, clear character, and honest scope about what it knows.

Solution

One visitor loop:

Tap and talk
Voice controls with suggested questions, synced captions, and a Z-dark visualizer.
Server-minted Live access
Browser fetches an ephemeral token, then connects directly to Gemini Live with injected system instructions.
Read-only profile truth
memories.json and systemPrompt.ts keep facts in repo—no in-app profile editor in this build.

Faster hiring conversations from voice-curious visitors, without exposing secrets or scope creep into a second product.

Core Features

Voice experience

Gemini Live session

Streams microphone audio and plays model audio with error toasts and session recovery UX.

NeedVoice must feel realtime, not upload-then-wait.

ValueNatural Q&A about the portfolio.

Zunayra character

Named assistant with feminine Urdu/Hinglish speech rules and portfolio links in prompt.

NeedBrand consistency beats a faceless bot.

ValueMemorable first impression for recruiters and clients.

Technical Highlights

Ephemeral Live tokens

mintLiveToken uses authTokens.create with single-use constraints, expireTime, and liveConnectConstraints so the browser never holds GEMINI_API_KEY.

Business valuePublic deploy on Vercel without leaking credentials.

Self-contained serverless mint

api/live-token.ts duplicates quota helpers for Vercel—no parent imports that crash cold starts—and applies per-IP rate buckets.

Business valueStable mint endpoint under serverless bundling rules.

Challenges & Solutions

Challenge	Solution
Shipping Gemini Live on Vercel required browser-direct audio while keeping the master API key server-only.	Ephemeral token route with liveConnectConstraints, aligned CORS for ai.zohaibnawaz.dev, and shared quota defaults with the Express dev server.
A heavier MYRAA-style feature set (agents, screen share, settings panels) distracted from the one job: answer questions about Zohaib.	Explicit product cut—read-only memories, voice + captions only—documented in README and reflected in the UI.

Tech Stack

Frontend: Vite, React, Tailwind v4, Motion, GSAP visualizer
Server: Express (dev), Vercel serverless /api/live-token (prod)
Voice: Gemini Live — browser WebSocket after token mint
Content: memories.json + src/prompts/systemPrompt.ts

Want a branded voice layer on your marketing site?

ZN AI is a focused case study: ephemeral Live tokens, noir UX, and honest scope—not a desktop agent platform. If you need similar voice on a public site, start a conversation.

Start a conversation

Role

Full Stack Product Engineer

Client

Personal brand / voice companion

Date

2026

Collaborators

Solo build

Next Project

ZNVerse

View next