[Go to site: main page, start]
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 Vapi API key

Follow the Vapi API key guide to create, view, or copy an API key:

$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