Claude MCPをMacで試す。秋葉原の初売り情報をClaudeに調べてもらう

MCP（Model Context Protocol）が話題ですね。

MCPは`異なるAIモデルとデータソースを"標準規格のコンセント"のように簡単に繋げるためのプロトコル`（Claudeの要約）とのことで、今まで生成AIツールとローカルのデータって繋がりにくかったけど繋ぐ手順みたいなの作ったからみんな繋いでみてね、みたいな雰囲気。

今回ClaudeのデスクトップアプリにWeb検索機能を付けてみましたが結構使い勝手が良かったです。

## MCP

https://modelcontextprotocol.io/introduction

> MCP is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools.
> 
> MCPは、アプリケーションがLLMにコンテキストを提供する方法を標準化するオープンプロトコルだ。MCPはAIアプリケーションのUSB-Cポートのようなものだと考えてほしい。USB-Cがデバイスを様々な周辺機器やアクセサリーに接続するための標準化された方法を提供するように、MCPはAIモデルを様々なデータソースやツールに接続するための標準化された方法を提供します。（by DeepL翻訳）

MCP Serverの先にローカルデータがいるときもあれば、Web APIがいるときもある感じで、現状分かりやすい例だと**AI（現状Claudeのデスクトップアプリ）からパソコンデータやWebにアクセスできる** ようになります。

> Claudeに書いてもらった図
> ![スクリーンショット 2025-01-05 16.48.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/7d855989-0f92-6f61-225d-0fb21b18e81f.png)

Apple IntelligenceはiPhoneでそれをやろうとしてると思うのでスマホもPCもAI経由で色々やってくれる時代が見えてきましたね。

## ClaudeでWeb検索

MCPって広い概念なので今後やれること増えると思いますが現状だとClaudeにプラグインが使えるようになったくらいの認識で良いかと思います。

調べるとBrave SearchのAPIでWeb検索をする記事がよく出てきます。これを試してみます。

https://note.com/chaen_channel/n/n50ab03339fa6

何個か調べると出てきますがこちらの記事を見ながら進めました。

### 準備など

- Node.js
- Git
- Claudeデスクトップ
- Brave Search APIのキー

手元の適当なフォルダにこのリポジトリをGit Cloneしておきます。

https://github.com/modelcontextprotocol/servers

```bash
$ git clone https://github.com/modelcontextprotocol/servers.git
```

また、Brave Search APIのキーも作っておきましょう。無料でもある程度使えますがクレカなどの課金情報の登録（Stripeでいけました）が必要です。

https://brave.com/search/api/

### Claudeデスクトップの設定

これ今回初めて知りましたがClaudeの設定にDeveloperの選択肢あって設定がjsonで記述できます。

> これは設定後の画面
> ![スクリーンショット 2025-01-05 17.00.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/b62b6b8f-fb96-faff-d3b5-7a8befa4a230.png)


`claude_desktop_config.json`を編集することで

> ![スクリーンショット 2025-01-05 17.01.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/ccfe7337-0085-b5c6-407c-30a0e6940739.png)

初期状態だと以下のような形でした。ショートカットが入ってますね。

```json
{
  "globalShortcut": "Shift+Space",
}
```


こちらのリポジトリをみるとDockerかnpxかで実行を選べる模様です。


https://github.com/modelcontextprotocol/servers/blob/main/src/brave-search/README.md

npxだと以下のように設定すれば良いらしいけど... ?

```json
{
  "globalShortcut": "Shift+Space",
  "mcpServers": {
    "brave-search": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-brave-search"
      ],
      "env": {
        "BRAVE_API_KEY": "YOUR_API_KEY_HERE"
      }
    }
  }
}
```

### Claudeデスクトップを再起動したらエラー

設定後このようなエラーがでました。

> ![スクリーンショット 2025-01-05 2.24.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/38a6d81c-6b0f-064c-a990-7ec9024bdc3b.png)

> ![スクリーンショット 2025-01-05 2.34.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/225eef0a-1198-eb8f-6bad-5a42ec5c0c19.png)

エラーログはこんな感じ

```
2025-01-04T17:24:29.367Z [info] Attempting to connect to MCP server brave-search...
2025-01-04T17:24:29.559Z [error] Error in MCP connection to server brave-search: Error: spawn npx ENOENT
2025-01-04T17:24:29.560Z [error] Could not start MCP server brave-search: Error: spawn npx ENOENT
2025-01-04T17:24:29.562Z [info] MCP server brave-search disconnected. For troubleshooting guidance, please visit our [debugging documentation](https://modelcontextprotocol.io/docs/tools/debugging)
```

調べると以下の記事が

