Meta tags:
description= Build voice interfaces and backend integrations using Vapi s Web and Server SDKs;
Headings (most frequently used words):
typescript, python, java, ruby, go, web, and, integration, voice, installation, setup, react, calls, overview, choose, your, approach, interfaces, server, side, call, management, webhook, next, steps, resources, live, captions, word, level, timing, widget, implementation, creating, assistants, bulk, operations, guides, sdk, native, flutter, ios, html, script, tag,
Text of the page (most frequently used words):
call (41), and (35), voice (32), vapi (32), for (25), server (23), message (20), the (20), sdk (18), quickstart (18), web (16), #assistant (16), const (16), calls (16), word (15), with (14), your (14), custom (14), management (13), events (12), github (11), assistants (10), real (9), that (9), openai (9), side (9), timing (9), support (9), client (8), speech (8), tools (8), number (8), text (8), overview (8), tool (8), this (7), page (7), typescript (7), log (7), console (7), status (7), time (7), new (7), provider (7), interfaces (7), examples (6), build (6), squads (6), python (6), sdks (6), webhook (6), function (6), res (6), integration (6), create (6), outbound (6), inbound (6), widget (6), user (6), integrations (6), cli (6), agents (5), documentation (5), ruby (5), java (5), return (5), express (5), transcript (5), type (5), script (5), started (5), elevenlabs (5), minimax (5), per (5), segment (5), based (5), data (5), webhooks (5), phone (5), reference (4), react (4), models (4), you (4), app (4), json (4), case (4), name (4), true (4), from (4), applications (4), await (4), bulk (4), operations (4), words (4), model (4), npm (4), installation (4), setup (4), website (4), event (4), only (4), turn (4), cursor (4), playback (4), end (4), best (4), level (4), widgets (4), backend (4), mobile (4), guide (4), voices (4), chat (4), multilingual (4), scheduling (4), sms (4), streaming (4), sip (4), configuration (4), next (3), guides (3), api (3), ios (3), flutter (3), native (3), resources (3), use (3), both (3), 3000 (3), listen (3), functioncall (3), any (3), role (3), async (3), import (3), handle (3), customer (3), phonenumberid (3), assistantid (3), prospects (3), automated (3), campaigns (3), sales (3), messages (3), install (3), apikey (3), index (3), dashboard (3), get (3), see (3), what (3), say (3), tts (3), between (3), timestamps (3), forward (3), highlighting (3), cadence (3), cartesia (3), deepgram (3), azure (3), speechstarted (3), live (3), captions (3), start (3), browser (3), developing (3), locally (3), compliance (3), plan (3), authentication (3), enterprise (3), google (3), testing (3), rejection (3), triage (3), handoff (3), troubleshoot (3), errors (3), hooks (3), transcriber (3), llms (3), built (2), explore (2), was (2), community (2), add (2), our (2), steps (2), orderdata (2), orderid (2), switch (2), handlefunctioncall (2), break (2), update (2), req (2), resolve (2), rate (2), prospect (2), more (2), 1234567890 (2), string (2), run (2), system (2), calling (2), about (2), firstmessage (2), creating (2), your_assistant_id (2), vapiclient (2), bun (2), pnpm (2), yarn (2), processing (2), document (2), optional (2), buttonconfig (2), mandatory (2), vapiinstance (2), html (2), tag (2), var (2), substitute (2), your_public_api_key (2), copy (2), into (2), implementation (2), full (2), emit (2), interrupted (2), force (2), one (2), emits (2), carries (2), not (2), subtitletype (2), progress (2), karaoke (2), style (2), alignment (2), else (2), join (2), source (2), clientmessages (2), conversation (2), interaction (2), routing (2), apps (2), choose (2), approach (2), learn (2), initialize (2), test (2), systems (2), using (2), consent (2), static (2), recording (2), how (2), playht (2), core (2), faq (2), ivr (2), navigation (2), environments (2), dev (2), uat (2), prod (2), debugging (2), prompting (2), boards (2), advanced (2), spam (2), setting (2), urls (2), property (2), order (2), clinic (2), passing (2), lead (2), qualification (2), appointment (2), migrate (2), variable (2), substitution (2), session (2), compatibility (2), non (2), reasons (2), forwarding (2), transfer (2), voicemail (2), control (2), telnyx (2), twilio (2), telephony (2), free (2), agent (2), keywords (2), knowledge (2), variables (2), fallback (2), background (2), configurations (2), composer (2), introduction (2), pre (2), release (2), mcp (2), txt (2), world, cloneable, previous, edit, yes, helpful, discord, multi, setups, complex, processes, scale, try, different, better, performance, language, configure, connect, external, apis, databases, check, out, complete, implementations, section, cases, now, understand, capabilities, running, port, unknown, error, 400, default, result, shipped, parameters, lookup_order, response, received, 200, body, post, 2000, settimeout, promise, limiting, push, q1_sales, campaign, metadata, jane, doe, 1234567891, john, smith, runbulkcallcampaign, surveys, notifications, 21m00tcm4tlvdq8ikwam, voiceid, 11labs, are, friendly, representative, keep, responses, under, content, temperature, gpt, interest, software, solutions, created, your_phone_number_id, vapi_api_key, env, process, token, automate, config, vapisdk, window, onload, insertbefore, parentnode, defer, https, cdn, jsdelivr, net, vapiai, latest, dist, assets, src, getelementsbytagname, createelement, modify, required, public, key, assistant_id, null, fastest, way, snippet, schema, field, actions, always, even, barge, further, fire, pair, know, actually, spoken, chunk, can, interpolate, flat, sec, approximate, all, other, providers, once, synthesis, near, array, just, finished, useful, retroactive, animation, extrapolation, but, driving, details, during, smooth, interpolation, granularity, vary, significantly, pick, matches, requirements, audio, display, caption, block, etc, tied, sized, jumps, ticks, wordsspoken, totalwords, note, below, arrive, highlight, position, includes, spaces, them, char, 200ms, apart, each, whose, shape, depends, uis, need, render, speaks, subscribe, opt, ended, crm, automation, direct, android, conversations, facing, localhost, local, init, project, makes, easy, projects, implement, powerful, work, across, browsers, covers, comprehensive, ecosystem, scroll, top, light, tcpa, guidelines, addresses, proxy, pci, zero, retention, zdr, hipaa, gdpr, jwt, single, sign, sso, flow, rss, feed, glossary, report, issues, sympana, connector, voiceaiwrapper, voicerr, vapify, chatdash, voiceflow, langfuse, supabase, cloudflare, gcp, cloud, storage, aws, assemblyai, talkscriber, speechmatics, gladia, openrouter, togetherai, perplexity, deepinfra, groq, gemini, anthropic, bedrock, inworld, rimeai, lmnt, legacy, migration, suites, silent, handoffs, commerce, medical, retrieve, artifacts, analysis, concurrency, queue, debug, drops, hold, specialist, dynamic, transfers, warm, detection, timeout, websocket, transport, trunk, credential, amazon, chime, plivo, zadarma, networking, firewall, trunking, escalation, bring, own, fine, tuned, argument, encryption, base, query, retrieval, gohighlevel, slack, sheets, calendar, troubleshooting, aliases, code, keys, realtime, pipeline, email, address, reading, pronunciation, dictionaries, denoising, idle, flush, syntax, formatting, personalization, information, transient, permanent, legal, security, privacy, works, practices, monitoring, scorecard, structured, outputs, simulations, evals, observability, workflows, insights, place, numbers, behavior, concepts, ask, search, available, root, append, url, markdown, version,
Text of the page (random words):
web calls vapi for ai agents a documentation index is available at the root level at llms txt append llms txt to any url for a page level index or md for the markdown version of any page search ask ai website status support dashboard documentation api reference mcp sdks cli new what s new documentation api reference mcp sdks cli new what s new get started introduction phone calls web calls vapi guides composer pre release cli quickstart assistants quickstart core concepts conversation behavior model configurations tools custom keywords custom voices custom transcriber custom tts custom llms examples phone numbers free vapi number inbound sms telephony integrations sip integration phone number hooks calls place calls in call control call end reasons troubleshoot call errors call insights outbound campaigns quickstart overview chat quickstart streaming non streaming openai compatibility session management variable substitution sms chat web widget workflows migrate to squads quickstart overview examples squads quickstart overview handoff tool passing data between assistants examples webhooks setting server urls server events spam call rejection developing locally server authentication observability evals simulations pre release boards structured outputs scorecard monitoring best practices prompting guide debugging voice agents enterprise environments dev uat prod ivr navigation testing resources faq how vapi works integrations community support security and privacy legal introduction phone calls web calls vapi guides composer cli quickstart quickstart transient vs permanent configurations variables multilingual support personalization with user information voice formatting plan flush syntax background messages idle messages assistant hooks background speech denoising pronunciation dictionaries email address reading speech configuration voice pipeline configuration voice fallback configuration transcriber fallback configuration openai realtime speech to speech provider keys tools built in call tools voicemail tool custom tools code tool client side tools web sdk tool rejection plan static variables and aliases custom tools troubleshooting google calendar google sheets slack gohighlevel knowledge retrieval query tool custom knowledge base argument encryption custom keywords custom voices elevenlabs playht cartesia custom transcriber custom tts fine tuned openai models bring your own server tool calling integration appointment scheduling lead qualification inbound support voice widget documentation agent support escalation multilingual agent free vapi number inbound sms twilio telnyx sip telephony sip trunking networking and firewall twilio telnyx zadarma plivo amazon chime sdk troubleshoot sip trunk credential errors phone number hooks calls outbound calls websocket transport real time call control customer join timeout voicemail detection call forwarding assistant based warm transfer dynamic call transfers on hold specialist transfer debug forwarding drops call queue management call concurrency call end reasons troubleshoot call errors call analysis call recording retrieve call artifacts quickstart overview quickstart streaming non streaming openai compatibility session management variable substitution sms chat web widget migrate to squads quickstart overview appointment scheduling lead qualification medical triage order management property management multilingual support quickstart overview handoff tool passing data between assistants clinic triage scheduling handoff tool clinic triage scheduling e commerce order management property management routing multilingual support silent handoffs webhooks setting server urls server events spam call rejection developing locally server authentication quickstart advanced quickstart advanced boards quickstart examples quickstart quickstart prompting guide debugging voice agents enterprise environments dev uat prod ivr navigation test suites chat testing voice testing faq core models voices text to speech vapi voices legacy migration elevenlabs playht azure openai cartesia lmnt minimax rimeai deepgram inworld openai azure openai anthropic bedrock gemini groq deepinfra perplexity togetherai openrouter deepgram google gladia speechmatics talkscriber assemblyai aws s3 gcp cloud storage cloudflare r2 supabase langfuse voiceflow chatdash vapify voicerr ai voiceaiwrapper sympana connector support how to report issues enterprise glossary rss feed data flow single sign on sso jwt authentication recording consent plan gdpr compliance hipaa compliance zero data retention zdr pci compliance proxy server guide static ip addresses tcpa consent guidelines website status support dashboard light on this page overview choose your integration approach web voice interfaces installation and setup live captions and word level timing voice widget implementation server side call management installation and setup creating assistants bulk operations webhook integration next steps resources scroll to top get started web calls copy page build voice interfaces and backend integrations using vapi s web and server sdks overview build powerful voice applications that work across web browsers mobile apps and backend systems this guide covers both client side voice interfaces and server side call management using vapi s comprehensive sdk ecosystem in this quickstart you ll learn to create real time voice interfaces for web and mobile build automated outbound and inbound call systems handle events and webhooks for call management implement voice widgets and backend integrations developing locally the vapi cli makes it easy to initialize projects and test webhooks initialize vapi in your project vapi init forward webhooks to local server vapi listen forward to localhost 3000 webhook learn more about the vapi cli choose your integration approach client side voice interfaces best for user facing applications voice widgets mobile apps browser based voice assistants and widgets real time voice conversations mobile voice applications ios android react native flutter direct user interaction with assistants server side call management best for backend automation bulk operations system integrations automated outbound call campaigns inbound call routing and management crm integrations and bulk operations webhook processing and real time events web voice interfaces build browser based voice assistants and widgets for real time user interaction installation and setup web sdk react native flutter ios build browser based voice interfaces npm yarn pnpm bun npm install vapi ai web 1 import vapi from vapi ai web 2 3 const vapi new vapi your_public_api_key 4 5 start voice conversation 6 vapi start your_assistant_id 7 8 listen for events 9 vapi on call start console log call started 10 vapi on call end console log call ended 11 vapi on message message 12 if message type transcript 13 console log message role message transcript 14 15 live captions and word level timing for uis that need to render live captions or karaoke style word highlighting as the assistant speaks subscribe to the opt in assistant speechstarted message add it to your assistant s clientmessages 1 2 clientmessages assistant speechstarted transcript speech update 3 each event carries the full assistant turn text the turn number the source model force say or custom voice and optional timing data whose shape depends on your voice provider 1 vapi on message message 2 if message type assistant speechstarted return 3 4 const text turn source timing message 5 6 if timing type word alignment 7 elevenlabs per word timestamps at playback cadence 50 200ms apart 8 timing words includes spaces join them into a char cursor and 9 highlight text up to that position 10 else if timing type word progress 11 minimax with voice subtitletype word cursor based 12 wordsspoken totalwords see note below events arrive in 13 segment sized jumps not word by word ticks 14 else 15 cartesia deepgram azure openai etc text only event tied 16 to audio playback display text as a caption block 17 18 cadence and granularity vary significantly by voice provider pick the one that matches your ui requirements elevenlabs word alignment is the only provider that emits at true playback cadence with real per word timestamps best for smooth karaoke style highlighting with no client side interpolation minimax word progress with subtitletype word emits once per synthesis segment near the end of that segment s playback the per word timing words array carries timestamps for the segment that just finished useful for retroactive animation or forward extrapolation but not for driving real time highlighting during that segment see the minimax provider page for details all other providers emit text only events no timing one event per tts chunk you can interpolate a word cursor at a flat rate 3 5 words sec between events for an approximate cursor force say events your firstmessage say actions always emit as text only even on elevenlabs and minimax on user barge in no further events fire for the interrupted turn pair with the user interrupted message to know what was actually spoken for the full event schema and field reference see server events assistant speech started voice widget implementation create a voice widget for your website html script tag react typescript the fastest way to get started copy this snippet into your website 1 script 2 var vapiinstance null 3 const assistant assistant_id substitute with your assistant id 4 const apikey your_public_api_key substitute with your public key from vapi dashboard 5 const buttonconfig modify this as required 6 7 function d t 8 var g document createelement t 9 s d getelementsbytagname t 0 10 g src 11 https cdn jsdelivr net gh vapiai html script tag latest dist assets index js 12 g defer true 13 g async true 14 s parentnode insertbefore g s 15 16 g onload function 17 vapiinstance window vapisdk run 18 apikey apikey mandatory 19 assistant assistant mandatory 20 config buttonconfig optional 21 22 23 document script 24 script server side call management automate outbound calls and handle inbound call processing with server side sdks installation and setup typescript python java ruby c go install the typescript server sdk npm yarn pnpm bun npm install vapi ai server sdk 1 import vapiclient from vapi ai server sdk 2 3 const vapi new vapiclient 4 token process env vapi_api_key 5 6 7 create an outbound call 8 const call await vapi calls create 9 phonenumberid your_phone_number_id 10 customer number 1234567890 11 assistantid your_assistant_id 12 13 14 console log call created call id creating assistants typescript python java ruby c go 1 const assistant await vapi assistants create 2 name sales assistant 3 firstmessage hi i m calling about your interest in our software solutions 4 model 5 provider openai 6 model gpt 4o 7 temperature 0 7 8 messages 9 role system 10 content you are a friendly sales representative keep responses under 30 words 11 12 13 voice 14 provider 11labs 15 voiceid 21m00tcm4tlvdq8ikwam 16 17 bulk operations run automated call campaigns for sales surveys or notifications typescript python java ruby c go 1 async function runbulkcallcampaign assistantid string phonenumberid string 2 const prospects 3 number 1234567890 name john smith 4 number 1234567891 name jane doe 5 more prospects 6 7 8 const calls 9 for const prospect of prospects 10 const call await vapi calls create 11 assistantid 12 phonenumberid 13 customer prospect 14 metadata campaign q1_sales 15 16 calls push call 17 18 rate limiting 19 await new promise resolve settimeout resolve 2000 20 21 22 return calls 23 webhook integration handle real time events for both client and server applications typescript python java ruby c go 1 import express from express 2 3 const app express 4 app use express json 5 6 app post webhook vapi async req res 7 const message req body 8 9 switch message type 10 case status update 11 console log call message call id message call status 12 break 13 case transcript 14 console log message role message transcript 15 break 16 case function call 17 return handlefunctioncall message res 18 19 20 res status 200 json received true 21 22 23 function handlefunctioncall message any res express response 24 const functioncall message 25 26 switch functioncall name 27 case lookup_order 28 const orderdata orderid functioncall parameters orderid status shipped 29 return res json result orderdata 30 default 31 return res status 400 json error unknown function 32 33 34 35 app listen 3000 console log webhook server running on port 3000 next steps now that you understand both client and server sdk capabilities explore use cases check out our examples section for complete implementations add tools connect your voice agents to external apis and databases with custom tools configure models try different speech and language models for better performance scale with squads use squads for multi assistant setups and complex processes resources client sdks web sdk github react native sdk github flutter sdk github ios sdk github python client github server sdks typescript sdk github python sdk github java sdk github ruby sdk github c sdk github go sdk github documentation api reference discord community was this page helpful yes no edit this page previous guides explore real world cloneable examples to build voice agents with assistants and squads next built with
|
