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

Author: goosewin

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

@@ -1,7 +1,7 @@
 ---
 title: Documentation agent
 subtitle: Build a voice assistant that answers questions about your docs
-slug: examples/docs-agent
+slug: assistants/examples/docs-agent
 ---
 
 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

@@ -1,7 +1,7 @@
 ---
 title: Inbound customer support
 subtitle: Build a banking customer support agent that can process inbound phone calls and assist with common banking issues.
-slug: examples/inbound-support
+slug: assistants/examples/inbound-support
 description: Build a voice AI banking support agent with tools for account lookup, balance and transaction retrieval.
 ---
 
@@ -33,10 +33,10 @@ We will be creating a customer support agent for VapiBank, a bank that wants to
 <Steps>
   <Step title="Download the spreadsheets">
     <div className="flex gap-2">
-      <Download src="../static/spreadsheets/inbound-support/accounts.csv">
+      <Download src="../../static/spreadsheets/inbound-support/accounts.csv">
         <Button intent="primary">Download accounts.csv</Button>
       </Download>
-      <Download src="../static/spreadsheets/inbound-support/transactions.csv">
+      <Download src="../../static/spreadsheets/inbound-support/transactions.csv">
         <Button intent="primary">Download transactions.csv</Button>
       </Download>
     </div>
@@ -48,7 +48,7 @@ We will be creating a customer support agent for VapiBank, a bank that wants to
         2. Click **Choose file** and upload both `accounts.csv` and `transactions.csv`
         3. Note the file IDs for use in creating tools
 
-        <video autoPlay loop muted src="../static/videos/upload-files.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
+        <video autoPlay loop muted src="../../static/videos/upload-files.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
       </Tab>
       <Tab title="TypeScript (Server SDK)">
         ```typescript
@@ -132,7 +132,7 @@ We will be creating a customer support agent for VapiBank, a bank that wants to
         - Select `Blank Template` as your starting point.
         - Change assistant name to `Tom`.
 
-        <video autoPlay loop muted src="../static/videos/inbound-support/create-assistant.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
+        <video autoPlay loop muted src="../../static/videos/inbound-support/create-assistant.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
       </Step>
     </Steps>
   </Tab>
@@ -527,7 +527,7 @@ You have access to CSV files with account and transaction data:
       <Tab title="Dashboard">
         Click `Talk to Assistant` to test it out.
 
-        <video autoPlay loop muted src="../static/videos/inbound-support/configure-assistant.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
+        <video autoPlay loop muted src="../../static/videos/inbound-support/configure-assistant.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
       </Tab>
       <Tab title="TypeScript (Server SDK)">
         ```typescript
@@ -662,7 +662,7 @@ You have access to CSV files with account and transaction data:
         - In the expanded accordion, add `get_balance` and `get_recent_transactions` tools.
         - Click `Publish` to save your changes.
 
-        <video autoPlay loop muted src="../static/videos/inbound-support/assistant-tools.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
+        <video autoPlay loop muted src="../../static/videos/inbound-support/assistant-tools.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
       </Step>
     </Steps>
   </Tab>
@@ -915,7 +915,7 @@ You have access to CSV files with account and transaction data:
         - Under `Inbound Settings` find `Assistant` dropdown and select `Tom` from the list.
         - Changes are saved automatically.
 
-        <video autoPlay loop muted src="../static/videos/inbound-support/assign-phone-number.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
+        <video autoPlay loop muted src="../../static/videos/inbound-support/assign-phone-number.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
       </Step>
     </Steps>
   </Tab>
@@ -998,7 +998,7 @@ You have access to CSV files with account and transaction data:
         - Accept the generated test case.
         - Click `Run Test Suite` to execute the tests.
 
-        <video autoPlay loop muted src="../static/videos/inbound-support/create-test-suite.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
+        <video autoPlay loop muted src="../../static/videos/inbound-support/create-test-suite.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
       </Step>
       <Step title="Run the test suite">
         Click `Run Tests` to execute the tests.

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

@@ -3,7 +3,7 @@ title: Web Snippet
 subtitle: >-
   Easily integrate the Vapi Voice Widget into your website for enhanced user
   interaction.
