What is "MCP in Vibe Coding Workflows" about?

Install GitHub, Neon, Playwright, and Context7 MCP servers into Claude Code. What effective AI-assisted development looks like in practice -- and what human oversight still owns.

What topics does "MCP in Vibe Coding Workflows" cover?

This article covers: MCP claude code, vibe coding MCP, github MCP server, playwright MCP, context7 MCP, neon MCP.

MCP in Vibe Coding Workflows

Vibe coding is just adding powerful MCP servers to a coding agent and saying: go.

What separates good vibe coding from chaos is which servers you install, how you guide the agent, and what you still review yourself.

The Coding Agents Worth Knowing

Brian's honest take after trying all of them:

Tool	Notes
Claude Code	CLI tool, best for complex multi-step tasks, uses Opus by default
Cursor	Best IDE experience, widely used in teams
VS Code Agent Mode	Free, works with Copilot, solid choice
Windsurf	Strong alternative to Cursor
Crush	New, terminal-first, works with multiple models
Gemini CLI	Like Claude Code but powered by Gemini

Brian uses Claude Code for this section because it gave him the best results overall. But all of these support MCP servers -- the skills transfer.

â„¹ï¸ Brian's homework assignment: Try all of them. Build something small and dumb -- a todo app, a recipe tracker -- in each one. See which fits your brain. You'll know within an hour which one you like.

Installing Claude Code

Bash

# Install globally via npm
npm install -g @anthropic-ai/claude-code

# Verify
claude --version

# List installed MCP servers
claude mcp list

# Add an MCP server
claude mcp add [options]

By default, Claude Code uses Opus 4 (the most capable model). If you're on a Plus plan, it uses Sonnet instead.

âš ï¸ Token costs. Claude Code uses a lot of tokens -- it reads files, makes plans, iterates. On Opus, this adds up fast. Use it when you want quality. Know the cost before you start a large session.

The MCP Power Stack

These four servers transform what Claude Code can do:

Diagram

Why These Four?

GitHub -- extends Claude Code's memory into your repo. Create issues, close them, open PRs, write comments. The entire dev lifecycle.
Neon -- database integration. Ask Claude to query, migrate, or inspect your schema without ever writing raw SQL yourself.
Playwright -- automated browser testing. Claude Code can open your app, click around, take screenshots, and verify behavior.
Context7 -- combats training data staleness. Libraries like Neon Auth are too new for Claude's training data. Context7 fetches current docs on demand.

Installing Each Server

GitHub MCP

Bash

claude mcp add \
  --transport http \
  github \
  https://api.githubcopilot.com/mcp/ \
  --header "Authorization: Bearer YOUR_GITHUB_PAT"

Getting a GitHub PAT (fine-grained token):

GitHub → Settings → Developer Settings → Fine-grained Tokens
Repository access: All repositories
Required permissions: Contents (Read/Write), Issues (Read/Write), Pull Requests (Read/Write)

Diagram

Neon MCP

Bash

claude mcp add \
  --transport http \
  neon \
  https://mcp.neon.tech/sse \
  --header "Authorization: Bearer YOUR_NEON_API_TOKEN"

Get your Neon API token: neon.tech → Account Settings → Personal API Token → Create.

Playwright MCP

Bash

# No auth needed -- runs locally
claude mcp add playwright npx @playwright/mcp@latest

This spawns a browser process locally. Claude Code can navigate pages, take screenshots, fill forms, and run tests.

Context7 MCP

Bash

claude mcp add context7 npx -y @upstash/context7-mcp@latest

No auth needed. Context7 is from Upstash (Redis-as-a-service) -- they maintain a constantly-updated RAG database of popular library documentation.

Real Workflow: Building an App from a Prompt

Brian wrote a prompt file and ran Claude Code on it:

Bash

# prompt.md contains the full app spec
claude "$(cat prompt.md)"

Claude Code then:

