MCP Servers

What is MCP?

MCP stands for Model Context Protocol. It’s an open standard that lets AI tools like Claude connect to external systems — your filesystem, Figma, GitHub, databases, and more.

Without MCP, Claude can only see what you paste into the chat. With MCP, Claude can directly read your project files, inspect your Figma designs, search the web, and take actions on your behalf.

Think of MCP servers as plugins that give Claude new abilities. Each MCP server provides a set of “tools” that Claude can call when it needs to interact with the outside world.

How MCP Works

MCP works in 3 steps:

• Step 1: You install an MCP server — This is a small program that runs locally on your machine. It knows how to talk to a specific service (e.g., your filesystem, Figma, GitHub).
• Step 2: Claude discovers the tools — When Claude starts, it reads your MCP config and connects to each server. It learns what tools are available (e.g., “read_file”, “list_directory”, “get_figma_data”).
• Step 3: Claude uses the tools as needed — When you ask Claude to do something that requires external access, it calls the appropriate MCP tool, gets the result, and uses it to answer your question or complete your task.

Note: MCP servers run locally on your computer. Your data never leaves your machine unless you explicitly configure a server that connects to a remote service. The filesystem MCP, for example, only reads and writes files on your local disk.

Setting Up the Filesystem MCP

The filesystem MCP is the most important one. It lets Claude read, write, and navigate your project files directly.

Step 1: Find Your Config File

Claude Code stores its MCP configuration in a JSON file. The location depends on your operating system:

Step 2: Edit the Config

Open the config file and add the filesystem server:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/yourname/projects"
      ]
    }
  }
}

Replace /Users/yourname/projects with the actual path to your projects folder.

Step 3: Restart Claude

After saving the config file, fully quit and restart Claude. The MCP server will start automatically when Claude launches.

Warning: Give access only to your projects folder — not your entire home directory or system root. The narrower the access, the safer your setup. Never point an MCP server at / or ~.

Verifying the Connection

Once Claude restarts, you should see a small tools icon (hammer or plug icon) in the Claude interface. Click it to see the list of available MCP tools.

You can also test it by asking Claude:

"List the files in my projects folder"

If Claude can list your files, the filesystem MCP is working correctly.

What Claude Can Do With Filesystem MCP

The Figma MCP

The Figma MCP lets Claude read your Figma designs directly. It can extract colors, spacing, typography, component structures, and more — then use that information to generate accurate code.

Setting Up the Figma MCP

Add the Figma server to your config file alongside the filesystem server:

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/yourname/projects"
      ]
    },
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic/figma-mcp-server"
      ],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-key-here"
      }
    }
  }
}

Getting Your Figma API Key

• Open Figma and go to your account settings
• Scroll down to Personal Access Tokens
• Click Generate new token
• Give it a descriptive name (e.g., “Claude MCP”)
• Copy the token and paste it into your config file as the FIGMA_API_KEY value

Other Useful MCP Servers

Prompting Strategies With MCP

Once MCP is set up, you can reference files and projects directly in your prompts. This dramatically improves the quality of Claude’s output.

Reference Files Directly

"Read my tailwind.config.ts and create a Button component that uses my existing design tokens"

"Look at my existing Card component and create a similar ProductCard with the same patterns"

Explore the Codebase

"Explore the src/components folder and give me a summary of all existing components"

"Find all places where we use the color #E3002B and list them"

Batch Operations

"Read all the components in src/components/ui and add consistent aria-labels to any that are missing them"

"Look at my project structure and create an index.ts barrel file that exports all components"

Troubleshooting