DXT (Desktop Extensions) の使い方 - MCPサーバーをClaude Desktopで使う最小実装ガイド

HOW_TO_USE_DXT.md

DXT (Desktop Extensions) の使い方

DXT (Desktop Extensions) は、MCPサーバーをClaude Desktopに簡単にインストールできるパッケージ形式です。

DXTとは

• MCPサーバーと依存関係を1つの.dxtファイルにパッケージ化
• Claude Desktopでワンクリックインストール可能
• 非技術者でも簡単に強力なローカルツールを利用可能

最小実装手順

1. プロジェクト構造を作成

mkdir my-extension
cd my-extension
mkdir server

ディレクトリ構造:

my-extension/
├── manifest.json
├── package.json
└── server/
    └── index.js

2. manifest.json を作成

{
  "dxt_version": "0.1",
  "name": "my-extension",
  "version": "1.0.0",
  "description": "最小限のMCPサーバー",
  "author": "Your Name",
  "server": {
    "type": "node",
    "entry_point": "server/index.js"
  },
  "tools": {
    "hello": {
      "description": "挨拶を返す"
    }
  }
}

3. server/index.js を作成

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

const server = new Server({
  name: "my-extension",
  version: "1.0.0",
});

server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "hello") {
    return {
      content: [{ type: "text", text: "こんにちは！" }]
    };
  }
});

const transport = new StdioServerTransport();
await server.connect(transport);

4. package.json を作成

{
  "name": "my-extension",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "@modelcontextprotocol/sdk": "^0.6.0"
  }
}

5. 依存関係をインストール

npm install

6. DXTファイルにパッケージ化

# @anthropic-ai/dxt CLIをインストール（初回のみ）
npm install -g @anthropic-ai/dxt

# パッケージ化
dxt pack .

これで my-extension.dxt ファイルが生成されます。

7. Claude Desktopにインストール

1. Claude Desktopを開く
2. 生成された .dxt ファイルをドラッグ&ドロップ
3. 「Install」をクリック

公式の実装例

1. hello-world-node

• 基本的なNode.js実装
• シンプルな時刻取得ツール

2. chrome-applescript

• ブラウザ自動化（macOS）
• URL操作、タブ管理、JavaScript実行

3. file-manager-python

• ファイルシステム操作
• Python実装の例

より高度な機能

ユーザー設定の追加

manifest.json:

{
  "user_config": {
    "api_key": {
      "type": "string",
      "description": "APIキー",
      "sensitive": true
    },
    "verbose": {
      "type": "boolean",
      "description": "詳細ログ出力",
      "default": false
    }
  }
}

複数のツールを実装

server.setRequestHandler("tools/call", async (request) => {
  switch (request.params.name) {
    case "hello":
      return { content: [{ type: "text", text: "こんにちは！" }] };
    case "time":
      return { content: [{ type: "text", text: new Date().toISOString() }] };
    default:
      throw new Error(`Unknown tool: ${request.params.name}`);
  }
});

リソース

• 公式ドキュメント
• GitHubリポジトリ
• 実装例

注意事項

• 実装例はテンプレートとして使用し、本番環境では適切なセキュリティ対策を実施すること
• エラーハンドリングを適切に実装すること
• ファイルアクセスなどは適切に制限すること