Featured image of post Claude Desktop with MCP
Tech

Claude Desktop with MCP

Anthoropic社の Claude Pro に課金して1週間が経過した。

Claude 3.7 Sonnet × MCP を試してみて、面白かったので書き残しておく。

やってみたのは以下。

  • Playwrightを使い、ブラウザを操作をする
  • Claude Codeと連携し、PC内のソースコードを編集する
  • Axiomと連携し、エラーログを解析してもらう

Playwrightを使い、ブラウザを操作をする

https://github.com/microsoft/playwright-mcp

こちらはMicrosoft社 謹製のMCPサーバー。

E2Eテストでお馴染みのPlaywrightを、生成AI経由で操作できるようになる。

Claude Desktopを起動し、設定＞開発者 からMCP構成を編集。 Claudeの設定ファイル群が入ったディレクトリに案内されるので、claude_desktop_config.json を以下のように編集する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "mcpServers": {
    "playwright": {
      "command": "/path/to/npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

MCPサーバー起動のために、事前に npx のインストールが必要。Voltaあたりでインストールしておくと良い。

command のPATHは

1

which npx

で出てきたものをいれておけばOK。

設定ファイルを保存し、Claude Desktopを再起動したら、チャット欄の「利用可能なMCPツール」に追加され利用できるようになる。

雑に見積書を作ってもらう。

misocaにログインし、見積書を作成してください。 明細は「Webアプリ開発」のみで300000円です。

PlaywrightのTool実行許可を与えるとブラウザが起動し、URLを教えているわけでもないのにログイン画面を探してくれる。

プロンプトに認証情報を与えたくなかったので、IDとパスワードの入力だけこちらで操作してログイン。

あとはまた勝手に見積書の画面を探していい感じに操作してくれる。

Claude Desktopが見積書を作成している様子

Claudeに指示を出したら、おかしなことをしていないかたまに気にかけつつ、自分は他の作業を進めておける。

生成AIへのリクエスト→DOM確認→操作 を何度も繰り返すので、人間が入力するより時間はかかるものの、指示どおりに見積書を作成してくれた。

Claudeは見積書の作成完了後、タスクを終了させるのではなく、指示していない発行や請求書変換まで始めようとしてしまった。

現時点ではある程度マイクロマネジメントしないといけないし動きも遅いが、適切なプロンプトを組んでうまく調教すれば、お節介は抑制できるかもしれない。今後に期待。

Claude Codeと連携し、PC内のソースコードを編集する

Claude Code といえば、Clineと同様にAPIからTokenをじゃぶじゃぶ使って散財・・・というイメージがあったが、Claude DesktopからMCPを介して利用することで、Claude Proの月額固定料金で使えそうだった。

Claude Codeをインストールし

1

npm install -g @anthropic-ai/claude-code

起動できるか確認

1

claude

ブラウザを開いてログインし、最初のクレジットを支払わせようとしてくるが、一旦キャンセル。

Playwrightと同様、MCPサーバーの登録を行う。

1
2
3
4
5
6
7
8
9

{
  "mcpServers": {
    "claude_code": {
      "command": "/path/to/claude",
      "args": ["mcp", "serve"],
      "env": {}
    }
  }
}

こちらもcommand のPATHは

1

which claude

で出てきたものを入れておく。

設定ファイルを保存し、Claude Desktopを再起動。

新規チャットで、Localのリポジトリ（1人で開発しているマルチテナントSaaS。ソースコードとしてそれほど巨大ではないが、デモアプリのように簡素なものでもない。）を読んでもらう。

Claude Codeを使い、 /path/to/hoge-system の開発を行います。まずは概要を把握してください。

ざっくり以下のような内容を返してくれた。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# Hoge Systemプロジェクト概要
Hoge Systemは、〇〇のためのウェブアプリケーションです。ユーザーは〇〇ができます。

## 主な機能

- 〇〇管理
  - 詳細説明〜
- 〇〇作成・管理
  - 詳細説明〜
- 〇〇切り替え
  - 詳細説明〜
- サブスクリプション管理
  - 詳細説明〜
- プラン別の機能制限
  - 詳細説明〜
- Stripeを使用した決済処理
  - 詳細説明〜

## 技術スタック

- フロントエンド
  - フレームワーク: Remix
  - UIライブラリ: React, shadcn/ui
  - スタイリング: TailwindCSS
  - 状態管理: Jotai
  - 画像操作: react-konva

- バックエンド
  - データベース: Supabase (PostgreSQL)
  - 認証: Supabase Auth
  - ストレージ: Supabase Storage
  - サーバーレス関数: Supabase Edge Functions
  - 決済処理: Stripe

- デプロイ/ホスティング
  - Fly.io (フロントエンド)
  - Supabase (バックエンド)

## データモデル

- users: ユーザー情報
- ・・・

## サブスクリプションプラン

- 梅: 基本プラン（制約）
- 竹: 標準プラン（制約）
- 松: 上位プラン（制約）

このアプリケーションは、〇〇を活用して、〇〇を効果的に管理したいビジネスユーザー向けのサービスです。

雑な指示だったのに、情報の誤りなし。このあたりは Claude 3.7 Sonnet の地頭の良さを感じる。

ドキュメント不足のプロジェクトであれば、まるっとソースを読ませてMarkdownでドキュメントを書かせるといった使い方ができそう。

概要を把握させることができたので、実際に指示を出してソースコードを改変させてみる。

依存関係をインストールしてください。

フロントエンドは http://localhost:5173/ で起動しています。 Playwrightでログインして操作しながら開発してください。

アプリケーションのログイン不要なページ /helpを新規作成し、使い方を表示できるようにしてください。

Playwright MCPと組み合わせながら、ブラウザ操作させつつソースコードを編集することができる。

最終的に指示どおり、Remixの新規Routeを作成してくれた。

Axiomと連携し、エラーログを解析してもらう

https://github.com/axiomhq/mcp-server-axiom

Axiom というアプリケーションログの管理ツールを利用している。Axiomは公式がMCPサーバーを提供してくれているので使ってみる。

こちらはJavaScriptではなくGo製なので、インストール方法が異なる。

go install でも良さそうだが、GitHubのReleasesからパッケージをダウンロードし、解凍する（M系のMacなのでDarwin-arm64を選択）。

AxiomのMCPサーバー用に適当なディレクトリを作り、解凍した実行ファイルと設定ファイル config.txt を置いておく。

config.txtの中身はこんなかんじ。

1
2
3
4
5
6

token xaat-xxxxx...
url https://api.axiom.co
query-rate 1
query-burst 1
datasets-rate 1
datasets-burst 1

tokenはAxiomの管理画面から発行する（Access＞API TokensではなくAccount＞ProfileのPersonal tokensを発行する。API Tokensだとログ取得ステップの途中から権限不足で動かなくなってしまった）

MCPサーバーの登録を行う。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
  "mcpServers": {
    "axiom": {
      "command": "/path/to/axiom/axiom-mcp",
      "args": [
        "--config",
        "/path/to/axiom/config.txt"
      ],
      "env": {
        "AXIOM_ORG_ID": "Axiomの組織ID（Account画面から確認できる）"
      }
    }
  }
}

Claude Desktopを再起動。

実行ファイルはそのままだとMacのセキュリティで防御されてしまうので、実行時にMac設定の「プライバシーとセキュリティ」から許可を与えておく必要がある。

ちょうど本番環境でエラーが起きていたのでレポートさせてみる。

axiomで直近12時間の間に発生したエラーログを確認し、レポートしてください。 ログレベルは全てinfoになってしまうので、messageのlevelがerrorのものをレポートしてください。

Fly.ioからAxiomへログ転送するために利用している fly-log-shipper の仕様で、ログレベルが全てinfoになってしまうので、そのあたりもうまく吸収してもらう。

以下のようなレポートを作成してくれた。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# Axiomエラーログ分析レポート（直近12時間）

## 概要
直近12時間（2025年X月X日 XX:XX UTC から 2025年X月X日 XX:XX UTC まで）のログデータを分析した結果、standard log.level では見つからなかったエラー・警告が、JSON message内に埋め込まれた「level」フィールドとして確認されました。

## エラーの種類と出現頻度

### エラータイプ別の集計
以下のエラーが検出されました：

#### 1. 〇〇関連のエラー

件数：22件
内訳：

- XXX not found (404エラー): 2件
- conflict XXX (400エラー): 6件
- internal server error (内部サーバーエラー): 12件
- validation error (バリデーションエラー): 3件

時間帯別の発生状況

- 09:12-09:24 UTC: 11件
- 11:00-11:30 UTC: 11件

詳細分析
1. XXXに関するエラー

- XXX not found (404エラー)
  - 〇〇のAPIリクエスト時に発生した404エラーです。存在しないXXXを削除しようとすると発生します。

・・・

## 問題の評価と推奨される対応

### 主な問題

- 〇〇の競合・不整合
  - ・・・
- 初期設定の問題
  - ・・・

### 推奨される対応策

- 〇〇の見直し
  - ・・・
- ・・・

ログ解析については順次読み込んで把握してゆくよりも、生成AIに任せてしまったほうが圧倒的に速い。

トラブル発生時は迅速に状況把握できることが重要なので、かなり実用性が高そうな感触。

エラーのレポートをもとに、Claude Code MCP経由で一気にソースコードの特定と改修、などもやりやすくなる。

おわりに

流行に乗っかり、Claude DesktopからMCPを触ってみた。

まだまだ試しきれていないことも多いが、生成AIをチャットの枠組から解放させることで、活用の幅が一気に広がるという感触を味わうことができた。

大いなる力には大いなる責任が伴う。生成AIに多種多様な操作を許可するということは、生成AIが意図しない挙動をしてしまったときに傷を負うリスクがあるということ。

野良MCPサーバーは基本的には使わず、自前で作成するか、MCPサーバーを利用することはセキュリティ的に安全か?に記載されているように、信頼できるものなのか確認して使ってゆく必要がある。

© 2024 - 2025 Seitaro
Built with Hugo
Theme Stack designed by Jimmy