Skip to content

Commit 7a7226f

Browse files
authored
SDK Quickstarts (#457)
* feat: add phone support agent workflow example * feat: update navigation to link new customer support hotline example * feat: add screenshots for customer support hotline example * fix: customer support hotline intro paragraph * fix(customer-support-hotline): image URLs * fix(customer-support-hotline): remove broken link from outro * chore (customer-support-hotline): refine copy, add videos * chore(customer-support-hotline): delete unnecessary screenshots * fix(customer-support-hotline): slug * feat(appointment-scheduling): initial commit * feat(banking-customer-support): update example to cover a banking use case * feat: create dedicated `examples` page * feat(web): add web sdk quickstart * chore(dashboard): update dashboard quickstart for consistency * chore: update navigation * chore(inbound-support): address review feedback, fix system prompt * feat(quickstart/web): remove less popular framework starters, expand on core features * chore(quickstart/web): address PR feedback * feat(appointment-scheduling): new workflow example * feat(clinic-triage-scheduling): new workflow example * feat(ecommerce-order-management): new workflow example * feat(outbound-sales): new workflow example * chore: delete pizza example * fix: broken video URLs * chore: update navigation to include new workflow examples * fix(inbound-support): broken video URL * chore: update `overview.mdx` to display new examples * feat(call-forwarding): update doc to incentivize use of dashboard * feat(using-query-tool): update doc to incentivize use of dashboard * feat(custom-tools): update doc to incentivize use of dashboard * feat(workflows/overview): add doc * feat(workflows/quickstart): add doc * feat(workflows): move docs, add new videos * chore: update nav to include workflow docs * feat(docs-agent): add code snippets * feat(examples/inbound-support): add code snippets * feat(examples/outbound-call-python): add code snippets * feat(examples/voice-widget): add code snippets * feat(quickstart/dashboard): add code snippets * feat(workflows/quickstart): add code snippets * feat(workflows/appointment-scheduling): add code snippets * feat(workflows/clinic-triage-scheduling): add code snippets * feat(workflows/ecommerce-order-management): add code snippets * feat(workflows/outbound-sales): add code snippets * feat: create dedicated `examples` page * feat(web): add web sdk quickstart * chore(dashboard): update dashboard quickstart for consistency * chore: update navigation * feat(quickstart/web): remove less popular framework starters, expand on core features * chore(quickstart/web): address PR feedback * feat(quickstart): introduce SDK quickstarts * chore: delete `.DS_Store` * feat(workflows/quickstart): new code examples * feat(examples/docs-agent): new code examples * feat(examples/inbound-support): new code examples * feat(examples/voice-widget): new code examples * feat(quickstart/dashboard): new code examples * feat(quickstart/phone): new code examples * feat(workflows/outbound-sales): new code examples * feat(workflows/ecommerce-order-management): new code examples * feat(workflows/appointment-scheduling): new code examples * feat(workflows/clinic-triage-scheduling): new code examples * chore: add other pm install options, cleanup * chore: replace `gpt-4` occurrences with `gpt-4o` to stay up-to-date * chore: replace `gpt-3.5-turbo` occurrences with `gpt-4o` to stay up-to-date * chore: delete `outbound-call-python` example * fix: code examples * fix: delete duplicate merge doc * chore: cleanup video assets * chore: cleanup merge duplicates, restructure dirs for consistency * feat: merge `client-sdk.mdx` and `server-sdk.mdx` pages into `web.mdx` * feat: examples library, update examples on introduction page * chore: reorganize examples into assistant- and workflow-based sections * fix: typo * fix: broken links * fix: typo * fix: broken links * fix: example links * fix: remove old examples link
1 parent d3a85c1 commit 7a7226f

File tree

9 files changed

+1379
-228
lines changed

9 files changed

+1379
-228
lines changed

fern/examples/docs-agent.mdx renamed to fern/assistants/examples/docs-agent.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Documentation agent
33
subtitle: Build a voice assistant that answers questions about your docs
4-
slug: examples/docs-agent
4+
slug: assistants/examples/docs-agent
55
---
66

77
Try our live implementation using the voice widget in the bottom-right corner of this page.

fern/examples/inbound-support.mdx renamed to fern/assistants/examples/inbound-support.mdx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Inbound customer support
33
subtitle: Build a banking customer support agent that can process inbound phone calls and assist with common banking issues.
4-
slug: examples/inbound-support
4+
slug: assistants/examples/inbound-support
55
description: Build a voice AI banking support agent with tools for account lookup, balance and transaction retrieval.
66
---
77

@@ -33,10 +33,10 @@ We will be creating a customer support agent for VapiBank, a bank that wants to
3333
<Steps>
3434
<Step title="Download the spreadsheets">
3535
<div className="flex gap-2">
36-
<Download src="../static/spreadsheets/inbound-support/accounts.csv">
36+
<Download src="../../static/spreadsheets/inbound-support/accounts.csv">
3737
<Button intent="primary">Download accounts.csv</Button>
3838
</Download>
39-
<Download src="../static/spreadsheets/inbound-support/transactions.csv">
39+
<Download src="../../static/spreadsheets/inbound-support/transactions.csv">
4040
<Button intent="primary">Download transactions.csv</Button>
4141
</Download>
4242
</div>
@@ -48,7 +48,7 @@ We will be creating a customer support agent for VapiBank, a bank that wants to
4848
2. Click **Choose file** and upload both `accounts.csv` and `transactions.csv`
4949
3. Note the file IDs for use in creating tools
5050

51-
<video autoPlay loop muted src="../static/videos/upload-files.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
51+
<video autoPlay loop muted src="../../static/videos/upload-files.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
5252
</Tab>
5353
<Tab title="TypeScript (Server SDK)">
5454
```typescript
@@ -132,7 +132,7 @@ We will be creating a customer support agent for VapiBank, a bank that wants to
132132
- Select `Blank Template` as your starting point.
133133
- Change assistant name to `Tom`.
134134

135-
<video autoPlay loop muted src="../static/videos/inbound-support/create-assistant.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
135+
<video autoPlay loop muted src="../../static/videos/inbound-support/create-assistant.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
136136
</Step>
137137
</Steps>
138138
</Tab>
@@ -527,7 +527,7 @@ You have access to CSV files with account and transaction data:
527527
<Tab title="Dashboard">
528528
Click `Talk to Assistant` to test it out.
529529

530-
<video autoPlay loop muted src="../static/videos/inbound-support/configure-assistant.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
530+
<video autoPlay loop muted src="../../static/videos/inbound-support/configure-assistant.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
531531
</Tab>
532532
<Tab title="TypeScript (Server SDK)">
533533
```typescript
@@ -662,7 +662,7 @@ You have access to CSV files with account and transaction data:
662662
- In the expanded accordion, add `get_balance` and `get_recent_transactions` tools.
663663
- Click `Publish` to save your changes.
664664

665-
<video autoPlay loop muted src="../static/videos/inbound-support/assistant-tools.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
665+
<video autoPlay loop muted src="../../static/videos/inbound-support/assistant-tools.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
666666
</Step>
667667
</Steps>
668668
</Tab>
@@ -915,7 +915,7 @@ You have access to CSV files with account and transaction data:
915915
- Under `Inbound Settings` find `Assistant` dropdown and select `Tom` from the list.
916916
- Changes are saved automatically.
917917

918-
<video autoPlay loop muted src="../static/videos/inbound-support/assign-phone-number.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
918+
<video autoPlay loop muted src="../../static/videos/inbound-support/assign-phone-number.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
919919
</Step>
920920
</Steps>
921921
</Tab>
@@ -998,7 +998,7 @@ You have access to CSV files with account and transaction data:
998998
- Accept the generated test case.
999999
- Click `Run Test Suite` to execute the tests.
10001000

1001-
<video autoPlay loop muted src="../static/videos/inbound-support/create-test-suite.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
1001+
<video autoPlay loop muted src="../../static/videos/inbound-support/create-test-suite.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
10021002
</Step>
10031003
<Step title="Run the test suite">
10041004
Click `Run Tests` to execute the tests.

fern/examples/voice-widget.mdx renamed to fern/assistants/examples/voice-widget.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Web Snippet
33
subtitle: >-
44
Easily integrate the Vapi Voice Widget into your website for enhanced user
55
interaction.
6-
slug: examples/voice-widget
6+
slug: assistants/examples/voice-widget
77
---
88

99
Improve your website's user interaction with the Vapi Voice Widget. This robust tool enables your visitors to engage with a voice assistant for support and interaction, offering a smooth and contemporary way to connect with your services.

fern/docs.yml

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -104,27 +104,9 @@ navigation:
104104
- page: Web calls
105105
icon: fa-light fa-browser
106106
path: quickstart/web.mdx
107-
- section: How Vapi works
108-
icon: fa-light fa-diagram-project
109-
contents:
110-
- page: Core models
111-
path: quickstart.mdx
112-
icon: fa-light fa-microchip-ai
113-
- page: Orchestration models
114-
icon: fa-light fa-network-wired
115-
path: how-vapi-works.mdx
116-
- section: Examples
117-
icon: fa-light fa-code
118-
contents:
119-
- page: Inbound support
120-
path: examples/inbound-support.mdx
121-
icon: fa-light fa-phone-volume
122-
- page: Voice widget
123-
path: examples/voice-widget.mdx
124-
icon: fa-light fa-window-maximize
125-
- page: Documentation agent
126-
path: examples/docs-agent.mdx
127-
icon: fa-light fa-microphone
107+
- page: Example Library
108+
icon: fa-light fa-book-open
109+
path: examples.mdx
128110

129111
- section: Assistants
130112
contents:
@@ -214,6 +196,18 @@ navigation:
214196
path: customization/custom-llm/using-your-server.mdx
215197
- page: Tool calling integration
216198
path: customization/custom-llm/tool-calling-integration.mdx
199+
- section: Examples
200+
icon: fa-light fa-code
201+
contents:
202+
- page: Inbound support
203+
path: assistants/examples/inbound-support.mdx
204+
icon: fa-light fa-phone-volume
205+
- page: Voice widget
206+
path: assistants/examples/voice-widget.mdx
207+
icon: fa-light fa-window-maximize
208+
- page: Documentation agent
209+
path: assistants/examples/docs-agent.mdx
210+
icon: fa-light fa-microphone
217211

218212
- section: Workflows
219213
contents:
@@ -382,6 +376,15 @@ navigation:
382376
- page: FAQ
383377
path: faq.mdx
384378
icon: fa-light fa-question
379+
- section: How Vapi works
380+
icon: fa-light fa-diagram-project
381+
contents:
382+
- page: Core models
383+
path: quickstart.mdx
384+
icon: fa-light fa-microchip-ai
385+
- page: Orchestration models
386+
icon: fa-light fa-network-wired
387+
path: how-vapi-works.mdx
385388
- section: Integrations
386389
collapsed: true
387390
icon: fa-light fa-link
@@ -575,29 +578,29 @@ navigation:
575578
layout:
576579
- section: Client SDKs
577580
contents:
578-
- page: Web
579-
path: sdk/web.mdx
580-
icon: fa-light fa-globe
581+
- link: Web SDK
582+
href: https://github.com/VapiAI/web
583+
icon: fa-brands fa-js
581584
- link: iOS
582585
href: https://github.com/VapiAI/ios
583-
icon: fa-brands fa-app-store-ios
586+
icon: fa-brands fa-apple
584587
- link: Flutter
585588
href: https://github.com/VapiAI/flutter
586-
icon: fa-brands fa-google
589+
icon: fa-light fa-mobile
587590
- link: React Native
588-
href: https://github.com/VapiAI/react-native-sdk
591+
href: https://github.com/VapiAI/react-native
589592
icon: fa-brands fa-react
590593
- link: Python
591594
href: https://github.com/VapiAI/python
592595
icon: fa-brands fa-python
593596
- section: Server SDKs
594597
contents:
595-
- link: Python
596-
href: https://github.com/VapiAI/server-sdk-python
597-
icon: fa-brands fa-python
598598
- link: TypeScript
599599
href: https://github.com/VapiAI/server-sdk-typescript
600600
icon: fa-brands fa-js
601+
- link: Python
602+
href: https://github.com/VapiAI/server-sdk-python
603+
icon: fa-brands fa-python
601604
- link: Java
602605
href: https://github.com/VapiAI/server-sdk-java
603606
icon: fa-brands fa-java
@@ -606,7 +609,7 @@ navigation:
606609
icon: fa-light fa-gem
607610
- link: C#
608611
href: https://github.com/VapiAI/server-sdk-csharp
609-
icon: fa-light fa-hashtag
612+
icon: fa-light fa-brackets-curly
610613
- link: Go
611614
href: https://github.com/VapiAI/server-sdk-go
612615
icon: fa-brands fa-golang
@@ -811,3 +814,9 @@ redirects:
811814
destination: /workflows/quickstart
812815
- source: /web-integration
813816
destination: /web
817+
- source: /examples/inbound-support
818+
destination: /assistants/examples/inbound-support
819+
- source: /examples/voice-widget
820+
destination: /assistants/examples/voice-widget
821+
- source: /examples/docs-agent
822+
destination: /assistants/examples/docs-agent

fern/examples.mdx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: Examples Library
3+
subtitle: Explore complete examples with step-by-step instructions to build with Vapi
4+
slug: examples
5+
---
6+
7+
<CardGroup cols={2}>
8+
<Card title="Docs Agent" icon="book-open" href="/assistants/examples/docs-agent">
9+
<div className='absolute top-4 right-4'>
10+
<Icon icon="arrow-up-right-from-square" />
11+
</div>
12+
<div class="vapi-badge vapi-badge-assistant">Built with Assistants</div>
13+
<br />
14+
Build a docs agent that can answer questions about your documentation
15+
</Card>
16+
<Card title="Inbound Support" icon="headset" href="/assistants/examples/inbound-support">
17+
<div className='absolute top-4 right-4'>
18+
<Icon icon="arrow-up-right-from-square" />
19+
</div>
20+
<div class="vapi-badge vapi-badge-assistant">Built with Assistants</div>
21+
<br />
22+
Build a technical support assistant that remembers where you left off between calls
23+
</Card>
24+
<Card title="Voice Widget" icon="microphone" href="/assistants/examples/voice-widget">
25+
<div className='absolute top-4 right-4'>
26+
<Icon icon="arrow-up-right-from-square" />
27+
</div>
28+
<div class="vapi-badge vapi-badge-assistant">Built with Assistants</div>
29+
<br />
30+
Easily integrate the Vapi Voice Widget into your website for enhanced user interaction
31+
</Card>
32+
<Card title="Appointment Scheduling" icon="calendar-check" href="/workflows/examples/appointment-scheduling">
33+
<div className='absolute top-4 right-4'>
34+
<Icon icon="arrow-up-right-from-square" />
35+
</div>
36+
<div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
37+
<br />
38+
Build an appointment scheduling assistant that can schedule appointments for a barbershop
39+
</Card>
40+
<Card title="Medical Triage & Scheduling" icon="stethoscope" href="/workflows/examples/clinic-triage-scheduling">
41+
<div className='absolute top-4 right-4'>
42+
<Icon icon="arrow-up-right-from-square" />
43+
</div>
44+
<div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
45+
<br />
46+
Build a medical triage and scheduling assistant that can triage patients and schedule appointments for a clinic
47+
</Card>
48+
<Card title="Ecommerce Order Management" icon="shopping-cart" href="/workflows/examples/ecommerce-order-management">
49+
<div className='absolute top-4 right-4'>
50+
<Icon icon="arrow-up-right-from-square" />
51+
</div>
52+
<div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
53+
<br />
54+
Build an ecommerce order management assistant that can track orders and process returns
55+
</Card>
56+
<Card title="Lead Qualification" icon="phone" href="/workflows/examples/lead-qualification">
57+
<div className='absolute top-4 right-4'>
58+
<Icon icon="arrow-up-right-from-square" />
59+
</div>
60+
<div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
61+
<br />
62+
Create an outbound sales agent that can schedule appointments automatically
63+
</Card>
64+
</CardGroup>

fern/overview.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ Each layer is highly customizable and we support dozens of models across STT, LL
4242
The easiest way to start with Vapi. Build a voice agent in 5 minutes.
4343
</Card>
4444
<Card
45-
title="Web Integration"
46-
href="/quickstart/web-integration">
47-
Integrate voice calls into your web application.
45+
title="Web Calls"
46+
href="/quickstart/web">
47+
Quickly get started making web calls with our SDKs.
4848
</Card>
4949
</CardGroup>
5050

@@ -58,7 +58,7 @@ Explore end-to-end examples for some common voice workflows:
5858
icon="phone"
5959
iconType="solid"
6060
color="#f5ac4c"
61-
href="/examples/inbound-support"
61+
href="/assistants/examples/inbound-support"
6262
>
6363
We'll build a customer support agent that can process inbound phone calls and assist with common banking issues.
6464
</Card>

fern/quickstart/introduction.mdx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ Vapi offers two main primitives for building voice agents, each designed for dif
121121
title="Customer Support"
122122
icon="headset"
123123
iconType="solid"
124-
href="/examples/inbound-support"
124+
href="/assistants/examples/inbound-support"
125125
>
126126
<div className='absolute top-4 right-4'>
127127
<Icon icon="arrow-up-right-from-square" />
@@ -156,9 +156,6 @@ Vapi offers two main primitives for building voice agents, each designed for dif
156156

157157
Handle booking requests, check availability, and confirm appointments with conditional routing.
158158
</Card>
159-
</CardGroup>
160-
161-
<CardGroup cols={2}>
162159
<Card
163160
title="Medical Triage & Scheduling"
164161
icon="stethoscope"
@@ -185,4 +182,15 @@ Vapi offers two main primitives for building voice agents, each designed for dif
185182

186183
Order tracking, returns, and customer support workflows.
187184
</Card>
185+
<Card
186+
title="See more examples"
187+
icon="book"
188+
iconType="solid"
189+
href="/examples"
190+
>
191+
<div className='absolute top-4 right-4'>
192+
<Icon icon="arrow-up-right-from-square" />
193+
</div>
194+
See our collection of examples covering a wide range of use cases.
195+
</Card>
188196
</CardGroup>

0 commit comments

Comments
 (0)