Skip to content

Commit e67b48d

Browse files
authored
VAP3-932: CLI launch (#558)
* feat: cli launch * fix: cli URLs
1 parent 2cb8237 commit e67b48d

17 files changed

+2086
-0
lines changed

fern/cli/authentication.mdx

Lines changed: 463 additions & 0 deletions
Large diffs are not rendered by default.

fern/cli/mcp-integration.mdx

Lines changed: 394 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,394 @@
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

Comments
 (0)