https://zenn.dev/sun_asterisk/articles/6c9c0dc8535d6f

npxのパスが通ってないわけでもないので原因わからないですがこの記事通りに対応したら上手くいきました。

### 対応してみる

記事の中ではsrc/brave-searchフォルダ内で以下を実行してシンボリックリンクを作って参照できるようにしています。

```bash
$ npm i && npm run build && npm link
```

その上でjsonを編集します。

> 参照元: https://zenn.dev/sun_asterisk/articles/6c9c0dc8535d6f 
> ![スクリーンショット 2025-01-05 2.33.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/b289e2b7-0fae-14cd-abac-9ea10f3f79b0.png)

↓

僕の環境の場合こんな感じでした。`claude-mcp-test`ってフォルダを作ってその中にCloneしてます。

```json
{
  "globalShortcut": "Shift+Space",
  "mcpServers": {
    "brave-search": {
      "command": "/Users/HOGE/.volta/bin/node",
      "args": [
        "/Users/HOGE/claude-mcp-test/src/brave-search/dist/index.js"
      ],
      "env": {
        "BRAVE_API_KEY": "BraveのAPIキー"
      }
    }
  }
}

```

## 無事起動

これで無事にいけました。

> ![スクリーンショット 2025-01-05 2.35.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/abc91429-e451-c628-0c91-a81aa4ec1ef9.png)


### Web検索: 秋葉原の初売り情報を調べてもらう

Web検索が可能になったということで調べてみます。

> ![スクリーンショット 2025-01-05 2.37.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/df130002-69b3-f0f2-2701-9091d2144de4.png)

最初はこんな感じの許可が求められます。

> ![スクリーンショット 2025-01-05 2.38.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/1c4156ca-50fa-16b4-4bd2-609dea872afd.png)

`Allow for This Chat`を選んでおくとそのチャットでは次からBrave Searchをスムーズに使えます。

```
Allow tool from "brave-search" (local)?

Run brave_web_search from brave-search
Performs a web search using the Brave Search API, ideal for general queries, news, articles, and online content. Use this for broad information gathering, recent events, or when you need diverse web sources. Supports pagination, content filtering, and freshness controls. Maximum 20 results per request, with offset for pagination.
Tool Input:
{
  "query": "ヨドバシカメラ 秋葉原 初売り 2025",
  "count": 5
}
Malicious MCP servers or conversation content could potentially trick Claude into attempting harmful actions through your installed tools. Review each action carefully before approving.

Allow for This ChatAllow Once
Deny
```

https://x.com/n0bisuke/status/1875799340884668543

割と便利

### Web検索: Claude MCPについて聞いてみる

現状ChatGPTもWebサーチ機能つきましたけど、ChatGPTはバグなのかWeb検索したときチャット全体がバカになり（表現が怪しい）回答がかなり怪しくなります。

LLM側の問題なのかChatGPT内のプロトコル問題なのか怪しいですが、 **Claude + Brave Searchは割とストレスなく使えてかなり良き**という感覚です。

- まずMCPについて聞く: 既存の知識から探索 => ハルシネーション発生...orz
 
> ![スクリーンショット 2025-01-05 17.29.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/3ddfeacb-1bc5-e542-03b0-7ead79d37120.png)

- "Brave Searchを使って調べた上でまとめて"と指示: Web検索 => 良い感じにまとめてくれる

>![スクリーンショット 2025-01-05 17.28.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/0b46e6d6-dd11-7b29-a9c7-a1f036888148.png)

- 原文のURLを渡して調査の指示: アクセスできない => けど自分でBrave Searchを使う判断 => 良い感じにまとめてくれる

> ![スクリーンショット 2025-01-05 17.29.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/d097434e-0847-d569-5666-d1b8a75cdaf5.png)

- まとめた内容を元に図を作ってもらう: ここまでの流れを踏まえて図解

> ![スクリーンショット 2025-01-05 17.29.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/cdce3fa8-1284-93cb-207e-f8f7b694f7f2.png)

結構調べ物など捗るなといった印象ですこれ

**GensparkとかFeloとかにいかなくてやれちゃうの便利すぎる。**

## コード眺めてみる

https://github.com/modelcontextprotocol/servers/blob/main/src/brave-search/index.ts#L182

この辺りでAPIリクエストしてますが、改変していけば他のAPI接続も自作できそうですね

## まとめ

MCPを使ってインテグレーションしていけば他のツール使わなくて良いというかPCの自動化も見えてきますね。

MCPに何が繋がるか色々考えると先の展開も見えてきそう。

MicrosoftやGoogleが似たような何かを出してくるのかここに乗っかるのかでまた流れが変わりそうですね