|
| 1 | +--- |
| 2 | +title: MCP integration |
| 3 | +description: Turn your IDE into a Vapi expert with Model Context Protocol |
| 4 | +slug: cli/mcp |
| 5 | +--- |
| 6 | + |
| 7 | +## Overview |
| 8 | + |
| 9 | +The Model Context Protocol (MCP) integration transforms your IDE's AI assistant into a Vapi expert. Once configured, your IDE gains complete, accurate knowledge of Vapi's APIs, features, and best practices - eliminating AI hallucinations and outdated information. |
| 10 | + |
| 11 | +**In this guide, you'll learn to:** |
| 12 | +- Set up MCP in supported IDEs |
| 13 | +- Understand what knowledge is provided |
| 14 | +- Use your enhanced IDE effectively |
| 15 | +- Troubleshoot common issues |
| 16 | + |
| 17 | +## Quick start |
| 18 | + |
| 19 | +Run the setup command to auto-configure all supported IDEs: |
| 20 | + |
| 21 | +```bash |
| 22 | +vapi mcp setup |
| 23 | +``` |
| 24 | + |
| 25 | +Or configure a specific IDE: |
| 26 | + |
| 27 | +```bash |
| 28 | +vapi mcp setup cursor # For Cursor |
| 29 | +vapi mcp setup windsurf # For Windsurf |
| 30 | +vapi mcp setup vscode # For VSCode with Copilot |
| 31 | +``` |
| 32 | + |
| 33 | +## What is MCP? |
| 34 | + |
| 35 | +Model Context Protocol is a standard that allows AI assistants to access structured knowledge and tools. When you set up MCP for Vapi: |
| 36 | + |
| 37 | +- Your IDE's AI gains access to complete Vapi documentation |
| 38 | +- Code suggestions become accurate and up-to-date |
| 39 | +- Examples use real, working Vapi patterns |
| 40 | +- API hallucinations are eliminated |
| 41 | + |
| 42 | +## Supported IDEs |
| 43 | + |
| 44 | +<CardGroup cols={3}> |
| 45 | + <Card title="Cursor" icon="code" href="https://cursor.sh"> |
| 46 | + AI-first code editor with deep MCP integration |
| 47 | + |
| 48 | + **Setup:** Creates `.cursor/mcp.json` |
| 49 | + </Card> |
| 50 | + <Card title="Windsurf" icon="wind" href="https://codeium.com/windsurf"> |
| 51 | + Codeium's AI-powered IDE |
| 52 | + |
| 53 | + **Setup:** Creates `.windsurf/mcp.json` |
| 54 | + </Card> |
| 55 | + <Card title="VSCode" icon="brands microsoft" href="https://code.visualstudio.com"> |
| 56 | + With GitHub Copilot extension |
| 57 | + |
| 58 | + **Setup:** Configures Copilot settings |
| 59 | + </Card> |
| 60 | +</CardGroup> |
| 61 | + |
| 62 | +## How it works |
| 63 | + |
| 64 | +### What gets configured |
| 65 | + |
| 66 | +The MCP setup creates configuration files that connect your IDE to the Vapi MCP server: |
| 67 | + |
| 68 | +<Tabs> |
| 69 | + <Tab title="Cursor"> |
| 70 | + **File:** `.cursor/mcp.json` |
| 71 | + ```json |
| 72 | + { |
| 73 | + "servers": { |
| 74 | + "vapi-docs": { |
| 75 | + "command": "npx", |
| 76 | + "args": ["@vapi-ai/mcp-server"] |
| 77 | + } |
| 78 | + } |
| 79 | + } |
| 80 | + ``` |
| 81 | + </Tab> |
| 82 | + <Tab title="Windsurf"> |
| 83 | + **File:** `.windsurf/mcp.json` |
| 84 | + ```json |
| 85 | + { |
| 86 | + "servers": { |
| 87 | + "vapi-docs": { |
| 88 | + "command": "npx", |
| 89 | + "args": ["@vapi-ai/mcp-server"] |
| 90 | + } |
| 91 | + } |
| 92 | + } |
| 93 | + ``` |
| 94 | + </Tab> |
| 95 | + <Tab title="VSCode"> |
| 96 | + **Settings:** Updates workspace settings |
| 97 | + ```json |
| 98 | + { |
| 99 | + "github.copilot.advanced": { |
| 100 | + "mcp.servers": { |
| 101 | + "vapi-docs": { |
| 102 | + "command": "npx", |
| 103 | + "args": ["@vapi-ai/mcp-server"] |
| 104 | + } |
| 105 | + } |
| 106 | + } |
| 107 | + } |
| 108 | + ``` |
| 109 | + </Tab> |
| 110 | +</Tabs> |
| 111 | + |
| 112 | +### What knowledge is provided |
| 113 | + |
| 114 | +Your IDE gains access to: |
| 115 | + |
| 116 | +- **Complete API Reference** - Every endpoint, parameter, and response |
| 117 | +- **Code Examples** - Working samples for all features |
| 118 | +- **Integration Guides** - Step-by-step implementation patterns |
| 119 | +- **Best Practices** - Recommended approaches and patterns |
| 120 | +- **Latest Features** - Always up-to-date with new releases |
| 121 | +- **Troubleshooting** - Common issues and solutions |
| 122 | + |
| 123 | +## Using your enhanced IDE |
| 124 | + |
| 125 | +### Example prompts |
| 126 | + |
| 127 | +Once MCP is configured, try these prompts in your IDE: |
| 128 | + |
| 129 | +<AccordionGroup> |
| 130 | + <Accordion title="Creating assistants"> |
| 131 | + **Prompt:** "How do I create a voice assistant with Vapi?" |
| 132 | + |
| 133 | + Your IDE will provide accurate code like: |
| 134 | + ```typescript |
| 135 | + import { VapiClient } from "@vapi-ai/server-sdk"; |
| 136 | + |
| 137 | + const client = new VapiClient({ token: process.env.VAPI_API_KEY }); |
| 138 | + |
| 139 | + const assistant = await client.assistants.create({ |
| 140 | + name: "Customer Support", |
| 141 | + model: { |
| 142 | + provider: "openai", |
| 143 | + model: "gpt-4", |
| 144 | + systemPrompt: "You are a helpful customer support agent..." |
| 145 | + }, |
| 146 | + voice: { |
| 147 | + provider: "11labs", |
| 148 | + voiceId: "rachel" |
| 149 | + } |
| 150 | + }); |
| 151 | + ``` |
| 152 | + </Accordion> |
| 153 | + |
| 154 | + <Accordion title="Webhook handling"> |
| 155 | + **Prompt:** "Show me how to handle Vapi webhooks" |
| 156 | + |
| 157 | + Get complete webhook examples: |
| 158 | + ```typescript |
| 159 | + app.post('/webhook', async (req, res) => { |
| 160 | + const { type, call, assistant } = req.body; |
| 161 | + |
| 162 | + switch (type) { |
| 163 | + case 'call-started': |
| 164 | + console.log(`Call ${call.id} started`); |
| 165 | + break; |
| 166 | + case 'speech-update': |
| 167 | + console.log(`User said: ${req.body.transcript}`); |
| 168 | + break; |
| 169 | + case 'function-call': |
| 170 | + // Handle tool calls |
| 171 | + const { functionName, parameters } = req.body.functionCall; |
| 172 | + const result = await handleFunction(functionName, parameters); |
| 173 | + res.json({ result }); |
| 174 | + return; |
| 175 | + } |
| 176 | + |
| 177 | + res.status(200).send(); |
| 178 | + }); |
| 179 | + ``` |
| 180 | + </Accordion> |
| 181 | + |
| 182 | + <Accordion title="Advanced features"> |
| 183 | + **Prompt:** "How do I set up call recording with custom storage?" |
| 184 | + |
| 185 | + Get detailed implementation: |
| 186 | + ```typescript |
| 187 | + const assistant = await client.assistants.create({ |
| 188 | + name: "Recorded Assistant", |
| 189 | + recordingEnabled: true, |
| 190 | + artifactPlan: { |
| 191 | + recordingEnabled: true, |
| 192 | + videoRecordingEnabled: false, |
| 193 | + recordingPath: "s3://my-bucket/recordings/{call_id}" |
| 194 | + }, |
| 195 | + credentialIds: ["aws-s3-credential-id"] |
| 196 | + }); |
| 197 | + ``` |
| 198 | + </Accordion> |
| 199 | +</AccordionGroup> |
| 200 | + |
| 201 | +### Best practices |
| 202 | + |
| 203 | +<Steps> |
| 204 | + <Step title="Be specific"> |
| 205 | + Ask detailed questions about Vapi features: |
| 206 | + - ✅ "How do I transfer calls to a human agent in Vapi?" |
| 207 | + - ❌ "How do I transfer calls?" |
| 208 | + </Step> |
| 209 | + |
| 210 | + <Step title="Request examples"> |
| 211 | + Ask for working code samples: |
| 212 | + - "Show me a complete example of..." |
| 213 | + - "Generate a working implementation of..." |
| 214 | + </Step> |
| 215 | + |
| 216 | + <Step title="Check versions"> |
| 217 | + Specify SDK versions when needed: |
| 218 | + - "Using @vapi-ai/web v2.0, how do I..." |
| 219 | + - "What's the latest way to..." |
| 220 | + </Step> |
| 221 | +</Steps> |
| 222 | + |
| 223 | +## Configuration options |
| 224 | + |
| 225 | +### Check status |
| 226 | + |
| 227 | +View current MCP configuration: |
| 228 | + |
| 229 | +```bash |
| 230 | +vapi mcp status |
| 231 | +``` |
| 232 | + |
| 233 | +Output: |
| 234 | +``` |
| 235 | +MCP Configuration Status: |
| 236 | +✓ Cursor: Configured (.cursor/mcp.json) |
| 237 | +✗ Windsurf: Not configured |
| 238 | +✓ VSCode: Configured (workspace settings) |
| 239 | +
|
| 240 | +Vapi MCP Server: v1.2.3 (latest) |
| 241 | +``` |
| 242 | + |
| 243 | +### Update server |
| 244 | + |
| 245 | +Keep the MCP server updated: |
| 246 | + |
| 247 | +```bash |
| 248 | +# Update to latest version |
| 249 | +npm update -g @vapi-ai/mcp-server |
| 250 | + |
| 251 | +# Or reinstall |
| 252 | +npm install -g @vapi-ai/mcp-server@latest |
| 253 | +``` |
| 254 | + |
| 255 | +### Remove configuration |
| 256 | + |
| 257 | +Remove MCP configuration: |
| 258 | + |
| 259 | +```bash |
| 260 | +# Remove from all IDEs |
| 261 | +vapi mcp remove |
| 262 | + |
| 263 | +# Remove from specific IDE |
| 264 | +vapi mcp remove cursor |
| 265 | +``` |
| 266 | + |
| 267 | +## How MCP tools work |
| 268 | + |
| 269 | +The Vapi MCP server provides these tools to your IDE: |
| 270 | + |
| 271 | +<CardGroup cols={2}> |
| 272 | + <Card title="Search Documentation" icon="magnifying-glass"> |
| 273 | + Semantic search across all Vapi docs |
| 274 | + |
| 275 | + **Example:** "How to handle voicemail detection" |
| 276 | + </Card> |
| 277 | + <Card title="Get Examples" icon="code"> |
| 278 | + Retrieve code samples for any feature |
| 279 | + |
| 280 | + **Example:** "WebSocket connection example" |
| 281 | + </Card> |
| 282 | + <Card title="API Reference" icon="book"> |
| 283 | + Get detailed API endpoint information |
| 284 | + |
| 285 | + **Example:** "POST /assistant parameters" |
| 286 | + </Card> |
| 287 | + <Card title="Implementation Guides" icon="map"> |
| 288 | + Step-by-step guides for complex features |
| 289 | + |
| 290 | + **Example:** "Workflow implementation guide" |
| 291 | + </Card> |
| 292 | +</CardGroup> |
| 293 | + |
| 294 | +## Troubleshooting |
| 295 | + |
| 296 | +<AccordionGroup> |
| 297 | + <Accordion title="MCP not working in IDE"> |
| 298 | + If your IDE isn't using the MCP knowledge: |
| 299 | + |
| 300 | + 1. **Restart your IDE** after configuration |
| 301 | + 2. **Check the logs** in your IDE's output panel |
| 302 | + 3. **Verify npm is accessible** from your IDE |
| 303 | + 4. **Ensure MCP server is installed** globally |
| 304 | + |
| 305 | + ```bash |
| 306 | + # Verify installation |
| 307 | + npm list -g @vapi-ai/mcp-server |
| 308 | + ``` |
| 309 | + </Accordion> |
| 310 | + |
| 311 | + <Accordion title="Permission errors"> |
| 312 | + For permission issues: |
| 313 | + |
| 314 | + ```bash |
| 315 | + # Install with proper permissions |
| 316 | + sudo npm install -g @vapi-ai/mcp-server |
| 317 | + |
| 318 | + # Or use a Node version manager |
| 319 | + nvm use 18 |
| 320 | + npm install -g @vapi-ai/mcp-server |
| 321 | + ``` |
| 322 | + </Accordion> |
| 323 | + |
| 324 | + <Accordion title="Outdated information"> |
| 325 | + If you're getting old API information: |
| 326 | + |
| 327 | + 1. Update the MCP server: |
| 328 | + ```bash |
| 329 | + npm update -g @vapi-ai/mcp-server |
| 330 | + ``` |
| 331 | + |
| 332 | + 2. Clear your IDE's cache |
| 333 | + 3. Restart the IDE |
| 334 | + </Accordion> |
| 335 | + |
| 336 | + <Accordion title="Multiple workspaces"> |
| 337 | + For different projects needing different configs: |
| 338 | + |
| 339 | + - MCP configuration is per-workspace |
| 340 | + - Run `vapi mcp setup` in each project |
| 341 | + - Configuration won't conflict between projects |
| 342 | + </Accordion> |
| 343 | +</AccordionGroup> |
| 344 | + |
| 345 | +## Advanced usage |
| 346 | + |
| 347 | +### Custom MCP configuration |
| 348 | + |
| 349 | +Modify the generated MCP configuration for advanced needs: |
| 350 | + |
| 351 | +```json |
| 352 | +{ |
| 353 | + "servers": { |
| 354 | + "vapi-docs": { |
| 355 | + "command": "npx", |
| 356 | + "args": ["@vapi-ai/mcp-server"], |
| 357 | + "env": { |
| 358 | + "VAPI_MCP_LOG_LEVEL": "debug" |
| 359 | + } |
| 360 | + } |
| 361 | + } |
| 362 | +} |
| 363 | +``` |
| 364 | + |
| 365 | +### Using with teams |
| 366 | + |
| 367 | +Share MCP configuration with your team: |
| 368 | + |
| 369 | +1. **Commit the config files** (`.cursor/mcp.json`, etc.) |
| 370 | +2. **Document the setup** in your README |
| 371 | +3. **Include in onboarding** for new developers |
| 372 | + |
| 373 | +Example README section: |
| 374 | +```markdown |
| 375 | +## Development Setup |
| 376 | + |
| 377 | +This project uses Vapi MCP for enhanced IDE support: |
| 378 | + |
| 379 | +1. Install Vapi CLI: `curl -sSL https://vapi.ai/install.sh | bash` |
| 380 | +2. Set up MCP: `vapi mcp setup` |
| 381 | +3. Restart your IDE |
| 382 | +``` |
| 383 | + |
| 384 | +## Next steps |
| 385 | + |
| 386 | +With MCP configured: |
| 387 | + |
| 388 | +- **[Initialize a project](/cli/init):** Add Vapi to your codebase |
| 389 | +- **[Test webhooks locally](/cli/webhook):** Debug without external tunnels |
| 390 | +- **[Explore API Reference](/api-reference):** See what your IDE now knows |
| 391 | + |
| 392 | +--- |
| 393 | + |
| 394 | +**Pro tip:** After setting up MCP, try asking your IDE to "Create a complete Vapi voice assistant with error handling and logging" - watch it generate production-ready code with all the right patterns! |
0 commit comments