Loading Project Media
Web + Phone
Two ways to call
Live
Streaming transcript
0 kB
Added to first load
Live demo · no sign-up
Don't read about it.
talk to it.
The agent picks up in your browser. Ask what Ammad builds, what a project costs, or whether he is free next month — then interrupt it mid-sentence and watch it stop.
Microphone required · 5 min max
Best with headphones on
(Overview)
AproductionvoiceagentbuiltonVapithathandlesinboundreception:itgreetsthecaller,worksoutwhattheyneed,answersquestionsaboutservicesandavailability,andcapturesthedetailsworthfollowingupon.Itrunsoveratelephonenumberforrealcallers,andoverWebRTCforanyonewhowouldratherjustpressabuttononawebsite.ThebrowserclientinthisportfolioisacustomUIontopoftheVapiwebSDK—livetranscript,voice-reactivevisualiser,mute,andacalltimer.
(The Challenge)
Avoiceagentlivesordiesonlatencyandturn-taking:anylagoveraboutasecondandtheconversationfeelsbroken,andanagentthatcannotbeinterruptedfeelsworsethanaphonemenu.Embeddingitinananimation-heavyportfolioaddedtwomoreconstraints—theWebRTCstackcouldnotbeallowedtoslowtheinitialpageload,andapublickeyinthebrowsermeantanyonecouldrunupthebill.
(The Solution)
BuiltthebrowserclientdirectlyontheVapiwebSDKratherthanthedrop-inwidget,sothecallUImatchestherestofthesiteandreactstorealaudiolevels.TheSDKiscode-splitandonlyfetchedwhenavisitoropensthewidget,keepingitoutoftheinitialbundle.Server-reportedcallstateissurfacedproperly,soafailurenamesitsactualcauseinsteadofagenerictransporterror,andper-visitorcallcapsplusaharddurationlimitkeeptherunningcostsbounded.
- 01
DesignedandconfiguredtheVapiassistant:greeting,qualificationflow,andthefallbacksforquestionsitshouldnotanswer.
- 02
BuiltacustombrowsercallclientontheVapiwebSDKinsteadofthedrop-inwidget,sotheUImatchesthesite.
- 03
Droveavoice-reactivevisualiserstraightfromassistantandmicrophoneaudiolevels,animatedoffrefssoaudionevertriggersaReactre-render.
- 04
Renderedthelivetranscriptfromstreamingpartialandfinalresults,withthespeakingturnattributedtoeachside.
- 05
Code-splittheWebRTCstackbehindahover-prefetcheddynamicimport,keepingitoutoftheinitialpagebundle.
- 06
Surfacedtheserver-reportedendreasonforfailedcalls,soanerrornamesitsrealcauseratherthanagenerictransportmessage.
- 07
Addedper-visitorcallcapsandahardcalldurationlimittokeepapubliclyexposedvoiceagentfromrunningupthebill.
Built with
VapiNext.js 15TypeScriptWebRTCWeb Audio APITailwind CSS
Haveaprojectinmind?
kryptochaingames@gmail.com