Waqar Ul Wahab
ALL PROJECTS/NEXTGEN STUDY ABROAD

Overview

NextGen Study Abroad is a Karachi-based consultancy that places students at universities across sixteen countries. The brief was a complete public web presence — twelve routes covering services, destination guides, success stories, a resource hub, a blog, an FAQ and lead capture — and one thing a brochure site cannot do: answer a prospective student's questions at 2 a.m., in whichever language they are comfortable in.

So the site ships with its own counselor. A bilingual AI assistant sits on every page as a chat panel, and the same assistant can be taken as a hands-free phone call: it listens, thinks, and replies out loud, turn by turn, in Urdu or English. It runs entirely on serverless edge functions with no database and no session store, and it is fenced to a curated knowledge base so it can never invent a fee, a deadline or a scholarship.

The front end is built to the same discipline as the product work: a Next.js 16 App Router application in strict TypeScript, a Tailwind v4 design-token system where brand colour exists in exactly one file, twenty-one page sections and eleven UI primitives composed from barrels, and a 500-line-per-file ceiling enforced by the linter across all 166 source files.

Problem

Study-abroad consultancies lose leads in the gap between interest and contact. A student browsing at midnight has a specific question — is Germany really tuition-free, how long is the Canadian work permit, what does the visa interview involve — and a contact form answers none of them. Most of that audience is more fluent in Urdu than English, and almost none of them will type a question into a form and wait a day.

An AI assistant is the obvious answer and the easy thing to get wrong. A consultancy cannot afford a bot that hallucinates a scholarship or promises a visa approval — that is a legal and reputational liability, not a feature. It also cannot afford one that goes silent: a chat widget that returns an error when the model provider is overloaded is worse than no widget at all. And Urdu is genuinely hard to serve — the free speech voices for it are either missing or broken upstream, so "just call a TTS API" does not survive contact with a real Urdu-speaking user.

The engineering problem, then, was three-fold: keep the assistant factually fenced, keep it available when any single provider fails, and make it speak Urdu well enough that a parent in Karachi would actually use it — all without a backend, a database, or an operations burden the client would have to pay to run.

System Design

How It Works

01/04
01

Ask a question, in either language

How a midnight question becomes a grounded answer in the visitor's own language, without a human in the loop.

  1. 1A visitor opens the assistant from any page and types in Urdu or English
  2. 2The running conversation posts to a stateless streaming edge function, trimmed to a bounded recent history
  3. 3The model answers from the curated knowledge base only, in the same language it was asked in
  4. 4The upstream event stream is parsed server-side and re-emitted as plain text, so the reply appears as it is written
  5. 5Anything outside the knowledge base is declined honestly and routed to a free human consultation
02

Take it as a phone call

How the same assistant becomes a hands-free voice agent that talks and listens in turn.

  1. 1The visitor picks a call language up front; it is locked for the whole call
  2. 2The browser captures one spoken utterance through speech recognition and finalises the transcript
  3. 3That turn goes through the same assistant, and the reply is spoken back through the neural voice
  4. 4The microphone is released while the assistant talks, so it never transcribes its own voice
  5. 5The loop returns to listening until the visitor hangs up, which cancels any in-flight speech immediately
03

When a provider fails

How the assistant degrades instead of breaking when an upstream is overloaded, rate-limited or slow.

  1. 1Each model attempt runs under its own timeout, so a hung upstream can never consume the request budget
  2. 2Overload, rate-limit and timeout all trigger the same response: abandon and try the next model in the chain
  3. 3For speech, a failed provider falls through to the next layer, and finally to the browser's own voice
  4. 4Only when every layer is exhausted does the visitor see a graceful message with a phone number — never a raw error
04

One push ships it

How the whole site reaches the global edge with nothing for the client to operate.

  1. 1A commit to the main branch triggers the managed build
  2. 2Every route is prerendered and every asset content-hashed at build time
  3. 3The build is promoted to the global edge network and the two assistant functions are deployed alongside it
  4. 4There is no server to provision and no database to migrate — the running system is files on an edge plus functions that execute only while someone is talking

Key Features

  • Bilingual AI counselor — a streaming chat assistant that replies in the visitor's own language, Urdu or English, on every page
  • Hands-free voice call — a phone-call-style agent that listens, thinks and answers out loud, releasing the mic while it speaks so it never hears itself
  • Grounded answers only — fenced to a curated knowledge base, never promises an approval, and hands off to a human counselor instead of inventing fees or deadlines
  • Resilient by design — an ordered model fallback chain and a four-layer speech stack, so no single provider outage can silence the assistant
  • Sixteen study destinations — six full country guides plus ten more supported, with universities, visa routes and work-rights facts
  • Four service tracks with their own detail pages — consultancy, IELTS/PTE prep, admission guidance and visa assistance
  • Success stories, a downloadable resource hub, a blog and a thirteen-question FAQ
  • Lead capture throughout — consultation form, click-to-call and WhatsApp on every page — and full responsive behaviour with every animation gated behind the visitor's reduced-motion preference

Outcomes

  • Delivered a full sixteen-destination marketing site and a bilingual AI counselor as one product, shipped and live on the managed edge
  • Made the assistant safe to put in front of prospective students — fenced to a curated knowledge base, forbidden from promising approvals, and instructed to hand off to a human rather than guess
  • Made it resilient rather than merely working: an ordered model chain with per-attempt timeouts and a four-layer speech stack mean no single provider outage takes the assistant offline
  • Solved Urdu voice properly with a neural Urdu voice and graded fallbacks, instead of the broken free voice the naive path lands on
  • Kept the client's running cost and operational burden at zero — no server, no database, no session store; prerendered pages on a CDN edge and functions that run only while someone is talking
  • Held the codebase to a reviewable shape at scale: 166 source files, twenty-one sections, eleven primitives, and not one file over 500 lines

More work