2025年6月から、Claude.ai の Pro プランでも待望の **Integrations** 機能
が利用できるようになりました。
この機能により、ブラウザ版 Claude でも MCP（Model Context Protocol）
サーバーに接続できるようになり、各種外部サービスとの連携が可能になります。

本記事では、Integrations 機能の概要と、実際にローカル環境で MCP サーバーを
構築する手順について詳しく解説します。

## Claude Integrations とは

### 背景

これまで Claude で MCP サーバーと連携するには、デスクトップ版の Claude for Desktop 
を使用する必要がありました。しかし、Integrations 機能の実装により、
**ブラウザ版 Claude でも MCP サーバーへの接続が可能**になりました。

### 対応サービス

記事執筆時点で以下のサービスとの連携がサポートされています：

- **プロジェクト管理系**：Jira、Asana、Linear
- **ドキュメント系**：Confluence
- **自動化・連携系**：Zapier
- **開発・インフラ系**：Cloudflare、GitHub、Sentry
- **決済・金融系**：PayPal、Square、Plaid
- **カスタマーサポート系**：Intercom

また、開発者が独自の MCP サーバーを作成して Claude と連携することも可能です。

### Advanced Research の強化

Integrations と組み合わせることで、既存の Research 機能も強化されています。
**Advanced Research** では最大45分かけて包括的なレポートを作成でき、
連携したサービス上の情報も検索対象に含まれます。

## MCP（Model Context Protocol）とは

### MCPの基本概念

**MCP は AI がアクセスする対象との間の USB のようなインターフェース**です。
AI アプリケーションと各種システムの間でデータをやり取りするための共通プロトコルとして、
Anthropic が 2024年11月に発表しました。

### MCP の構成要素

#### 1. MCP ホスト
AI 機能を内包したアプリやツール（Claude for Desktop、VS Code、Cursor など）

#### 2. MCP クライアント
MCP ホスト内に存在し、MCP サーバーに接続するコンポーネント

#### 3. MCP サーバー
AI に接続されるために用意する軽量なプログラム。以下の機能を提供します：

- **Tools**：AI モデルが呼び出せる関数（データベースクエリ、API リクエスト、ファイル操作など）
- **Resources**：AI がアクセスできるデータ（ファイル内容、データベースデータなど）
- **Prompts**：事前に用意されたテンプレート化されたメッセージ

## ローカル MCP サーバーの構築手順

実際にローカル環境で MCP サーバーを構築してみましょう。
今回は**ファイルシステムアクセス用の MCP サーバー**を例に説明します。

### 前提条件

- macOS 環境
- Node.js がインストール済み

### 手順1：Claude for Desktop のインストール

```bash
# Claude.dmg をダウンロードして Applications にインストール
# https://claude.ai/download からダウンロード
```

### 手順2：設定ファイルの作成

初回のみ、空の設定ファイルを作成します：

1. Claude for Desktop を開く
2. Claude メニュー → 設定 → 開発者 → 構成を編集

### 手順3：claude_desktop_config.json の編集

```json
{
　　"mcpServers": {
　　　　"filesystem": {
　　　　　　"command": "npx",
　　　　　　"args": [
　　　　　　　　"-y",
　　　　　　　　"@modelcontextprotocol/server-filesystem",
　　　　　　　　"/Users/[ユーザー名]/Desktop/MCP",
　　　　　　　　"/Users/[ユーザー名]/Downloads/MCP"
　　　　　　]
　　　　}
　　}
}
```

**重要**：パス中の `[ユーザー名]` は実際のユーザー名に置き換えてください。
また、指定したディレクトリは事前に作成しておく必要があります。

### 手順4：Claude for Desktop の再起動

設定を反映するため、Claude for Desktop を再起動します：

1. Claude メニュー → 終了
2. Launchpad → Claude で再起動

再起動後、入力エリアの左下に「**検索とツール**」のスライダーボタンが表示されます。

### 手順5：動作確認

以下のプロンプトで動作を確認してみましょう：

```
俳句を１つ作って、デスクトップに出力してください
```

「Claude は外部連携の使用を希望しています」と表示されたら、「一度だけ許可」を選択します。

