【完全ガイド】DXTで革命的に簡単！PCリソースモニタリングMCPサーバーの作り方

1. はじめに - AI開発の新時代を切り開くMCPとDXTの登場

現代のAI開発において、Model Context Protocol（MCP）は革命的な技術として注目を集めています。MCPは、AIアプリケーションと大規模言語モデル（LLM）が外部データソースやツールに接続するためのオープンプロトコルです。

MCPは「AI用のUSB-C」と表現されることがあります。USB-Cが様々なデバイスを標準化されたインターフェースで接続できるように、MCPは生成AIモデルと様々なデータソースやツールを標準化された方法で接続します。

Claude DesktopやCursor、Zedなどの開発環境でMCPを活用することで、AIがローカルファイルシステムへのアクセス、データベースの操作、外部APIの呼び出し、システムリソースの取得など、幅広い外部リソースを取得・操作できるようになります。これにより、より実用的で有用な回答を提供できるようになりました。

1.1 従来のMCP設定の課題

しかし、MCPには大きな課題がありました。設定が非常に煩雑で、カンマやカッコなど1つ間違えただけでも正常に動作しないという問題です。従来のMCPサーバーを使うためには、以下のような課題がありました：

JSON設定ファイルのパスが複雑：設定ファイルの場所を正確に指定する必要がある
JSON設定ファイルの手動編集が必要：構文エラーが発生しやすい
エラーが発生した場合、デバッグが困難：問題の特定に時間がかかる
依存関係の管理が複雑：必要なライブラリやツールの準備が大変

これらの課題により、多くの開発者がMCPの導入を躊躇していました。特に初心者にとっては、技術的なハードルが高すぎる状況でした。

2. Desktop Extensions（DXT）の革命的登場

2.1 DXTとは何か？

上記のような課題を解決するために、AnthropicからDesktop Extensions（DXT）がリリースされました。DXTは、Chromeのエクステンションのようなものをイメージしてもらえればわかりやすい技術です。

Chrome拡張機能がブラウザの機能を拡張するように、DXTはClaude Desktopのアプリを機能強化するためのパッケージです。最大の特徴は、ダウンロードしたパッケージをダブルクリックするだけでインストールが可能で、複雑な設定作業は一切不要という点です。

2.2 DXTの技術的仕組み

DXTファイルは、実際にはzipアーカイブ形式で構成されています。このアーカイブには以下の要素が含まれています：

ローカルMCPサーバー：実際の機能を提供するプログラム
manifest.json：サーバーとその機能を記述するメタデータ
依存関係：必要なライブラリやツール
設定ファイル：動作に必要な各種設定

この仕組みにより、開発者は複雑な設定を気にすることなく、エンドユーザーは簡単にMCPサーバーを利用できるようになりました。

2.3 DXTの画期的な利点

DXTが従来のMCP設定と比較して優れている点は数多くあります。

設定の完全自動化

複雑なJSON設定ファイルの編集が一切不要になりました。従来は手動で設定ファイルを編集し、パスやパラメータを正確に記述する必要がありましたが、DXTではこれらすべてが自動化されています。

ワンクリックインストール

.dxtファイルをダブルクリックするだけで、Claude Desktopに機能が追加されます。インストールプロセスは3ステップで完了します：

.dxtファイルをダウンロード
ファイルをダブルクリック
「インストール」をクリック

直感的な管理インターフェース

Chrome拡張機能と同様に、GUI上で簡単に有効/無効を切り替えることができます。どの拡張機能がインストールされているか、どれが有効になっているかが一目でわかります。

自動更新機能

新しいバージョンが利用可能になると、自動的に更新が適用されます。これにより、常に最新の機能とセキュリティ修正を利用できます。

簡単な配布

開発者にとっても、ファイル一つで配布が可能になり、ユーザーへの提供が格段に簡単になりました。

依存関係の自動管理

必要なファイルがすべてパッケージされているため、ユーザーが個別にライブラリをインストールする必要がありません。

2.4 対応クライアントと将来の展望

現在、DXTに対応しているクライアントはClaude Desktopのみですが、将来的にはCursorやVS Codeなどの開発ツールでの利用も期待されています。これにより、AI開発エコシステム全体でDXTが標準的な配布形式となる可能性があります。

3. 実際に作ってみよう！PCリソースモニタリングMCPサーバーの開発

