### Start Server with Node.js
Source: https://github.com/vapiai/docs/blob/main/fern/calls/call-queue-management.mdx
Use this command to start your server for testing the queue management flow. Ensure Node.js is installed.
```bash
node server.js
```
--------------------------------
### Install Go Server SDK
Source: https://github.com/vapiai/docs/blob/main/fern/quickstart/web.mdx
Install the Go Server SDK using the go get command.
```bash
go get github.com/VapiAI/server-sdk-go
```
--------------------------------
### Install and Start Redis (Ubuntu/Debian)
Source: https://github.com/vapiai/docs/blob/main/fern/calls/call-queue-management.mdx
Install Redis on Ubuntu/Debian systems and start the Redis server.
```bash
# Ubuntu/Debian
sudo apt update
sudo apt install redis-server
sudo systemctl start redis-server
```
--------------------------------
### Install and Start Redis (macOS)
Source: https://github.com/vapiai/docs/blob/main/fern/calls/call-queue-management.mdx
Install Redis locally on macOS using Homebrew and start the Redis service.
```bash
# macOS (using Homebrew)
brew install redis
brew services start redis
```
--------------------------------
### Document MCP setup in README
Source: https://github.com/vapiai/docs/blob/main/fern/cli/mcp-integration.mdx
Example markdown snippet for documenting Vapi MCP setup requirements for team members.
```markdown
## Development Setup
This project uses Vapi MCP for enhanced IDE support:
1. Install Vapi CLI: `curl -sSL https://vapi.ai/install.sh | bash`
2. Set up MCP: `vapi mcp setup`
3. Restart your IDE
```
--------------------------------
### Install and Start localtunnel with Vapi Listener
Source: https://github.com/vapiai/docs/blob/main/fern/cli/webhook-testing.mdx
Instructions for setting up localtunnel to create a public URL for your local development server and running the Vapi listener.
```bash
# Terminal 1: Install and start localtunnel
npm install -g localtunnel
lt --port 4242
# Terminal 2: Start vapi listener
vapi listen --forward-to localhost:3000/webhook
# Use the localtunnel URL in Vapi Dashboard
```
--------------------------------
### Example Vapi Initialization Output
Source: https://github.com/vapiai/docs/blob/main/fern/cli/project-integration.mdx
This output shows a successful Vapi initialization process, including project analysis, dependency installation, file generation, and next steps.
```bash
$ vapi init
🔍 Analyzing project...
✓ Detected: Next.js 14 application
📦 Installing dependencies...
✓ Installed @vapi-ai/web@latest
✓ Installed @vapi-ai/server-sdk@latest
📝 Generating files...
✓ Created components/VapiButton.tsx
✓ Created app/api/vapi/webhook/route.ts
✓ Created lib/vapi-client.ts
✓ Created .env.example
🎉 Vapi initialized successfully!
Next steps:
1. Copy .env.example to .env
2. Add your VAPI_API_KEY
3. Run: npm run dev
4. Test the voice button at http://localhost:3000
```
--------------------------------
### Example Instructions for a Scenario
Source: https://github.com/vapiai/docs/blob/main/fern/observability/simulations-quickstart.mdx
This is an example of the instructions provided when configuring a scenario. It guides the tester on the specific actions to perform during the simulated call, such as booking an appointment and confirming details.
```text
You are calling to book an appointment for next Monday at 2pm.
Confirm your identity when asked and provide any required information.
End the call once you receive a confirmation number.
```
--------------------------------
### Setup Vapi in GitHub Actions
Source: https://github.com/vapiai/docs/blob/main/fern/cli/project-integration.mdx
Integrate Vapi setup into your GitHub Actions workflow by downloading and running the installation script, then initializing the project.
```yaml
# GitHub Actions example
- name: Setup Vapi
run: |
curl -sSL https://vapi.ai/install.sh | bash
vapi init --skip-install
```
--------------------------------
### Create Assistant in Java
Source: https://github.com/vapiai/docs/blob/main/fern/quickstart/web.mdx
Example of creating an assistant using the Java SDK. It includes setting the assistant's name, initial message, model details, and voice configuration. Requires appropriate Vapi client setup.
```java
Assistant assistant = vapi.assistants().create(CreateAssistantRequest.builder()
.name("Sales Assistant")
.firstMessage("Hi! I'm calling about your interest in our software solutions.")
.model(Model.builder()
.provider("openai")
.model("gpt-4o")
.temperature(0.7)
.messages(List.of(Message.builder()
.role("system")
.content("You are a friendly sales representative. Keep responses under 30 words.")
.build()))
.build())
.voice(Voice.builder()
.provider("11labs")
.voiceId("21m00Tcm4TlvDq8ikWAM")
.build())
.build());
```
--------------------------------
### Copy Environment Template
Source: https://github.com/vapiai/docs/blob/main/fern/cli/project-integration.mdx
Copy the example environment file to a new file named .env to start configuring your project.
```bash
cp .env.example .env
```
--------------------------------
### Install and Initialize Vapi in Dockerfile
Source: https://github.com/vapiai/docs/blob/main/fern/cli/project-integration.mdx
Include commands in your Dockerfile to download and install the Vapi CLI, and then initialize your project, skipping the dependency installation step.
```dockerfile
# Install Vapi CLI
RUN curl -sSL https://vapi.ai/install.sh | bash
# Initialize project
RUN vapi init --skip-install
```
--------------------------------
### Configure Assistant System Prompt
Source: https://github.com/vapiai/docs/blob/main/fern/tools/go-high-level.mdx
Provides an example system prompt to guide an AI assistant in performing appointment booking using GoHighLevel tools.
```APIDOC
## Configure Assistant System Prompt
After adding the GoHighLevel tools to your assistant, it's crucial to provide a clear system prompt. This prompt guides the assistant on how and when to use each tool to achieve the desired workflow. For a typical appointment booking scenario, your system prompt instructs the AI on the sequence of operations and conditions for using each tool.
Here's an example system prompt to guide your assistant. Remember to replace `ghl_contact_get`, `ghl_contact_create`, `ghl_check_availability`, and `ghl_create_event` with the exact names you gave your tools if they are different.
```text
You are a helpful and efficient scheduling assistant. Your primary goal is to book appointments for users. Follow these steps carefully:
1. **Gather Information**: Start by asking for the caller's full name and email address.
2. **Check Existing Contact**: Use the `ghl_contact_get` tool to see if a contact already exists with the provided email.
3. **Create Contact (if needed)**: If no contact is found, use the `ghl_contact_create` tool to create a new contact with their name and email.
4. **Discuss Appointment Time**: Once you have a contact ID (either from an existing contact or a newly created one), ask the user for their preferred date and time for the appointment.
5. **Check Availability**: Use the `ghl_check_availability` tool to check for open slots. It's a good idea to check for the entire preferred day to offer alternatives if their initial request isn't available.
6. **Confirm Time**: Discuss the available options with the user and agree on a suitable time.
7. **Book Appointment**: Finally, use the `ghl_create_event` tool to book the appointment, ensuring you use the correct contact ID.
**Important Guidelines:**
* Always use `ghl_contact_get` to check for an existing contact *before* attempting to create one with `ghl_contact_create`.
* You *must* have a contact ID (from `ghl_contact_get` or `ghl_contact_create`) *before* you can book an appointment with `ghl_create_event`.
* Always confirm availability with `ghl_check_availability` *before* attempting to book an appointment with `ghl_create_event`.
```
```
--------------------------------
### Technical Documentation System Prompt Example
Source: https://github.com/vapiai/docs/blob/main/fern/knowledge-base/using-query-tool.mdx
Example system prompt instruction for technical documentation queries. This guides the assistant to use a specific tool for API and code-related searches.
```string
"When users need API documentation, code examples, or integration help, use the 'api-docs-search' tool to search the technical knowledge base."
```
--------------------------------
### Install C# Server SDK
Source: https://github.com/vapiai/docs/blob/main/fern/quickstart/web.mdx
Install the C# Server SDK using the dotnet add package command.
```bash
dotnet add package Vapi.ServerSDK
```
--------------------------------
### Install Ruby Server SDK
Source: https://github.com/vapiai/docs/blob/main/fern/quickstart/web.mdx
Install the Ruby Server SDK using the gem command.
```bash
gem install vapi-server-sdk
```
--------------------------------
### Install Vapi Server SDK
Source: https://github.com/vapiai/docs/blob/main/fern/quickstart/phone.mdx
Install the required SDK package using your preferred package manager.
```bash
npm install @vapi-ai/server-sdk
```
```bash
yarn add @vapi-ai/server-sdk
```
```bash
pnpm add @vapi-ai/server-sdk
```
```bash
bun add @vapi-ai/server-sdk
```
--------------------------------
### Start ngrok Tunnel and Vapi Listener
Source: https://github.com/vapiai/docs/blob/main/fern/cli/webhook-testing.mdx
This sequence shows how to start an ngrok tunnel to expose a local port and then start the Vapi listener to forward events to your local server.
```bash
# Terminal 1: Start ngrok tunnel
ngrok http 4242
# Terminal 2: Start vapi listener
vapi listen --forward-to localhost:3000/webhook
# Use the ngrok URL in Vapi Dashboard
```
--------------------------------
### Install Python Server SDK
Source: https://github.com/vapiai/docs/blob/main/fern/quickstart/web.mdx
Install the Python Server SDK using pip.
```bash
pip install vapi_server_sdk
```
--------------------------------
### Install Python SDK
Source: https://github.com/vapiai/docs/blob/main/fern/quickstart/phone.mdx
Install the Vapi Python SDK via pip.
```bash
pip install vapi_server_sdk
```
--------------------------------
### Install OpenAI SDK with bun
Source: https://github.com/vapiai/docs/blob/main/fern/chat/openai-compatibility.mdx
Install the OpenAI SDK using bun. This is a prerequisite for testing OpenAI compatibility.
```bash
bun add openai
```
--------------------------------
### Install Local SDK
Source: https://github.com/vapiai/docs/blob/main/advanced.md
Installs the locally generated SDK in editable mode.
```sh
pip install -e /fern/.preview/fern-python-sdk
```
--------------------------------
### Install TypeScript Server SDK
Source: https://github.com/vapiai/docs/blob/main/fern/quickstart/web.mdx
Use npm, yarn, pnpm, or bun to install the TypeScript Server SDK.
```bash
npm install @vapi-ai/server-sdk
```
```bash
yarn add @vapi-ai/server-sdk
```
```bash
pnpm add @vapi-ai/server-sdk
```
```bash
bun add @vapi-ai/server-sdk
```
--------------------------------
### Tool with Request-Start Message Example (JSON)
Source: https://github.com/vapiai/docs/blob/main/fern/prompting-guide.mdx
Demonstrates how to configure a 'request-start' message for slow tools to provide immediate feedback to the user.
```json
{
"name": "get_available_slots",
"description": "Use this tool to check for available appointment times in the clinic's calendar for a specific date.",
"messages": [
{
"type": "request-start",
"content": "Let me look that up for you."
}
]
}
```
--------------------------------
### Payment Squad Configuration Example
Source: https://github.com/vapiai/docs/blob/main/fern/security-and-privacy/PCI.mdx
A complete squad configuration demonstrating a secure approach to handling payment information without recording sensitive details. This setup involves multiple assistants to guide the user through payment method addition and confirmation.
```json
{
"name": "Payment Squad Without Recording",
"members": [
{
"assistant": {
"name": "Assistant 1",
"model": {
"model": "gpt-4o",
"provider": "openai",
"messages": [
{
"content": "You are a helpful QuickSend assistant. Greet the caller, let them know you'll help them add a new payment method, and then smoothly transfer them to the payment setup assistant.",
"role": "system"
}
]
},
"voice": {
"provider": "vapi",
"version": 2,
"voiceId": "Elliot"
},
"transcriber": {
"model": "nova-2",
"provider": "deepgram",
"language": "en"
},
"keypadInputPlan": {
"enabled": true,
"timeoutSeconds": 10,
"delimiters": [
"#"
]
},
"firstMessage": "Welcome to QuickSend! I'll help you add a new payment method. Let's get started.",
"firstMessageMode": "assistant-speaks-first"
},
"assistantDestinations": [
{
"type": "assistant",
"assistantName": "Assistant 2",
"description": "Transfer the caller to the payment setup assistant."
}
]
},
{
"assistant": {
"name": "Assistant 2",
"model": {
"model": "gpt-4o",
"provider": "openai",
"messages": [
{
"content": "You are a payment setup assistant. Ask the caller to enter their new card number followed by the pound (#) key. When you receive it, repeat it back clearly for confirmation. Once confirmed, transfer them to the payment confirmation assistant.",
"role": "system"
}
]
},
"artifactPlan": {
"recordingEnabled": false,
"loggingEnabled": false,
"transcriptPlan": {
"enabled": false
}
},
"voice": {
"provider": "vapi",
"version": 2,
"voiceId": "Elliot"
},
"transcriber": {
"model": "nova-2",
"provider": "deepgram",
"language": "en"
},
"firstMessage": "Please enter your new card number followed by the POUND key.",
"firstMessageMode": "assistant-speaks-first",
"keypadInputPlan": {
"enabled": true,
"timeoutSeconds": 10,
"delimiters": [
"#"
]
}
},
"assistantDestinations": [
{
"type": "assistant",
"assistantName": "Assistant 3",
"description": "Transfer the caller to the payment confirmation assistant.",
"contextEngineeringPlan": {
"type": "previousAssistantMessages"
},
"variableExtractionPlan": {
"schema": {
"type": "object",
"properties": {
"lastFourDigits": {
"type": "string",
"description": "last four digits of the card the user gave as input"
}
}
}
}
}
]
},
{
"assistant": {
"name": "Assistant 3",
"model": {
"model": "gpt-4o",
"provider": "openai",
"messages": [
{
"content": "You are a payment confirmation assistant. Thank the caller for providing their card number. Read out the last four digits to them and confirm that they are correct. Once confirmed, let the caller know the payment method has been added successfully and close the conversation politely. Last four digits are {{lastFourDigits}}",
"role": "system"
}
]
}
}
}
]
}
```
--------------------------------
### Environment Workflow Examples
Source: https://github.com/vapiai/docs/blob/main/fern/cli/authentication.mdx
Common patterns for switching between development, production, and client environments.
```bash
# Development work
vapi auth switch dev
vapi assistant create --name "Test Assistant"
# Production deployment
vapi auth switch prod
vapi assistant create --name "Customer Support"
```
```bash
# Client A work
vapi auth switch client-a
vapi phone list
# Client B work
vapi auth switch client-b
vapi workflow list
```
```bash
# Personal development
vapi auth switch personal
vapi init
# Team project
vapi auth switch team
vapi assistant list
```
--------------------------------
### Initialize Project with Auto-detection
Source: https://github.com/vapiai/docs/blob/main/fern/cli/overview.mdx
Example output of the initialization process showing auto-detection of the tech stack.
```bash
vapi init
# Detected: Next.js application
# ✓ Installed @vapi-ai/web SDK
# ✓ Generated components/VapiButton.tsx
# ✓ Created pages/api/vapi/webhook.ts
# ✓ Added environment template
```
--------------------------------
### Few-Shot Examples Template
Source: https://github.com/vapiai/docs/blob/main/fern/static/vapi-prompt-reference.md
Illustrates a template for providing few-shot examples to guide model behavior, including happy path, edge cases, and error recovery.
```markdown
# Examples
## Example 1: Happy Path
User: "I'd like to book a cleaning."
Assistant: "I'd be happy to help. What's your first and last name?"
User: "Jane Smith."
Assistant: "Thanks, Jane. And your date of birth?"
User: "March fifteenth, nineteen eighty-five."
Assistant: "Let me find some available times for a cleaning."
Tool Call: get_available_slots(service: "cleaning")
Assistant: "I have Tuesday at ten in the morning or Wednesday at
two in the afternoon. Which works better?"
## Example 2: Edge Case — No Availability
User: "I need an appointment today."
Tool Call: get_available_slots(service: "cleaning", date: "today")
// Tool returns empty
Assistant: "Unfortunately I don't have any openings today. The
earliest I can offer is tomorrow at nine in the morning. Would
that work?"
## Example 3: Error Recovery — Tool Failure
User: "Can you book me for Friday?"
Assistant: "Let me check that for you."
Tool Call: book_appointment(date: "Friday")
// Tool returns error
Assistant: "I'm having a brief issue with our booking system. Let
me try again."
// Tool fails again
Assistant: "I apologize for the trouble. Would you like me to
transfer you to our front desk so they can book you directly?"
```
--------------------------------
### Product Support System Prompt Example
Source: https://github.com/vapiai/docs/blob/main/fern/knowledge-base/using-query-tool.mdx
Example system prompt instruction for a product support scenario. This specifies the tool to use for product-related queries.
```string
"When users ask about product features, specifications, or troubleshooting, use the 'product-support-search' tool to find relevant information."
```
--------------------------------
### Webhook payload structures
Source: https://github.com/vapiai/docs/blob/main/fern/observability/simulations-advanced.mdx
Example JSON payloads received by your server for simulation start and end events.
```json
// simulation.run.started webhook payload
{
"event": "simulation.run.started",
"simulationId": "550e8400-e29b-41d4-a716-446655440003",
"runId": "550e8400-e29b-41d4-a716-446655440007",
"timestamp": "2024-01-15T09:50:05Z"
}
// simulation.run.ended webhook payload
{
"event": "simulation.run.ended",
"simulationId": "550e8400-e29b-41d4-a716-446655440003",
"runId": "550e8400-e29b-41d4-a716-446655440007",
"timestamp": "2024-01-15T09:52:30Z",
"duration": 145,
"status": "passed",
"transcript": "...", // if include.transcript = true
"messages": [...], // if include.messages = true
"recordingUrl": "https://..." // if include.recordingUrl = true
}
```
--------------------------------
### Initialize Vapi in a project
Source: https://github.com/vapiai/docs/blob/main/fern/cli/project-integration.mdx
Run this command in your project directory to trigger automatic framework detection and setup.
```bash
cd my-project
vapi init
```
--------------------------------
### Prompting for IVR Navigation
Source: https://github.com/vapiai/docs/blob/main/fern/ivr-navigation.mdx
Example system prompt instructions to guide an assistant through IVR menus and handle waiting periods.
```txt
[When navigating an IVR tree]
- WAIT for all options to be spoken before proceeding
- Once you have heard all options, use the dtmf tool with an input digit that matches the option you want to select
- Avoid saying anything if using the dtmf tool at the same time
[When waiting]
- Reply with an empty string like " " to ensure nothing is spoken
[Call Flow]
1. Navigate IVR tree (if needed)
- In order to get connected with a live representative that can handle your request, you may need to navigate an IVR tree.
- This might sound like "Press 1 for..."
- Look for options that indicate operator assistance
- As soon as you get connected to a human, proceed to the next step
```
--------------------------------
### Attach Phone Number to Squad
Source: https://github.com/vapiai/docs/blob/main/fern/squads/examples/clinic-triage-scheduling.mdx
Example of attaching a phone number to a squad for call scenarios. This is used when creating a call or starting with a squad.
```json
{
"customer": { "number": "+15551234567" },
"squad": { "members": [] }
}
```
--------------------------------
### Repository structure example
Source: https://github.com/vapiai/docs/blob/main/fern/enterprise/dev-uat-prod.mdx
A recommended directory layout for organizing assistant, squad, tool, and knowledge base configurations.
```text
/platform
/assistants
order-agent.yaml
support-agent.yaml
/squads
support-level1.yaml
/tools
jira.yaml
zendesk.yaml
/knowledge
product-faqs.yaml
/policies
safety.yaml
environments.yaml # maps env → org IDs, model defaults, endpoints
schemas/ # JSONSchema for validation
```
--------------------------------
### Receive Assistant Speech Started Event
Source: https://github.com/vapiai/docs/blob/main/fern/server-url/events.mdx
Get real-time notifications as the assistant begins speaking each segment. This is opt-in and requires configuration in your assistant's serverMessages.
```json
{
"message": {
"type": "assistant.speechStarted",
"text": "Hello world, how can I help you today?",
"turn": 2,
"source": "model",
"timing": {
/* optional — shape depends on voice provider, see below */
}
}
}
```
--------------------------------
### Install Vapi Web SDK (bun)
Source: https://github.com/vapiai/docs/blob/main/fern/assistants/examples/docs-agent.mdx
Install the Vapi Web SDK using bun. This is the first step to creating a voice widget for your documentation assistant.
```bash
bun add @vapi-ai/web
```
--------------------------------
### Trigger Action After Time Elapsed
Source: https://github.com/vapiai/docs/blob/main/fern/assistants/assistant-hooks.mdx
Use the `call.timeElapsed` hook to trigger an action after a specific duration from the call start. This example speaks a message 5 minutes into the call.
```json
{
"hooks": [
{
"on": "call.timeElapsed",
"options": {
"seconds": 300
},
"do": [
{
"type": "say",
"exact": "Just a heads up, we've been on the call for 5 minutes."
}
]
}
]
}
```
--------------------------------
### Run local development server
Source: https://github.com/vapiai/docs/blob/main/README.md
Starts a local server with hot-reloading for documentation development.
```sh
npm install -g fern-api
fern docs dev
```
--------------------------------
### Production Webhook Setup with Signature Verification
Source: https://github.com/vapiai/docs/blob/main/fern/cli/webhook-testing.mdx
Example of a production webhook endpoint using Express.js that includes signature verification for security. Replace `verifyVapiSignature` with your actual verification logic.
```typescript
// Production webhook with signature verification
app.post('/webhook', verifyVapiSignature, async (req, res) => {
// Your production handler
});
```
--------------------------------
### vapi listen output example
Source: https://github.com/vapiai/docs/blob/main/fern/cli/webhook-testing.mdx
Example output when running `vapi listen`. It shows the listening and forwarding addresses, instructions for tunneling, and logs incoming webhook events.
```bash
$ vapi listen --forward-to localhost:3000/webhook
🎧 Vapi Webhook Listener
📡 Listening on: http://localhost:4242
📍 Forwarding to: http://localhost:3000/webhook
⚠️ To receive Vapi webhooks:
1. Use a tunneling service (e.g., ngrok http 4242)
2. Update your Vapi webhook URLs to the tunnel URL
Waiting for webhook events...
[2024-01-15 10:30:45] POST /
Event: call-started
Call ID: call_abc123def456
Status: 200 OK (45ms)
[2024-01-15 10:30:52] POST /
Event: speech-update
Transcript: "Hello, how can I help you?"
Status: 200 OK (12ms)
```
--------------------------------
### HTML Script Tag Implementation
Source: https://github.com/vapiai/docs/blob/main/fern/assistants/examples/voice-widget.mdx
Use this HTML script tag for the fastest way to get started with Vapi. Ensure you substitute your assistant ID and public API key.
```html
```
--------------------------------
### Create Node.js Project
Source: https://github.com/vapiai/docs/blob/main/fern/customization/custom-transcriber.mdx
Initializes a new Node.js project directory and navigates into it.
```bash
mkdir vapi-custom-transcriber
cd vapi-custom-transcriber
npm init -y
```
--------------------------------
### Voice Formatting Rules
Source: https://github.com/vapiai/docs/blob/main/fern/static/vapi-prompt-reference.md
These examples show the conversion from written form to spoken form for numbers, dates, and addresses. Ensure your prompts guide the agent to use the correct spoken format.
```markdown
| Written form | Spoken form |
| --- | --- |
| `$42.50` | "forty-two dollars and fifty cents" |
| `03/04/2025` | "March fourth, twenty twenty-five" |
| `(831) 239-8123` | "eight three one, two three nine, eight one two three" |
| `2:15 PM` | "two fifteen in the afternoon" |
| `Suite 400` | "suite four hundred" |
```
--------------------------------
### Create a Knowledge Base
Source: https://github.com/vapiai/docs/blob/main/fern/community/knowledgebase.mdx
Define the knowledge base configuration, including search parameters and file or website sources.
```bash
curl --location 'http://localhost:3001/knowledge-base' \
--header 'Content-Type: text/plain' \
--header 'Authorization: Bearer ' \
--data '{
"name": "v2",
"provider": "trieve",
"searchPlan": {
"searchType": "semantic",
"topK": 3,
"removeStopWords": true,
"scoreThreshold": 0.7
},
"createPlan": {
"type": "create",
"chunkPlans": [
{
"fileIds": ["", ""],
"websites": ["", ""],
"targetSplitsPerChunk": 50,
"splitDelimiters": [".!?\n"],
"rebalanceChunks": true
}
]
}
}'
```
--------------------------------
### Handle Widget Events in React
Source: https://github.com/vapiai/docs/blob/main/fern/chat/web-widget.mdx
Integrate widget event handling within React components using the provided props. This example demonstrates handling call start, call end, messages, and errors.
```tsx
import { VapiWidget } from '@vapi-ai/client-sdk-react';
function App() {
const handleCallStart = () => {
console.log('Voice call started');
// Update state, track analytics, etc.
};
const handleCallEnd = () => {
console.log('Voice call ended');
// Update state, save conversation, etc.
};
const handleMessage = (message: any) => {
console.log('Message received:', message);
// Process message, update state, etc.
};
const handleError = (error: Error) => {
console.error('Widget error:', error);
// Handle errors, show fallback UI, etc.
};
return (
);
}
```
--------------------------------
### Install Web SDK
Source: https://github.com/vapiai/docs/blob/main/fern/tools/client-side-websdk.mdx
Install the Vapi Web SDK using npm. This is the first step to enabling client-side tool handling.
```bash
npm install @vapi-ai/web
```
--------------------------------
### API Response for Scenario Creation
Source: https://github.com/vapiai/docs/blob/main/fern/observability/simulations-quickstart.mdx
This is an example of the JSON response received after successfully creating a scenario using the Vapi AI API. The response includes the unique ID of the created scenario, which is essential for subsequent simulation setups.
```json
{
"id": "550e8400-e29b-41d4-a716-446655440002",
"orgId": "org-456",
"name": "Book Appointment",
"instructions": "You are calling to book an appointment for next Monday at 2pm...",
"evaluations": [
{
"structuredOutput": {
"name": "appointment_booked",
"schema": { "type": "boolean", "description": "..." }
},
"comparator": "=",
"value": true,
"required": true
},
{
"structuredOutput": {
"name": "confirmation_provided",
"schema": { "type": "boolean", "description": "..." }
},
"comparator": "=",
"value": true,
"required": true
}
],
"createdAt": "2024-01-15T09:35:00Z",
"updatedAt": "2024-01-15T09:35:00Z"
}
```
--------------------------------
### Example Prompt Structure for Realtime Models
Source: https://github.com/vapiai/docs/blob/main/fern/openai-realtime.mdx
Organize your prompts with clear sections like Role, Personality, Instructions, Tools, and Safety for better model comprehension. This structure helps guide the model's behavior effectively.
```text
# Role & Objective
You are a customer service agent for Acme Corp. Your goal is to resolve issues quickly.
# Personality & Tone
- Friendly, professional, and empathetic
- Speak naturally at a moderate pace
- Keep responses to 2-3 sentences
# Instructions
- Greet callers warmly
- Ask clarifying questions before offering solutions
- Always confirm understanding before proceeding
# Tools
Use the available tools to look up account information and process requests.
# Safety
If a caller becomes aggressive or requests something outside your scope,
politely offer to transfer them to a specialist.
```
--------------------------------
### Install npm Dependencies with Sudo
Source: https://github.com/vapiai/docs/blob/main/fern/cli/project-integration.mdx
Use sudo with npm install to resolve permission errors during SDK installation in npm projects.
```bash
# npm projects
sudo npm install
```
--------------------------------
### Start Express Server
Source: https://github.com/vapiai/docs/blob/main/fern/calls/call-handling-with-vapi-and-twilio.mdx
Starts the server on the specified port.
```js
app.listen(3000, () => {
console.log("Server running on port 3000");
});
```
--------------------------------
### Install Vapi Web SDK (yarn)
Source: https://github.com/vapiai/docs/blob/main/fern/assistants/examples/docs-agent.mdx
Install the Vapi Web SDK using yarn. This is the first step to creating a voice widget for your documentation assistant.
```bash
yarn add @vapi-ai/web
```
--------------------------------
### Deployer API commands
Source: https://github.com/vapiai/docs/blob/main/fern/enterprise/dev-uat-prod.mdx
Example curl commands for backing up and applying configurations using idempotency keys.
```bash
# Export (backup)
curl -sS -H "Authorization: Bearer $TOKEN" \
GET `https://api.vendor.com/v1/assistants?label=order-agent` > backups/order-agent-dev.json
# Apply (create or update)
curl -sS -H "Authorization: Bearer $TOKEN" -H "Idempotency-Key: $KEY" \
-H "Content-Type: application/json" \
-X PUT `https://api.vendor.com/v1/assistants/order-agent` \
--data-binary @rendered/order-agent.dev.json
```
--------------------------------
### API Response Example
Source: https://github.com/vapiai/docs/blob/main/fern/tools/static-variables-and-aliases.mdx
This is an example of a JSON API response structure.
```json
{
"data": {
"id": "usr_abc123",
"name": "Jane Smith",
"email": "Jane.Smith@example.com"
},
"status": "active"
}
```