はじめに - MCPの設定の複雑さという課題
Model Context Protocol（MCP）は、AIアプリケーションとLLMが外部データソースやツールに接続するためのオープンプロトコルです。
「Claude Desktop」や「Cursor」などのツールでさまざまなMCPを活用することで、AIがローカルファイルシステムへのアクセス、データベースの操作、外部APIの呼び出し、システムリソースの取得など、幅広い外部リソースを取得・操作できるようになり、より実用的で有用な回答を提供できるようになりました。
しかし、MCPの課題は設定が煩雑で、カンマやカッコなど１つないだけでも正常に動作しないというのが、とっつきづらい点でもありました。従来のMCPサーバーを使うためには、以下のような課題がありました。
JSON設定ファイルのパスが複雑
JSON設定ファイルの手動編集が必要
エラーが発生した場合、デバッグが困難
Desktop Extensions (DXT) の登場
上記のような課題を解決するために、今回、Desktop Extensions (DXT)がリリースされました。
DXTは、Chromeのエクステンションのようなものをイメージしてもらえればわかりやすいです。 Chrome拡張機能がブラウザの機能を拡張するように、DXTはClaude Desktopのアプリを機能強化するためのパッケージです。
ダウンロードしたパッケージをダブルクリックするだけでインストールが可能で、複雑な設定作業は一切不要です。
DXTの利点
設定の自動化: 複雑なJSON設定ファイルの編集が不要
ワンクリックインストール: .dxtファイルをダブルクリックするだけでClaude Desktopに機能追加
直感的な管理: Chrome拡張機能と同様に、GUI上で簡単に有効/無効を切り替え
自動更新機能: 新しいバージョンが自動で適用される
簡単な配布: ファイル一つで共有が簡単
依存関係の管理: 必要なファイルがすべてパッケージされている
なお、クライアントの対応は、現在は、Claude Desktopのみのようです。CursorやVS Codeなど開発ツールでの利用もこれから期待されます。
実際に作ってみよう！
では実際に、MCPサーバーを作ってDXTでパッケージングした後にインストールしましょう。
今回の題材
PCのリソースをモニターしてくれるMCPサーバーを作成します。具体的には：
CPU使用率の取得
メモリ使用量の監視
ディスク容量の確認
システム情報の提供
これにより、Claude for Desktopから「PCの現在のCPU使用率を教えて」や「メモリ使用量は大丈夫？」といった質問に答えられるようになります。
開発環境の準備
今回はターミナルとClaude Codeのみで作成していきます。なお、OSはMacを前提としています。PCのリソース情報はハードウェアに依存するためWindowsの方は、適宜プロンプトを調整しながら進めていってもらえればと思います。
必要なツール
# Node.jsが必要（推奨: v18以上）
node --version
Node.jsがインストールされていない場合上記のコマンドで「command not found」と表示された場合は、Node.js公式サイトからインストールしておきましょう。LTS版（Long Term Support）を選択することをおすすめします。
必要なツールをインストール
次に、今回の開発に必要な2つのツールをインストールします。
# Claude Codeのインストール
# AIとペアプログラミングできるコマンドラインツール
npm install -g @anthropic-ai/claude-code
# DXT CLIツールのインストール
# Desktop Extensionの作成・パッケージ化ツール
npm install -g @anthropic-ai/dxt💡 -gオプションについて
-gオプションは「グローバルインストール」を意味します。これにより、どこからでもどのプロジェクトでも、claudeとdxtコマンドが使えるようになります。
プロジェクトの初期化
まずはプロジェクトディレクトリを作成してDXTプロジェクトを初期化しましょう：
# プロジェクトディレクトリを作成
mkdir pc-monitor-mcp
cd pc-monitor-mcp
# DXTプロジェクトを初期化
dxt initdxt initコマンドを実行すると、対話形式でプロジェクトの基本情報を設定できます。以下は実際の設定例と推奨値です：
✔ Extension name: pc-monitor-mcp # プロジェクト名（そのまま）
✔ Author name: Your Name # あなたの名前
✔ Display name (optional): PC Resource Monitor # 表示名（わかりやすい名前）
✔ Version: 1.0.0 # バージョン（そのまま）
✔ Description: PCのリソース使用状況をモニタリング # 簡潔な説明
✔ Add a detailed long description? no # 詳細説明は不要
✔ Author email (optional): # メールアドレス（任意）
✔ Author URL (optional): # 個人サイト（任意）
✔ Homepage URL (optional): # プロジェクトURL（任意）
✔ Documentation URL (optional): # ドキュメントURL（任意）
✔ Support URL (optional): # サポートURL（任意）
✔ Icon file path (optional): # アイコン（任意）
✔ Add screenshots? no # スクリーンショット不要
✔ Server type: Node.js # Node.jsを選択
✔ Entry point: server/index.js # エントリーポイント（そのまま）
✔ Does your MCP Server provide tools? yes # ツールを提供するか（yes）
✔ Tool name: get_system_info # ツール名（get_system_infoと入力）
✔ Tool description (optional): # ツール説明（任意）
✔ Add another tool? no # 他のツールは不要
✔ Does your server generate additional tools at runtime? no # 動的ツール生成なし
✔ Does your MCP Server provide prompts? no # プロンプト提供なし
✔ Add compatibility constraints? no # 互換性制約なし
✔ Add user-configurable options? no # ユーザー設定なし
✔ Keywords (comma-separated, optional): # キーワード（任意）
✔ License: MIT # ライセンス（MITでOK）
✔ Add repository information? no # リポジトリ情報なし重要な設定項目：
Extension name: プロジェクト名（変更不要）
Display name: ユーザーに表示される名前（わかりやすい名前に）
Description: 機能の簡潔な説明
Server type: 必ず「Node.js」を選択
Entry point: 「server/index.js」のまま
その他の項目は基本的に任意なので、空欄やデフォルト値で問題ありません。
Context7 MCPの設定
Claude CodeがContext7のMCPを使えるように、以下を実行します：
claude mcp add --transport http context7 https://mcp.context7.com/mcpこれにより、Claude Codeが最新のライブラリドキュメントにアクセスできるようになります。
Claude Codeの起動
プロジェクトの初期化が完了したら、Claude Codeを起動します：
# Claude Codeを起動
claude💡 Claude Codeを使う際のベストプラクティス
今回のように、Claude Codeで何かを作るときは、ゼロから作るよりも、まず雛形を作ってからClaude Codeを実行するのがおすすめです。
理由：
LLMの特性: LLMは、既存の状態を正しいものと認識してしまう傾向が強く、最初の設定などが間違っていた場合に、その間違った設定を正しいものとして進めてしまいます
雛形の利点: dxt initのような公式ツールで作られた雛形は、正確な構造とメタデータを持っています
効率的な開発: 今回は、初期化することで定義ファイルを生成してくれますが、これによって想定外の構文エラーやパラメータ不足などの可能性を軽減します
この原則は、DXTプロジェクトに限らず、React、Next.js、Python、その他のフレームワークでも同様です。公式のCLIツールやcreate-*コマンドがある場合は、それを使ってから開発を始めましょう。
Claude Codeの/initコマンドによるプロジェクト初期化
Claude Codeでは、/initコマンドを実行することで、プロジェクトの理解を深め、適切なCLAUDE.mdファイルを自動生成してくれます。
/initコマンドの利点：
プロジェクト構造の自動分析: 既存のファイル構成を理解してプロジェクトの特性を把握
CLAUDE.mdの自動生成: プロジェクトの概要、アーキテクチャ、開発ガイドラインを含む包括的なドキュメントを作成
コンテキストの最適化: 以降のClaude Codeとのやり取りがより効率的になる
特に既存のプロジェクトでClaude Codeを初めて使用する際は、必ず/initを実行してからタスクを開始することを強く推奨します。
Planモードの設定
CLAUDE.mdが作成されたことを確認したら、Shift + Tabを2回押してPlanモードにします。画面下部が以下のようになることを確認します：
⏸ plan mode on (shift+tab to cycle)Plan modeの利点： いきなり実装させるのではなく、詳細な仕様などを擦り合わせたのちに実装開始してくれます。これにより、より正確で要件に沿った実装が可能になります。
Claude Codeが起動したら、以下のような対話形式でプロジェクトを作成していきます。
Claude Codeを使ったMCPサーバーの実装
ステップ1: Claude Codeでプロジェクトを作成
プロンプトに下記の通り入力します：
