Personal AI MCP Tools I Use and How to Install Them

MCP (Model Context Protocol) is a protocol that allows AI to connect to external tools and data sources. In practice, MCP is an indispensable capability extension. Here I’ve summarized the MCP tools I personally use, and provided examples of how to install and configure them in Claude Code.

Installation Methods Overview

There are two main ways to install MCP in Claude Code:

Method 1: claude mcp add Command (Recommended)

# Basic format
claude mcp add <server-name> -- <command> <args...>

# Common parameters
# -s user    Global installation (available in all projects)
# -s project Project-level installation (current project only)
# -e KEY=VAL Set environment variables

Method 2: Manual Configuration File Editing

Project-level configuration is written in .mcp.json in the project root directory, and global configuration is written in the mcpServers field in ~/.claude/settings.json.

// .mcp.json example
{
  "mcpServers": {
    "server-name": {
      "command": "npx",
      "args": ["-y", "package-name"],
      "env": {
        "API_KEY": "your-key"
      }
    }
  }
}

Context7

A documentation search tool that retrieves the latest API documentation and code examples directly from official documentation libraries, avoiding outdated training data.

Installation:

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

Use Cases: When looking up the latest documentation for any library like React, Next.js, Prisma, etc., let AI query the actual documentation instead of relying on memory.

Exa

An alternative to AI’s built-in WebFetch/WebSearch with advantages of high search quality, fast speed, and semantic search support.

Installation:

# First, register at https://exa.ai to get your API Key
claude mcp add exa -e EXA_API_KEY=your-api-key -- npx -y exa-mcp-server

Use Cases: Technical research, finding latest articles and blogs, searching domain-specific content.

Figma

Figma + Claude Code enables quick conversion of designs to code, allowing AI to directly read Figma design files and generate corresponding code with high efficiency.

Installation:

# First, get your Personal Access Token from Figma
# Figma → Settings → Personal access tokens → Generate
claude mcp add figma \
  -e FIGMA_PERSONAL_ACCESS_TOKEN=your-token \
  -- npx -y figma-developer-mcp --stdio

Use Cases: Convert Figma design files directly to frontend code, with AI reading layout, color, font, and other information from design files.

TAPD

An MCP plugin for the TAPD project management tool that allows AI to read project information such as requirements, bugs, and iterations, enabling better understanding of business context.

Installation:

# First, get your API credentials from TAPD
# TAPD → Company Management → API Applications
claude mcp add tapd \
  -e TAPD_USERNAME=your-api-id \
  -e TAPD_PASSWORD=your-api-key \
  -- npx -y tapd-mcp

Use Cases: Before development, let AI first read the requirement descriptions and acceptance criteria on TAPD for more complete business understanding during coding.

Claude in Chrome

A browser automation plugin that allows Claude Code to directly control Chrome browser for web interactions, debugging, screenshots, and other operations.

Installation:

1. Search and install the Claude in Chrome extension from the Chrome Web Store
2. After installation, the extension will automatically start the local MCP service. Add it in Claude Code:

claude mcp add claude-in-chrome -- npx -y @anthropic/claude-in-chrome-mcp

Use Cases: Combined web debugging during coding, writing web scrapers/automation scripts, testing frontend page interactions.

Chrome DevTools

Direct browser interaction through Chrome DevTools Protocol, enabling JS execution, network request capture, performance analysis, and more.

Installation:

claude mcp add chrome-devtools -- npx -y @anthropic/chrome-devtools-mcp

Use Cases: Debug frontend performance issues, analyze network requests, execute page scripts, compare screenshots.

Managing Installed MCPs

# View all installed MCPs
claude mcp list

# Remove a specific MCP
claude mcp remove <server-name>

# View detailed configuration of a specific MCP
claude mcp get <server-name>

Tips

• API Key Security: Don’t commit API Keys directly in the project’s .mcp.json to Git. Instead, use -s user to install to global configuration
• Install as Needed: No need to install all MCPs at once. Add them based on your actual work scenarios
• Project-level vs Global: General-purpose tools (Context7, Exa, TAPD) are recommended for global installation, while project-specific tools are recommended for project-level installation