MCPs with love

Here is an exhautive list of MCP severs that i have found to be useful in my daily workflow.

Playwright MCP

• A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright.
• Enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.
• Playwright MCP by Microsoft -> https://github.com/microsoft/playwright-mcp

Context7 MCP

• Context7 MCP pulls up-to-date, version-specific documentation and code examples straight from the source and places them directly into your prompt.
• No tab-switching, no hallucinated APIs that don't exist, no outdated code generation.
• Context7 MCP by Upstash -> https://github.com/upstash/context7-mcp

Prompt examples to use the Context7 MCP Server

• "bootstrap a new tanstack start project - use context7 mcp server"
• "setup authentication with supabase - use context7 mcp server"

Get a free API key at context7.com/dashboard for higher rate limits.

Chrome DevTools MCP Server

• Lets your coding agent control and inspect a live Chrome browser.
• Gives coding agents access to Chrome DevTools for
  • Reliable automation
  • In-depth debugging
  • Performance analysis
• Chrome DevTools MCP by ChromeDevTools -> https://github.com/ChromeDevTools/chrome-devtools-mcp

Prompt examples to use the Chrome DevTools MCP Server

• "fix the console errors being reported on the landing page - use chrome devtools mcp server"
• "analyze performance of my website - use chrome devtools mcp server"

NextJs MCP Server

• Next.js MCP server that enables coding agents to access your NextJS 16+ application's internals in real-time.
• Next.js 16+ includes a built-in MCP endpoint at /_next/mcp that runs within your development server.
• NextJs MCP Server by Vercel -> https://github.com/vercel/next-devtools-mcp

Prompt examples to use the NextJs MCP Server

• "Migrate my nextjs project to the latest version of Next.js - use nextjs mcp server"
• "Fix the build error in my nextjs project - use nextjs mcp server"

Shadcn MCP Server

• Use the shadcn MCP server to browse, search, and install components from registries.
• You can browse available components, search for specific ones, and install them directly into your project using natural language.
• Shadcn MCP Server by Shadcn -> https://ui.shadcn.com/docs/mcp

Prompt examples to use the Shadcn MCP Server

• "Build a landing page using components from the acme registry - use shadcn mcp server"
• "Find me a login form from the shadcn registry - use shadcn mcp server"

Registries are configured in your project's components.json file.

Grep MCP severs

• Grep MCP server based on Grep App -> https://grep.app/
• The Grep MCP server lets you search code snippets from all the public GitHub repositories grepped by grep.
• AI agents use it to send queries and get back code snippets that match patterns or regular expressions.
• Grep a million GitHub repositories via MCP -> https://vercel.com/blog/grep-a-million-github-repositories-via-mcp

Prompt examples to use the Grep MCP Server

• "What's the right way for this MCP tool to return an error message to the client? - use grep mcp server"

Figma MCP Server

• The Figma MCP Server brings Figma directly into your workflow by providing important design information and context to AI agents generating code from Figma design files.
• Figma MCP Server by Figma ->https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/
• Figma MCP Catalog -> https://www.figma.com/mcp-catalog/

Prompt examples to use the Figma MCP Server

• "What's the color of the primary button? - use figma mcp server"

MCP Directories

• Official MCP Registry -> https://registry.modelcontextprotocol.io/
• Everything MCP -> https://www.pulsemcp.com/servers