3.1 今回の開発題材

本記事では、PCのリソースをモニターしてくれるMCPサーバーを作成します。このサーバーが提供する具体的な機能は以下の通りです：

CPU使用率の取得：リアルタイムでCPUの使用状況を監視
メモリ使用量の監視：RAMの使用量と空き容量を確認
ディスク容量の確認：ストレージの使用状況を把握
システム情報の提供：OS、アーキテクチャ、プロセッサ情報など

これにより、Claude for Desktopから「PCの現在のCPU使用率を教えて」や「メモリ使用量は大丈夫？」といった質問に答えられるようになります。システム管理者や開発者にとって、AIアシスタントを通じてシステム状況を確認できるのは非常に便利な機能です。

3.2 開発環境の準備

今回の開発では、ターミナルとClaude Codeのみを使用します。開発環境はMacを前提としていますが、PCのリソース情報はハードウェアに依存するため、Windowsユーザーの方は適宜プロンプトを調整しながら進めてください。

3.2.1 必要なツールの確認

まず、Node.jsがインストールされているかを確認します：

node --version

Node.jsがインストールされていない場合は、Node.js公式サイトからLTS版（Long Term Support）をダウンロードしてインストールしてください。推奨バージョンはv18以上です。

3.2.2 必要なツールのインストール

次に、今回の開発に必要な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コマンドが使えるようになります。

3.3 プロジェクトの初期化

3.3.1 プロジェクトディレクトリの作成

まずはプロジェクトディレクトリを作成してDXTプロジェクトを初期化しましょう：

# プロジェクトディレクトリを作成 mkdir pc-monitor-mcp cd pc-monitor-mcp # DXTプロジェクトを初期化 dxt init

3.3.2 対話形式での設定

dxt 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」のまま

その他の項目は基本的に任意なので、空欄やデフォルト値で問題ありません。

3.4 Claude Codeを使った開発のベストプラクティス

3.4.1 Context7 MCPの設定

Claude Codeが最新のライブラリドキュメントにアクセスできるように、Context7のMCPを設定します：

claude mcp add --transport http context7 https://mcp.context7.com/mcp

これにより、Claude Codeが最新のライブラリドキュメントにアクセスできるようになります。

3.4.2 開発における重要な原則

ゼロから作るよりも、まず雛形を作ってからClaude Codeを実行するのがおすすめです。

理由：

LLMの特性: LLMは、既存の状態を正しいものと認識してしまう傾向が強く、最初の設定などが間違っていた場合に、その間違った設定を正しいものとして進めてしまいます
雛形の利点: dxt initのような公式ツールで作られた雛形は、正確な構造とメタデータを持っています
効率的な開発: 初期化することで定義ファイルを生成してくれますが、これによって想定外の構文エラーやパラメータ不足などの可能性を軽減します

この原則は、DXTプロジェクトに限らず、React、Next.js、Python、その他のフレームワークでも同様です。公式のCLIツールやcreate-*コマンドがある場合は、それを使ってから開発を始めましょう。

4. Claude Codeを使ったMCPサーバーの実装

4.1 Claude Codeの起動と初期設定

プロジェクトの初期化が完了したら、Claude Codeを起動します。

# Claude Codeを起動 claude

4.1.1 /initコマンドによるプロジェクト初期化

Claude Codeでは、/initコマンドを実行することで、プロジェクトの理解を深め、適切なCLAUDE.mdファイルを自動生成してくれます。

/initコマンドの利点：

プロジェクト構造の自動分析: 既存のファイル構成を理解してプロジェクトの特性を把握
CLAUDE.mdの自動生成: プロジェクトの概要、アーキテクチャ、開発ガイドラインを含む包括的なドキュメントを作成
コンテキストの最適化: 以降のClaude Codeとのやり取りがより効率的になる

特に既存のプロジェクトでClaude Codeを初めて使用する際は、必ず/initを実行してからタスクを開始することを強く推奨します。

4.1.2 Planモードの設定

CLAUDE.mdが作成されたことを確認したら、Shift + Tabを2回押してPlanモードにします。画面下部が以下のようになることを確認します：

⏸ plan mode on (shift+tab to cycle)

Plan modeの利点：いきなり実装させるのではなく、詳細な仕様などを擦り合わせたのちに実装開始してくれます。これにより、より正確で要件に沿った実装が可能になります。

