Skip to content

VAP3-932: CLI launch #558

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 8, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
463 changes: 463 additions & 0 deletions fern/cli/authentication.mdx

Large diffs are not rendered by default.

394 changes: 394 additions & 0 deletions fern/cli/mcp-integration.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,394 @@
---
title: MCP integration
description: Turn your IDE into a Vapi expert with Model Context Protocol
slug: cli/mcp
---

## Overview

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.

**In this guide, you'll learn to:**
- Set up MCP in supported IDEs
- Understand what knowledge is provided
- Use your enhanced IDE effectively
- Troubleshoot common issues

## Quick start

Run the setup command to auto-configure all supported IDEs:

```bash
vapi mcp setup
```

Or configure a specific IDE:

```bash
vapi mcp setup cursor # For Cursor
vapi mcp setup windsurf # For Windsurf
vapi mcp setup vscode # For VSCode with Copilot
```

## What is MCP?

Model Context Protocol is a standard that allows AI assistants to access structured knowledge and tools. When you set up MCP for Vapi:

- Your IDE's AI gains access to complete Vapi documentation
- Code suggestions become accurate and up-to-date
- Examples use real, working Vapi patterns
- API hallucinations are eliminated

## Supported IDEs

<CardGroup cols={3}>
<Card title="Cursor" icon="code" href="https://cursor.sh">
AI-first code editor with deep MCP integration

**Setup:** Creates `.cursor/mcp.json`
</Card>
<Card title="Windsurf" icon="wind" href="https://codeium.com/windsurf">
Codeium's AI-powered IDE

**Setup:** Creates `.windsurf/mcp.json`
</Card>
<Card title="VSCode" icon="brands microsoft" href="https://code.visualstudio.com">
With GitHub Copilot extension

**Setup:** Configures Copilot settings
</Card>
</CardGroup>

## How it works

### What gets configured

The MCP setup creates configuration files that connect your IDE to the Vapi MCP server:

<Tabs>
<Tab title="Cursor">
**File:** `.cursor/mcp.json`
```json
{
"servers": {
"vapi-docs": {
"command": "npx",
"args": ["@vapi-ai/mcp-server"]
}
}
}
```
</Tab>
<Tab title="Windsurf">
**File:** `.windsurf/mcp.json`
```json
{
"servers": {
"vapi-docs": {
"command": "npx",
"args": ["@vapi-ai/mcp-server"]
}
}
}
```
</Tab>
<Tab title="VSCode">
**Settings:** Updates workspace settings
```json
{
"github.copilot.advanced": {
"mcp.servers": {
"vapi-docs": {
"command": "npx",
"args": ["@vapi-ai/mcp-server"]
}
}
}
}
```
</Tab>
</Tabs>

### What knowledge is provided

Your IDE gains access to:

- **Complete API Reference** - Every endpoint, parameter, and response
- **Code Examples** - Working samples for all features
- **Integration Guides** - Step-by-step implementation patterns
- **Best Practices** - Recommended approaches and patterns
- **Latest Features** - Always up-to-date with new releases
- **Troubleshooting** - Common issues and solutions

## Using your enhanced IDE

### Example prompts

Once MCP is configured, try these prompts in your IDE:

<AccordionGroup>
<Accordion title="Creating assistants">
**Prompt:** "How do I create a voice assistant with Vapi?"

Your IDE will provide accurate code like:
```typescript
import { VapiClient } from "@vapi-ai/server-sdk";

const client = new VapiClient({ token: process.env.VAPI_API_KEY });

const assistant = await client.assistants.create({
name: "Customer Support",
model: {
provider: "openai",
model: "gpt-4",
systemPrompt: "You are a helpful customer support agent..."
},
voice: {
provider: "11labs",
voiceId: "rachel"
}
});
```
</Accordion>

<Accordion title="Webhook handling">
**Prompt:** "Show me how to handle Vapi webhooks"

Get complete webhook examples:
```typescript
app.post('/webhook', async (req, res) => {
const { type, call, assistant } = req.body;

switch (type) {
case 'call-started':
console.log(`Call ${call.id} started`);
break;
case 'speech-update':
console.log(`User said: ${req.body.transcript}`);
break;
case 'function-call':
// Handle tool calls
const { functionName, parameters } = req.body.functionCall;
const result = await handleFunction(functionName, parameters);
res.json({ result });
return;
}

res.status(200).send();
});
```
</Accordion>