-slug: examples/voice-widget
+slug: assistants/examples/voice-widget
 ---
 
 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

@@ -104,27 +104,9 @@ navigation:
           - page: Web calls
             icon: fa-light fa-browser
             path: quickstart/web.mdx
-          - section: How Vapi works
-            icon: fa-light fa-diagram-project
-            contents:
-              - page: Core models
-                path: quickstart.mdx
-                icon: fa-light fa-microchip-ai
-              - page: Orchestration models
-                icon: fa-light fa-network-wired
-                path: how-vapi-works.mdx
-          - section: Examples
-            icon: fa-light fa-code
-            contents:
-              - page: Inbound support
-                path: examples/inbound-support.mdx
-                icon: fa-light fa-phone-volume
-              - page: Voice widget
-                path: examples/voice-widget.mdx
-                icon: fa-light fa-window-maximize
-              - page: Documentation agent
-                path: examples/docs-agent.mdx
-                icon: fa-light fa-microphone
+          - page: Example Library
+            icon: fa-light fa-book-open
+            path: examples.mdx
 
       - section: Assistants
         contents:
@@ -214,6 +196,18 @@ navigation:
                 path: customization/custom-llm/using-your-server.mdx
               - page: Tool calling integration
                 path: customization/custom-llm/tool-calling-integration.mdx
+          - section: Examples
+            icon: fa-light fa-code
+            contents:
+              - page: Inbound support
+                path: assistants/examples/inbound-support.mdx
+                icon: fa-light fa-phone-volume
+              - page: Voice widget
+                path: assistants/examples/voice-widget.mdx
+                icon: fa-light fa-window-maximize
+              - page: Documentation agent
+                path: assistants/examples/docs-agent.mdx
+                icon: fa-light fa-microphone
 
       - section: Workflows
         contents:
@@ -382,6 +376,15 @@ navigation:
           - page: FAQ
             path: faq.mdx
             icon: fa-light fa-question
+          - section: How Vapi works
+            icon: fa-light fa-diagram-project
+            contents:
+              - page: Core models
+                path: quickstart.mdx
+                icon: fa-light fa-microchip-ai
+              - page: Orchestration models
+                icon: fa-light fa-network-wired
+                path: how-vapi-works.mdx
           - section: Integrations
             collapsed: true
             icon: fa-light fa-link
@@ -575,29 +578,29 @@ navigation:
     layout:
       - section: Client SDKs
         contents:
-          - page: Web
-            path: sdk/web.mdx
-            icon: fa-light fa-globe
+          - link: Web SDK
+            href: https://github.com/VapiAI/web
+            icon: fa-brands fa-js
           - link: iOS
             href: https://github.com/VapiAI/ios
-            icon: fa-brands fa-app-store-ios
+            icon: fa-brands fa-apple
           - link: Flutter
             href: https://github.com/VapiAI/flutter
-            icon: fa-brands fa-google
+            icon: fa-light fa-mobile
           - link: React Native
-            href: https://github.com/VapiAI/react-native-sdk
+            href: https://github.com/VapiAI/react-native
             icon: fa-brands fa-react
           - link: Python
             href: https://github.com/VapiAI/python
             icon: fa-brands fa-python
       - section: Server SDKs
         contents:
-          - link: Python
-            href: https://github.com/VapiAI/server-sdk-python
-            icon: fa-brands fa-python
           - link: TypeScript
             href: https://github.com/VapiAI/server-sdk-typescript
             icon: fa-brands fa-js
+          - link: Python
+            href: https://github.com/VapiAI/server-sdk-python
+            icon: fa-brands fa-python
           - link: Java
             href: https://github.com/VapiAI/server-sdk-java
             icon: fa-brands fa-java
@@ -606,7 +609,7 @@ navigation:
             icon: fa-light fa-gem
           - link: C#
             href: https://github.com/VapiAI/server-sdk-csharp
-            icon: fa-light fa-hashtag
+            icon: fa-light fa-brackets-curly
           - link: Go
             href: https://github.com/VapiAI/server-sdk-go
             icon: fa-brands fa-golang
@@ -811,3 +814,9 @@ redirects:
     destination: /workflows/quickstart
   - source: /web-integration
     destination: /web
