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

Last updated at 2025-01-07Posted at 2025-01-05

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

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

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

MCP

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に書いてもらった図

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

ClaudeでWeb検索

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

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

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

準備など

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

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

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

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

Claudeデスクトップの設定

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

これは設定後の画面

claude_desktop_config.jsonを編集することで

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

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

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

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

{
  "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-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)

調べると以下の記事が

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

対応してみる

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

$ npm i && npm run build && npm link

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

参照元: https://zenn.dev/sun_asterisk/articles/6c9c0dc8535d6f

↓

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

{
  "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キー"
      }
    }
  }
}

無事起動

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

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

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

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

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

割と便利