Core Features

Project integration

Overview

The vapi init command intelligently integrates Vapi into your existing codebase. It automatically detects your framework, installs the appropriate SDK, and generates production-ready code examples tailored to your project structure.

In this guide, you’ll learn to:

  • Initialize Vapi in any project
  • Understand what files are generated
  • Customize the initialization process
  • Work with different frameworks

Quick start

Navigate to your project directory and run:

$cd my-project
>vapi init

The CLI will:

  1. Detect your project type and framework
  2. Install the appropriate Vapi SDK
  3. Generate example components and API routes
  4. Create environment configuration templates
  5. Provide next steps specific to your setup

How it works

Framework detection

The CLI analyzes your project structure to identify:

  • Package files: package.json, requirements.txt, go.mod, etc.
  • Configuration files: Framework-specific configs
  • Project structure: Directory patterns and file extensions
  • Dependencies: Installed packages and libraries

What gets generated

Based on your framework, the CLI generates:

$vapi init
># Detected: Next.js application

Generated files:

  • components/VapiButton.tsx - Voice call button component
  • pages/api/vapi/webhook.ts - Webhook handler endpoint
  • lib/vapi-client.ts - Vapi client setup
  • .env.example - Environment variables template

Installed packages:

  • @vapi-ai/web - Web SDK for browser integration
  • @vapi-ai/server-sdk - Server SDK for webhooks

Supported frameworks

Frontend frameworks

React
  • Create React App
  • Vite
  • Custom webpack
Vue.js
  • Vue 3
  • Nuxt.js
  • Vite
Angular
  • Angular 12+
  • Ionic
Next.js
  • App Router
  • Pages Router
  • API Routes
Svelte
  • SvelteKit
  • Vite
Vanilla JS
  • HTML/CSS/JS
  • Webpack
  • Parcel

Mobile frameworks

React Native
  • Expo
  • Bare workflow
Flutter
  • iOS & Android
  • Web support

Backend frameworks

Node.js
  • Express
  • Fastify
  • Koa
Python
  • Django
  • FastAPI
  • Flask
Go
  • Gin
  • Echo
  • Fiber
Ruby
  • Rails
  • Sinatra
Java
  • Spring Boot
  • Quarkus
C#/.NET
  • ASP.NET Core
  • Blazor

Advanced options

Specify target directory

Initialize in a specific directory:

$vapi init /path/to/project

Skip SDK installation

Generate only example files without installing packages:

$vapi init --skip-install

Force framework

Override auto-detection:

$vapi init --framework react
>vapi init --framework python

Custom templates

Use your own templates:

$vapi init --template @myorg/vapi-templates

Environment setup

After initialization, configure your environment:

1

Copy environment template

$cp .env.example .env
2

Add your API key

Get your API key from the Vapi Dashboard:

$VAPI_API_KEY=your-api-key-here
3

Configure webhook URL (optional)

For local development:

$VAPI_WEBHOOK_URL=https://your-domain.com/api/vapi/webhook

Common patterns

Adding to monorepos

For monorepos, run init in the specific package:

$cd packages/web-app
>vapi init
>
>cd ../api-server
>vapi init

CI/CD integration

Add to your build process:

1# GitHub Actions example
2- name: Setup Vapi
3  run: |
4    curl -sSL https://vapi.ai/install.sh | bash
5    vapi init --skip-install

Docker environments

Include in your Dockerfile:

1# Install Vapi CLI
2RUN curl -sSL https://vapi.ai/install.sh | bash
3
4# Initialize project
5RUN vapi init --skip-install

Troubleshooting

If the CLI can’t detect your framework:

  1. Ensure you’re in the project root
  2. Check for required config files
  3. Use --framework flag to specify manually
$vapi init --framework react

For permission issues during SDK installation:

$# npm projects
>sudo npm install
>
># Python projects
>pip install --user vapi-server-sdk

If files already exist, the CLI will:

  1. Ask for confirmation before overwriting
  2. Create backup files (.backup extension)
  3. Show a diff of changes

Use --force to skip confirmations:

$vapi init --force

Next steps

After initializing your project:

Example output:

$$ 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