サクッと試すClaude Model Context Protocol、一次情報多め
対象読者
- ClaudeのModel Context Protocolをサクッと試してみたい人
アジェンダ
- Claudeをインストール
- 設定ファイルを作成
- Brave Search APIを取得
- Claudeで実際に使用してみる
Claudeをインストール
ヘルプ記事
以下のリンク先からインストールしてください
設定ファイルを作成
上記のような画面が開きましたら、（⌘+,）などで環境設定に行くと以下の画面になると思います
こちらのサイドバーのDeveloper→Edit Configを開くと、claude_desktop_config.json
ファイルが作成されます。
こちらをVSCodeで開き、編集します
Brave Search APIを取得
リアルタイムの情報を取得するのに、検索APIが必要なためBrave Search APIを取得します
以下からBraveのアカウントを作成します
ログイン後にサブスクリプションを登録する必要があります（カード入りません）
サイドバーのSubscriptionsにアクセスし、以下の画面でFreeのsubscriptionsを登録します
subscriptionsに登録したら、サイドバーのAPI Keysに行き、右上の+ Add API KeyからAPI Keyを発行します
（例↓）
API KeyをCopyして持っておきます
Claudeで実際に使用してみる
先ほどの設定ファイルをVSCodeなどのエディタを開きます
最初は空のブラケットがある状態かと思います
このブラケットの中に以下を追記します
今回はサクッとなので、npx実行にしています。
Example通りです
参考
{
"mcpServers": {
"brave-search": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-brave-search"],
"env": {
"BRAVE_API_KEY": "API_KEYを貼り付け"
}
}
}
}
API_KEYを貼り付けして、保存します
Claudeを再起動します
すると、以下のようなトンカチマークがでてきます!
これで完了です！
実際に動かしてみる
東京の天気を調べようとすると以下のような画面になります
今日の天気を知ることができました！！🎉🎉🎉🎉
その他Model Context Protocolの情報
色々なMCP Serverがあるみたいなので、試してみたいです
その他の具体例
公式サイト（オリジナル作りたい方必見）
TypeScript SDK
可能な限り一次情報を載せるように心がけましたが、ミスなどありましたら指摘して頂けると嬉しいです！
Discussion