<Accordion title="Advanced features">
**Prompt:** "How do I set up call recording with custom storage?"

Get detailed implementation:
```typescript
const assistant = await client.assistants.create({
name: "Recorded Assistant",
recordingEnabled: true,
artifactPlan: {
recordingEnabled: true,
videoRecordingEnabled: false,
recordingPath: "s3://my-bucket/recordings/{call_id}"
},
credentialIds: ["aws-s3-credential-id"]
});
```
</Accordion>
</AccordionGroup>

### Best practices

<Steps>
<Step title="Be specific">
Ask detailed questions about Vapi features:
- ✅ "How do I transfer calls to a human agent in Vapi?"
- ❌ "How do I transfer calls?"
</Step>

<Step title="Request examples">
Ask for working code samples:
- "Show me a complete example of..."
- "Generate a working implementation of..."
</Step>

<Step title="Check versions">
Specify SDK versions when needed:
- "Using @vapi-ai/web v2.0, how do I..."
- "What's the latest way to..."
</Step>
</Steps>

## Configuration options

### Check status

View current MCP configuration:

```bash
vapi mcp status
```

Output:
```
MCP Configuration Status:
✓ Cursor: Configured (.cursor/mcp.json)
✗ Windsurf: Not configured
✓ VSCode: Configured (workspace settings)

Vapi MCP Server: v1.2.3 (latest)
```

### Update server

Keep the MCP server updated:

```bash
# Update to latest version
npm update -g @vapi-ai/mcp-server

# Or reinstall
npm install -g @vapi-ai/mcp-server@latest
```

### Remove configuration

Remove MCP configuration:

```bash
# Remove from all IDEs
vapi mcp remove

# Remove from specific IDE
vapi mcp remove cursor
```

## How MCP tools work

The Vapi MCP server provides these tools to your IDE:

<CardGroup cols={2}>
<Card title="Search Documentation" icon="magnifying-glass">
Semantic search across all Vapi docs

**Example:** "How to handle voicemail detection"
</Card>
<Card title="Get Examples" icon="code">
Retrieve code samples for any feature

**Example:** "WebSocket connection example"
</Card>
<Card title="API Reference" icon="book">
Get detailed API endpoint information

**Example:** "POST /assistant parameters"
</Card>
<Card title="Implementation Guides" icon="map">
Step-by-step guides for complex features

**Example:** "Workflow implementation guide"
</Card>
</CardGroup>

## Troubleshooting

<AccordionGroup>
<Accordion title="MCP not working in IDE">
If your IDE isn't using the MCP knowledge:

1. **Restart your IDE** after configuration
2. **Check the logs** in your IDE's output panel
3. **Verify npm is accessible** from your IDE
4. **Ensure MCP server is installed** globally

```bash
# Verify installation
npm list -g @vapi-ai/mcp-server
```
</Accordion>

<Accordion title="Permission errors">
For permission issues:

```bash
# Install with proper permissions
sudo npm install -g @vapi-ai/mcp-server

# Or use a Node version manager
nvm use 18
npm install -g @vapi-ai/mcp-server
```
</Accordion>

<Accordion title="Outdated information">
If you're getting old API information:

1. Update the MCP server:
```bash
npm update -g @vapi-ai/mcp-server
```

2. Clear your IDE's cache
3. Restart the IDE
</Accordion>

<Accordion title="Multiple workspaces">
For different projects needing different configs:

- MCP configuration is per-workspace
- Run `vapi mcp setup` in each project
- Configuration won't conflict between projects
</Accordion>
</AccordionGroup>

## Advanced usage

### Custom MCP configuration

Modify the generated MCP configuration for advanced needs:

```json
{
"servers": {
"vapi-docs": {
"command": "npx",
"args": ["@vapi-ai/mcp-server"],
"env": {
"VAPI_MCP_LOG_LEVEL": "debug"
}
}
}
}
```

### Using with teams

Share MCP configuration with your team:

1. **Commit the config files** (`.cursor/mcp.json`, etc.)
2. **Document the setup** in your README
3. **Include in onboarding** for new developers

Example README section:
```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
```

## Next steps

With MCP configured:

- **[Initialize a project](/cli/init):** Add Vapi to your codebase
- **[Test webhooks locally](/cli/webhook):** Debug without external tunnels
- **[Explore API Reference](/api-reference):** See what your IDE now knows

---

**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!
Loading
Loading