成功すると、`~/Desktop/MCP/俳句.txt` にファイルが作成されます。

## ブラウザ自動化用 Playwright MCP サーバーの追加

より高度な操作として、ブラウザ自動化用の Playwright MCP サーバーも追加できます。

### 設定の追加

`claude_desktop_config.json` に以下を追加します：

```json
{
　　"mcpServers": {
　　　　"filesystem": {
　　　　　　"command": "npx",
　　　　　　"args": [
　　　　　　　　"-y",
　　　　　　　　"@modelcontextprotocol/server-filesystem",
　　　　　　　　"/Users/[ユーザー名]/Desktop/MCP",
　　　　　　　　"/Users/[ユーザー名]/Downloads/MCP"
　　　　　　]
　　　　},
　　　　"playwright": {
　　　　　　"command": "npx",
　　　　　　"args": [
　　　　　　　　"@playwright/mcp@latest",
　　　　　　　　"--isolated",
　　　　　　　　"--storage-state={path/to/storage.json}"
　　　　　　]
　　　　}
　　}
}
```

### macOS での権限設定

初回実行時に「mac により拒否されました」と表示される場合は、以下の手順で権限を設定します：

1. システム設定 → プライベートとセキュリティ → アクセシビリティ
2. Claude を「オン」に設定
3. Claude を再起動

### 動作確認

```
今日の渋谷の天気をブラウザで検索して
```

AI が Chrome を自動で開き、天気情報を検索して結果を報告します。

## トラブルシューティング

### ログの確認方法

MCP サーバーが正常に動作しない場合は、ログを確認してください：

```bash
cd ~/Library/Logs/Claude
cat mcp-server-filesystem.log
```

### よくある問題

1. **パスが存在しない**：設定で指定したディレクトリが存在することを確認
2. **Node.js のバージョン**：最新版の Node.js を使用することを推奨
3. **権限エラー**：macOS のセキュリティ設定で Claude にアクセス権限を付与

## まとめ

Claude.ai の Integrations 機能により、AI との連携がより身近になりました。
ローカル環境での MCP サーバー構築も比較的簡単で、以下のようなメリットがあります：

### メリット
- **簡単な拡張**：AI アプリに簡単に機能を追加できる
- **自然言語操作**：複雑なサービスも自然言語で操作可能
- **安全な接続**：共通プロトコルによる安全な双方向接続
- **コスト削減**：M×N 問題が M＋N 問題に簡略化

### 注意点
- **セキュリティ**：信頼できない MCP サーバーの使用は避ける
- **設定管理**：設定ファイルの外部流出に注意
- **定期チェック**：導入している MCP 設定を定期的に確認

今後も Claude の機能拡張が進む中で、MCP エコシステムはさらに発展していくことが期待されます。
ぜひ実際に環境を構築して、AI との新しい連携方法を体験してみてください。

---

**参考リンク**
- [Model Context Protocol 公式サイト](https://modelcontextprotocol.io/)
- [Claude Integrations 発表記事](https://www.anthropic.com/news/integrations)
- [GIGAZINE - Claude Integrations 記事](https://gigazine.net/news/20250502-claude-integrations/)
- [ちゃんと理解したい初心者のための「MCP」まとめ](https://qiita.com/to3izo/items/99dd3cde237c2e5a007f)
- [初心者向け MCP 導入・環境構築〜基本的な使い方の全手順](https://qiita.com/to3izo/items/ca0e9596324610b195fc)
- [Playwright MCP server](https://github.com/microsoft/playwright-mcp)

Generated by Claude Sonnet 4

プロンプト:
　　以下の URL の記事と、添付した YAML の情報を参考に、
　　6月から Claude.ai Pro プランでも Integrations が使えるようになったことと
　　MCP サーバー を筆者が構築したことについて、技術系ブログの記事を書いてください。
　　https://gigazine.net/news/20250502-claude-integrations/
　　（添付）YAML #search: MCP
タイトルとリンクは加筆しています。
YAML の部分に MCP の動作確認をしたときの手順やコマンドが構造化テキスト形式で書いてあります。
#ref: https://github.com/Takakiriy/typrm/blob/master/README-jp.md

Simple and Visual