+  - source: /examples/inbound-support
+    destination: /assistants/examples/inbound-support
+  - source: /examples/voice-widget
+    destination: /assistants/examples/voice-widget
+  - source: /examples/docs-agent
+    destination: /assistants/examples/docs-agent

fern/examples.mdx

@@ -0,0 +1,64 @@
+---
+title: Examples Library
+subtitle: Explore complete examples with step-by-step instructions to build with Vapi
+slug: examples
+---
+
+<CardGroup cols={2}>
+  <Card title="Docs Agent" icon="book-open" href="/assistants/examples/docs-agent">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-assistant">Built with Assistants</div>
+    <br />
+    Build a docs agent that can answer questions about your documentation
+  </Card>
+  <Card title="Inbound Support" icon="headset" href="/assistants/examples/inbound-support">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-assistant">Built with Assistants</div>
+    <br />
+    Build a technical support assistant that remembers where you left off between calls
+  </Card>
+  <Card title="Voice Widget" icon="microphone" href="/assistants/examples/voice-widget">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-assistant">Built with Assistants</div>
+    <br />
+    Easily integrate the Vapi Voice Widget into your website for enhanced user interaction
+  </Card>
+  <Card title="Appointment Scheduling" icon="calendar-check" href="/workflows/examples/appointment-scheduling">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
+    <br />
+    Build an appointment scheduling assistant that can schedule appointments for a barbershop
+  </Card>
+  <Card title="Medical Triage & Scheduling" icon="stethoscope" href="/workflows/examples/clinic-triage-scheduling">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
+    <br />
+    Build a medical triage and scheduling assistant that can triage patients and schedule appointments for a clinic
+  </Card>
+  <Card title="Ecommerce Order Management" icon="shopping-cart" href="/workflows/examples/ecommerce-order-management">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
+    <br />
+    Build an ecommerce order management assistant that can track orders and process returns
+  </Card>
+  <Card title="Lead Qualification" icon="phone" href="/workflows/examples/lead-qualification">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
+    <br />
+    Create an outbound sales agent that can schedule appointments automatically
+  </Card>
+</CardGroup>

fern/overview.mdx

@@ -42,9 +42,9 @@ Each layer is highly customizable and we support dozens of models across STT, LL
     The easiest way to start with Vapi. Build a voice agent in 5 minutes.
   </Card>
   <Card
-    title="Web Integration"
-    href="/quickstart/web-integration">
-    Integrate voice calls into your web application.
+    title="Web Calls"
+    href="/quickstart/web">
+    Quickly get started making web calls with our SDKs.
   </Card>
 </CardGroup>
 
@@ -58,7 +58,7 @@ Explore end-to-end examples for some common voice workflows:
     icon="phone"
     iconType="solid"
     color="#f5ac4c"
-    href="/examples/inbound-support"
+    href="/assistants/examples/inbound-support"
   >
     We'll build a customer support agent that can process inbound phone calls and assist with common banking issues.
   </Card>

fern/quickstart/introduction.mdx

@@ -121,7 +121,7 @@ Vapi offers two main primitives for building voice agents, each designed for dif
     title="Customer Support" 
     icon="headset" 
     iconType="solid"
-    href="/examples/inbound-support"
+    href="/assistants/examples/inbound-support"
   >
     <div className='absolute top-4 right-4'>
       <Icon icon="arrow-up-right-from-square" />
@@ -156,9 +156,6 @@ Vapi offers two main primitives for building voice agents, each designed for dif
 
     Handle booking requests, check availability, and confirm appointments with conditional routing.
   </Card>
-</CardGroup>
-
-<CardGroup cols={2}>
   <Card 
     title="Medical Triage & Scheduling" 
     icon="stethoscope" 
@@ -185,4 +182,15 @@ Vapi offers two main primitives for building voice agents, each designed for dif
 
     Order tracking, returns, and customer support workflows.
   </Card>
+  <Card 
+    title="See more examples" 
+    icon="book" 
+    iconType="solid" 
+    href="/examples"
+  >
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    See our collection of examples covering a wide range of use cases.
+  </Card>
 </CardGroup>