MCP

Overview

Model Context Protocol servers connect Claude Code to external services — design tools, databases, deployment platforms, monitoring, and more. Each MCP server exposes tools and resources that Claude can call directly. We run 18 servers covering UI (shadcn, figma, tailwind), testing (browser, browser-headed), DevOps (vercel, github, neon), and monitoring (sentry, posthog).

Current Progress

• 18 MCP servers configured across 5 categories
• Core servers stable: github, vercel, neon, browser, shadcn
• Figma MCP working for design-to-code workflows
• Credentials injected via Keychain — no .env secrets

Areas of Improvement

• MCP protocol evolving fast — check for breaking changes monthly
• Some servers (sentry, posthog) underused — need team training
• Stripe MCP needs testing with Saudi payment methods
• No MCP for email (Resend) or SMS (Twilio) yet
• Server health monitoring not automated

References

Setup

1. Configure MCP servers in .claude/settings.json under mcpServers
2. Each server needs: command, args, and optional env vars
3. Use npx for Node-based servers, uvx for Python-based
4. Test with MCP Inspector before adding to settings
5. Per-project servers in .claude/settings.json, global in ~/.claude/settings.json

Usage

• shadcn — Install UI components, search registry
• browser — Headless Chromium for testing and screenshots
• github — PR creation, issue management, code review
• vercel — Deploy, check logs, manage domains
• neon — Database branching, migrations, SQL execution
• figma — Design-to-code, screenshot comparison
• stripe — Payment setup, webhook management

Config Files