Read the prompt
Made a plan
Scaffolded the entire app (Next.js + TypeScript + Tailwind + Drizzle)
Set up Neon Auth via Neon MCP
Created the database schema
Asked yes/no questions along the way
Delivered a working app

Time for Brian to write code: ~0 minutes. Time reviewing and approving prompts: ~30 minutes.

â„¹ï¸ The key move: Brian put the entire spec in a file, ran claude "$(cat prompt.md)", and went back to his conversation while Claude Code worked. Then he came back to review. This is the right rhythm -- not watching it work, but reviewing what it built.

Using Playwright for Testing

Once the app was built:

Bash

# In Claude Code:
claude "Use Playwright to make sure the login works"

Claude Code:

Opens Chrome via Playwright MCP
Navigates to the login page
Fills in test credentials
Takes a screenshot
Evaluates whether it worked
Reports back

Diagram

Using GitHub MCP for Issues and PRs

Bash

# File an issue:
claude "File a GitHub issue for dark mode.
Wax poetic about the dangers of white light in your eyes.
Make sure everyone knows dark mode is critical to business success."

Claude Code called the GitHub MCP, created the issue with a full manifesto, and returned the issue URL.

Bash

# Build the feature and open a PR:
claude "Implement the dark mode feature from issue #42 and open a pull request"

Claude Code:

Read issue #42 from GitHub
Implemented dark mode (CSS variables, toggle, etc.)
Committed the changes
Pushed the branch
Opened a pull request linking to the issue

The PR even included screenshots.

Context7: Fixing Stale Training Data

New libraries are the hardest for LLMs. They weren't in training data, so the LLM guesses -- and guesses wrong.

Brian uses this in his CLAUDE.md (project-specific instructions):

MARKDOWN

## Rules

- Please use Context7 when working with Neon Auth to make sure you have the latest docs
- Please use Context7 liberally to make sure you have the latest information
- Do not write migrations yourself -- always use Drizzle
- Do not use raw SQL unless there is no Drizzle alternative

These rules live in a CLAUDE.md file in the repo root. Claude Code reads it at startup and follows the rules for the entire session.

The CLAUDE.md File

This is your project-level instructions file for Claude Code:

MARKDOWN

# Project Instructions

## Stack
- Next.js 15 (App Router)
- TypeScript
- Drizzle ORM (Postgres/Neon)
- Tailwind CSS

## Rules
- Use Context7 for any library documentation lookups
- Always use Drizzle for database operations -- never raw SQL
- Do not modify migration files directly -- generate migrations with Drizzle
- Use server actions for data mutations
- Before opening a PR, run the test suite and fix failures

## Style
- Use named exports, not default exports
- Prefer composition over inheritance
- Co-locate tests with source files

These instructions reduce the need to repeat yourself in every prompt.

Lab -- Design Your Own Power Stack

JavaScript Â· Live Editor

Loading editor...

âœ… Brian's personal stack: He built a personal MCP server that reads his email, calendar, local file system, and Discord messages -- all in one. "It's like having a secretary who knows everything about what I'm doing."

What Human Review Still Owns

Vibe coding doesn't remove your responsibility. It changes what you spend time on.

Diagram

Brian on PR review:

"I would have an LLM read the PR and say 'scrutinize this and find problem areas' -- but I would also read it myself. Every PR into your codebase should be human-reviewed by at least two people."

Key Takeaways

Four essential servers: GitHub (memory), Neon (database), Playwright (testing), Context7 (fresh docs)
CLAUDE.md is your project-level instruction file -- put rules, stack info, and constraints there
Context7 fixes stale training data -- essential for new libraries
Let Claude work in the background -- write a prompt file, run it, come back to review
Human review is non-negotiable -- vibe coding changes what you review, not whether you review
Token costs are real -- Opus on Claude Code adds up; use it intentionally

What's Next

The most important topic we've saved for last: MCP security. Not just "be careful" -- but the specific attack vectors, why agents can be weaponized without malicious intent, and the minimum security hygiene for any MCP deployment.