4.2 MCPサーバーの実装プロセス

4.2.1 プロンプトの作成

Claude Codeが起動したら、以下のようなプロンプトを入力してプロジェクトを作成していきます：

PCのリソース情報（CPU使用率、メモリ使用量、ディスク容量、システム情報）を取得できるMCPサーバーを作成してください。要件： 1. CPU使用率をリアルタイムで取得 2. メモリ使用量（使用中/総容量）を取得 3. ディスク容量（使用中/総容量）を取得 4. システム情報（OS、アーキテクチャ、プロセッサ）を取得 5. エラーハンドリングを適切に実装 6. Node.jsのosモジュールとchild_processを使用 7. MCPプロトコルに準拠した実装各機能を個別のツールとして実装し、Claude Desktopから呼び出せるようにしてください。

4.2.2 実装される主要機能

Claude Codeによって実装される主要な機能は以下の通りです：

1. CPU使用率取得ツール

async function getCpuUsage() { // CPU使用率を計算するロジック // 複数回サンプリングして平均値を算出 }

2. メモリ使用量取得ツール

function getMemoryUsage() { const totalMemory = os.totalmem(); const freeMemory = os.freemem(); const usedMemory = totalMemory - freeMemory; // メモリ使用状況を返す }

3. ディスク容量取得ツール

async function getDiskUsage() { // プラットフォーム別のディスク使用量取得 // macOS: df コマンド // Windows: wmic コマンド }

4. システム情報取得ツール

function getSystemInfo() { return { platform: os.platform(), arch: os.arch(), hostname: os.hostname(), cpus: os.cpus(), // その他のシステム情報 }; }

4.3 MCPプロトコルの実装詳細

4.3.1 MCPサーバーの基本構造

MCPサーバーは、@modelcontextprotocol/sdkを使用して実装されます。基本的な構造は以下の通りです：

import { Server } from '@modelcontextprotocol/sdk/server/index.js'; import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'; const server = new Server( { name: 'pc-monitor-mcp', version: '1.0.0', }, { capabilities: { tools: {}, }, } );

4.3.2 ツールの登録

各機能をMCPツールとして登録します。

server.setRequestHandler(ListToolsRequestSchema, async () => { return { tools: [ { name: 'get_cpu_usage', description: 'Get current CPU usage percentage', inputSchema: { type: 'object', properties: {}, }, }, { name: 'get_memory_usage', description: 'Get current memory usage information', inputSchema: { type: 'object', properties: {}, }, }, // その他のツール定義 ], }; });

4.3.3 ツールの実行ハンドラー

各ツールの実行ロジックを実装します：

server.setRequestHandler(CallToolRequestSchema, async (request) => { const { name, arguments: args } = request.params; switch (name) { case 'get_cpu_usage': const cpuUsage = await getCpuUsage(); return { content: [ { type: 'text', text: JSON.stringify(cpuUsage, null, 2), }, ], }; // その他のケース } });

4.4 エラーハンドリングとセキュリティ

4.4.1 適切なエラーハンドリング

MCPサーバーでは、適切なエラーハンドリングが重要です：

try { const result = await getSystemResource(); return { content: [{ type: 'text', text: JSON.stringify(result) }] }; } catch (error) { return { content: [ { type: 'text', text: `Error: ${error.message}`, }, ], isError: true, }; }

4.4.2 セキュリティ考慮事項

入力値の検証: ユーザー入力を適切に検証
権限の制限: 必要最小限の権限でのみ動作
機密情報の保護: システム情報の中で機密性の高い情報は除外

‍

5. DXTパッケージの作成とデプロイメント

5.1 DXTパッケージの構造理解

DXTパッケージを作成する前に、その構造を理解することが重要です。DXTファイルは実際にはzipアーカイブで、以下のような構造を持ちます。

pc-monitor-mcp.dxt (ZIP file)
├── manifest.json         # 必須: 拡張機能のメタデータと設定
├── server/               # サーバーファイル
│   └── index.js          # メインエントリーポイント
├── node_modules/         # バンドルされた依存関係
├── package.json          # オプション: NPMパッケージ定義
├── icon.png              # オプション: 拡張機能アイコン
└── assets/               # オプション: 追加アセット

この技術により、個々の開発者が作成した小さな機能が、世界中のAIアプリケーションで利用される可能性があります。

あなたも今日からDXT開発者として、AI開発の未来を形作る一員になることができます。まずは本記事の手順に従って、最初のDXTパッケージを作成してみてください。そして、その経験を基に、より革新的で実用的な拡張機能の開発に挑戦してください。

5.2 manifest.jsonの詳細設定

manifest.jsonは、DXTパッケージの心臓部です。このファイルには、拡張機能の動作に必要なすべての情報が含まれています。

1{
2  "name": "pc-monitor-mcp",
3  "displayName": "PC Resource Monitor",
4  "version": "1.0.0",
5  "description": "PCのリソース使用状況をモニタリング",
6  "author": {
7    "name": "Your Name"
8  },
9  "license": "MIT",
10  "server": {
11    "type": "node",
12    "entryPoint": "server/index.js"
13  },
14  "tools": [
15    {
16      "name": "get_cpu_usage",
17      "description": "CPU使用率を取得"
18    },
19    {
20      "name": "get_memory_usage", 
21      "description": "メモリ使用量を取得"
22    },
23    {
24      "name": "get_disk_usage",
25      "description": "ディスク使用量を取得"
26    },
27    {
28      "name": "get_system_info",
29      "description": "システム情報を取得"
30    }
31  ]
32}

5.3 依存関係のバンドリング

5.3.1 Node.js拡張機能の場合

Node.js拡張機能では、すべての依存関係をバンドルする必要があります。

1# 本番用の依存関係のみをインストール
2npm install --production
3
4# node_modulesディレクトリ全体をバンドル
5# DXTパッケージに含める

重要なポイント：

•npm ciやyarn install --frozen-lockfileを使用して再現可能なビルドを作成

•開発用依存関係（devDependencies）は除外

•サーバーエントリーポイントはmanifest.jsonのserver.entry_pointで指定

5.3.2 依存関係の最適化

パッケージサイズを最小化するために、以下の最適化を行います。

# 不要なファイルを除外
echo "test/" >> .npmignore
echo "*.test.js" >> .npmignore
echo "docs/" >> .npmignore

# パッケージサイズを確認
npm pack --dry-run

5.4 DXTパッケージの作成

5.4.1 dxt packコマンドの実行

すべての準備が完了したら、DXTパッケージを作成します。

# DXTファイルを作成
dxt pack

このコマンドにより、pc-monitor-mcp.dxtファイルが生成されます。

5.4.2 パッケージの検証

作成されたDXTパッケージが正しく構成されているかを確認します。

1# パッケージの内容を確認
2dxt validate pc-monitor-mcp.dxt
3
4# パッケージの詳細情報を表示
5dxt info pc-monitor-mcp.dxt

5.5 Claude Desktopでのテスト

5.5.1 拡張機能のインストール

作成したDXTファイルをClaude Desktopにインストールします。

1.pc-monitor-mcp.dxtファイルをダブルクリック

2.Claude Desktopが起動し、インストールダイアログが表示される

3.「インストール」ボタンをクリック

5.5.2 機能のテスト

インストール後、Claude Desktopで以下のようなクエリをテストします。

PCの現在のCPU使用率を教えてください

メモリ使用量はどのくらいですか？

ディスクの空き容量を確認してください

システム情報を表示してください

5.5.3 エラーのデバッグ

もしエラーが発生した場合は、以下の手順でデバッグします。

1.Claude Desktopのログを確認

2.manifest.jsonの構文をチェック

3.サーバーコードのエラーハンドリングを確認

4.依存関係が正しくバンドルされているかチェック

5.6 配布とメンテナンス

5.6.1 配布方法

DXTパッケージの配布は非常に簡単です。

•直接配布: .dxtファイルを直接ユーザーに提供

•ウェブサイト: ダウンロードリンクを提供

•GitHub Releases: GitHubのリリース機能を使用

•DXTディレクトリ: 将来的にはClaude Desktop内のディレクトリに登録

5.6.2 バージョン管理

拡張機能の更新時は、以下の手順を実行します。

1.manifest.jsonのバージョンを更新

2.変更ログを作成

3.新しいDXTパッケージを作成

4.ユーザーに更新を通知

1{
2  "version": "1.1.0",
3  "changelog": [
4    "CPU使用率の精度を向上",
5    "新しいディスク情報を追加",
6    "エラーハンドリングを改善"
7  ]
8}

‍