MCP in Vibe Coding Workflows
Using MCP servers inside Claude Code and Cursor — connecting pre-built servers, enabling per-session tools, and what effective AI-assisted development looks like.
Vibe coding isn't about giving up on understanding your code. It's a mode of development where you work with the LLM fluidly — describing intent, reviewing output, correcting course — without hand-writing every line.
MCP makes this more powerful by giving the LLM tools that let it interact with your actual environment: reading files, querying databases, fetching APIs, running commands. Instead of the model guessing at your file structure, it can see it. That shift — from the model inferring to the model knowing — is what makes vibe coding feel genuinely useful rather than just clever.
Adding MCP Servers to Claude Code
Claude Code (the CLI) supports MCP servers via a simple add command:
# Add a server to your user config
claude mcp add my-server -e API_KEY=abc123 -- node /path/to/server/dist/index.js
# Add to project config (checked into .claude/)
claude mcp add my-server --scope project -- node /path/to/dist/index.js
# List connected servers
claude mcp list
# Remove a server
claude mcp remove my-serverProject-scoped servers are stored in .claude/mcp.json in your repo root. This lets you ship an MCP server alongside a project and have all collaborators pick it up automatically.
Adding MCP Servers to Cursor
In Cursor, MCP servers are configured in Settings → MCP. Each server is a JSON entry with the same shape as Claude Desktop's config:
{
"my-server": {
"command": "node",
"args": ["/path/to/dist/index.js"],
"env": { "API_KEY": "abc123" }
}
}Cursor's Agent mode picks up the tools automatically. You can enable/disable individual tools per session from the chat sidebar.
Pre-Built MCP Servers
You don't have to write every server from scratch. A growing ecosystem of pre-built MCP servers covers common integrations:
- Filesystem: read/write local files with path constraints
- GitHub: create issues, PRs, read repos
- Fetch: make HTTP requests from within the LLM context
- Playwright: control a browser programmatically
- PostgreSQL/SQLite: query databases
Install them from npm:
npm install -g @modelcontextprotocol/server-filesystem
npm install -g @modelcontextprotocol/server-githubThen configure them the same way as any other MCP server.
Effective Patterns
Here's what I've found actually works in practice:
Attach the schema resource before asking database questions. The LLM writes much better queries when it can see the actual tables and columns. Don't rely on it guessing.
Enable only the tools you need for the current task. Noise in the tool list degrades tool selection. Working on a bug in the auth module? Enable the filesystem and GitHub tools, disable everything else.
Review before accepting. AI-generated code for UI components and utility functions is usually fine with a quick scan. Auth logic, billing code, data mutations — read them properly. The model can be confidently wrong.
Iterate in small steps. The best vibe coding sessions aren't "build me an entire feature." They're a series of small, verifiable steps: "generate the schema," "write the migration," "add the API endpoint," each reviewed before moving to the next.
Claude Code's Built-In Toolset
Claude Code ships with its own built-in tools (separate from MCP):
- Read/Write files — with your permission
- Run bash commands — with your permission, inside a sandboxed session
- Search the web — via web search integration
- Edit code — with diff preview before applying
MCP servers layer on top of these. You get Claude Code's built-ins plus whatever capabilities your MCP servers expose.
Further Reading
Practice what you just read.
Enjoyed this? Get more like it.
Deep dives on system design, React, web development, and personal finance — straight to your inbox. Free, always.