Skip to content

Instantly share code, notes, and snippets.

@mizchi
Created June 28, 2025 09:09
Show Gist options
  • Save mizchi/dd58e0586291cba7c834582941c94396 to your computer and use it in GitHub Desktop.
Save mizchi/dd58e0586291cba7c834582941c94396 to your computer and use it in GitHub Desktop.
DXT (Desktop Extensions) の使い方 - MCPサーバーをClaude Desktopで使う最小実装ガイド

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}`);
  }
});

リソース

注意事項

  • 実装例はテンプレートとして使用し、本番環境では適切なセキュリティ対策を実施すること
  • エラーハンドリングを適切に実装すること
  • ファイルアクセスなどは適切に制限すること
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment