Claude Code MCP完全ガイド｜GitHub・Figma・DBを接続してAIの能力を拡張する方法

# MCPサーバーの追加（stdio、ローカル）
claude mcp add サーバー名 -- 起動コマンド

# MCPサーバーの追加（HTTP、リモート）
claude mcp add --transport http サーバー名 https://サーバーURL

# ユーザースコープで追加（全プロジェクト共通）
claude mcp add --scope user --transport http サーバー名 https://サーバーURL

# 登録済みサーバーの一覧表示
claude mcp list

# 特定サーバーの詳細確認
claude mcp get サーバー名

# MCPサーバーの削除
claude mcp remove サーバー名

# セッション内でMCP状態を確認
# Claude Code起動後に:
# > /mcp

# 1. GitHub Personal Access Token を取得
# GitHub → Settings → Developer settings → Personal access tokens → Generate new token
# 必要なスコープ: repo, read:org, read:user

# 2. 環境変数に設定
export GITHUB_TOKEN="ghp_xxxxxxxxxxxxxxxxxxxx"

# 3. Claude Code に追加（stdio方式）
claude mcp add github -- npx -y @modelcontextprotocol/server-github

# または settings.json に直接書く場合:
# ~/.claude/settings.json に追記（userスコープ）

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    }
  }
}

# Issueを読んで実装
> GitHub の Issue #123 の内容を確認して実装してください

# PRレビューコメントを確認して修正
> PR #456 のレビューコメントを全部確認して指摘された箇所を修正してください

# 新しいIssueを作成
> 今実装した認証機能に関するテスト不足のIssueを作成してください。
> タイトル・説明・ラベルを適切に設定してください

# リポジトリを横断検索
> @myorg/backend-api リポジトリで "handlePayment" 関数の実装を探してください

# プロジェクトの外にある共有ドキュメントにアクセス
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /path/to/docs

# 複数パスを許可する場合
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem   /path/to/project   /path/to/shared-docs   /path/to/config

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

# 1. Figma Personal Access Token を取得
# Figma → アカウント設定 → Personal access tokens

# 2. 環境変数に設定
export FIGMA_TOKEN="figd_xxxxxxxxxxxxxxxxxxxx"

# 3. Claude Code に追加
claude mcp add --transport http figma https://mcp.figma.com/sse
# または
claude mcp add figma -- npx -y figma-mcp

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-mcp"],
      "env": {
        "FIGMA_TOKEN": "${FIGMA_TOKEN}"
      }
    }
  }
}

# FigmaのURLを渡してコンポーネントを生成
> https://www.figma.com/design/xxxxxx/MyApp?node-id=123:456
> このデザインを見てReactコンポーネントを生成してください。
> 既存の src/components/ のスタイルに合わせてください。

# デザイントークンをコードに反映
> Figmaのデザインシステム（Frame ID: 789:012）から
> カラー・タイポグラフィ・スペーシングトークンを抽出して
> tailwind.config.ts に反映してください

# 1. 接続文字列を環境変数に設定
export DATABASE_URL="postgresql://user:password@localhost:5432/mydb"

# 2. Claude Code に追加
claude mcp add postgres -- npx -y @modelcontextprotocol/server-postgres $DATABASE_URL

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-postgres",
        "${DATABASE_URL}"
      ]
    }
  }
}

# Supabase アクセストークンを取得
# Supabase Dashboard → Account → Access Tokens

export SUPABASE_ACCESS_TOKEN="sbp_xxxxxxxxxxxxxxxxxxxx"

# Claude Code に追加
claude mcp add --transport http supabase   https://mcp.supabase.com   --header "Authorization: Bearer ${SUPABASE_ACCESS_TOKEN}"

# スキーマを確認してクエリを生成
> users, orders, order_items テーブルのスキーマを確認して、
> 先月の顧客別購入金額ランキング上位10件を取得するクエリを書いてください

# マイグレーションを生成
> 現在のスキーマを確認して、products テーブルに
> stock_quantity（整数・デフォルト0）カラムを追加するマイグレーションを作成してください

# パフォーマンス分析
> slow query log を確認して、実行時間が1秒を超えるクエリの
> インデックス最適化案を提案してください

# 1. Slack Bot Token を取得（OAuth & Permissions → Bot Token Scopes）
# 必要なスコープ: chat:write, channels:read, channels:history

export SLACK_BOT_TOKEN="xoxb-xxxxxxxxxxxx"
export SLACK_TEAM_ID="T0XXXXXXXXX"

# 2. Claude Code に追加
claude mcp add slack -- npx -y @modelcontextprotocol/server-slack

{
  "mcpServers": {
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "${SLACK_BOT_TOKEN}",
        "SLACK_TEAM_ID": "${SLACK_TEAM_ID}"
      }
    }
  }
}

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_TOKEN": "${GITHUB_TOKEN}"
      }
    },
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres", "${DATABASE_URL}"]
    },
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "${SLACK_BOT_TOKEN}",
        "SLACK_TEAM_ID": "${SLACK_TEAM_ID}"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "${HOME}/projects",
        "${HOME}/docs"
      ]
    }
  }
}

> GitHub Issue #234「ユーザー退会時に関連データを削除する」を実装してください。
> DBのスキーマを確認してどのテーブルを更新する必要があるか調べてから実装し、
> 実装完了後に #dev-backend チャンネルに完了報告を投稿してください。

{
  "permissions": {
    "allow": [
      "mcp__github__list_issues",
      "mcp__github__get_issue",
      "mcp__github__list_pull_requests",
      "mcp__github__get_pull_request",
      "mcp__postgres__query",
      "mcp__slack__post_message",
      "mcp__slack__list_channels"
    ],
    "deny": [
      "mcp__github__delete_*",
      "mcp__github__merge_pull_request",
      "mcp__postgres__delete",
      "mcp__postgres__drop_table"
    ]
  }
}

# Claude Codeセッション内で実行
> /mcp

# 出力例:
# ● github: connected (12 tools available)
#   Tools: list_issues, get_issue, create_issue, ...
# ● postgres: connected (4 tools available)
#   Tools: query, list_tables, describe_table, ...
# ● figma: error (connection timeout)
#   Last error: Connection refused at https://mcp.figma.com

# エラーがある場合はサーバー名が赤く表示される

# settings.json を変更した場合は Claude Code を再起動
# または既存セッションで:
> /mcp reset

# 登録済みサーバーを確認
claude mcp list