🐕

MCP Server 用 dxt の作成 とインストール手順

に公開
Model Context Protocol
dxt
tech

今日は Anthropic が新たに提供した MCP Server のインストールを簡略化させるDesktop Extensions (DXT)の作成と Claude Desktop へのインストール手順を纏めます。

Desktop Extensions (DXT) とは

MCP Serverには大きくSTDIO型とHTTP型が存在しています。
STDIO型とはMCP Clientがアクセス可能なローカルにjsやpyなどのスクリプトを配置しClaude Desktop用configファイルがそれを読みとる方式です。
例えばTypeScriptで配布されるMCP Serverの場合このような構造をローカルでまず展開します。

その後以下のconfigファイルをClaude Desktopに設定することで起動できるようになります。

{
  "mcpServers": {
      "weather": {
          "command": "node",
          "args": [
              "C:\\Users\\h-kameda\\dxt\\build\\index.js"
          ]
      }
  }
}

非ITエンジニアにとってこの手動での組み込み作業は難易度が高く、よりシンプルな導入方法が求められていました。その解決策として登場したのが Desktop Extensions（DXT）です。
https://github.com/anthropics/dxt

拡張子こそ.dxtですが中身はZIPファイルです。

通常のMCP Serverが動作する環境に加えてmanifestというファイルが含まれています。

{
  "dxt_version": "0.1",
  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "author": {
    "name": "test"
  },
  "server": {
    "type": "node",
    "entry_point": "build/index.js",
    "mcp_config": {
      "command": "node",
      "args": [
        "${__dirname}/build/index.js"
      ],
      "env": {}
    }
  },
  "license": "MIT"
}

これは従来Claude DesktopへのMCP Server組み込みに使用していたconfigファイルと中身はほぼ同じでそれのdxt版となります。

つまりdxtファイルとは、専用の設定ファイル(manifest.json)を作成しそれをZIP化したものです。

さっそくやってみる

1.環境準備

まずは以下の手順を参考にMCP ServerがClaudeDeskotpで呼び出せるところまで作業を行います。
https://zenn.dev/kameoncloud/articles/7b663daf3c4fad
これらの手順は、dxtファイルを自作する場合に必要です。既に配布されたdxtファイルを使うだけであれば、この準備は不要です。

2. dxt パッケージの作成

dxtを作成するツールをインストールします。

npm install -g @anthropic-ai/dxt

次にプロジェクトの初期化を行います。入力項目が多いのですがほとんどはそのままデフォルトで問題ありません。Descriptionのみ何かを入力しないと進まないため適当な文字で埋めておきます。

dxt init

✔ manifest.json already exists. Overwrite? yes
This utility will help you create a manifest.json file for your DXT extension.
Press ^C at any time to quit.

✔ Extension name: dxt
✔ Author name: test
✔ Display name (optional): dxt
✔ Version: 1.0.0
✔ Description: test
✔ Add a detailed long description? no
✔ Author email (optional):
✔ Author URL (optional):
✔ Homepage URL (optional):
✔ Documentation URL (optional):
✔ Support URL (optional):
✔ Icon file path (optional, relative to manifest):
✔ Add screenshots? no
✔ Server type: Node.js
✔ Entry point: build/index.js
✔ Does your MCP Server provide tools you want to advertise (optional)? no
✔ Does your MCP Server provide prompts you want to advertise (optional)? no
✔ Add compatibility constraints? no
✔ Add user-configurable options? no
✔ Keywords (comma-separated, optional):
✔ License: MIT
✔ Add repository information? no

Created manifest.json at C:\Users\h-kameda\dxt\manifest.json

Next steps:
1. Ensure all your production dependencies are in this directory
2. Run 'dxt pack' to create your .dxt file

作成が完了するとmanifest.jsonが作成されます。

{
  "dxt_version": "0.1",
  "name": "dxt",
  "version": "1.0.0",
  "description": "test",
  "author": {
    "name": "test"
  },
  "server": {
    "type": "node",
    "entry_point": "build/index.js",
    "mcp_config": {
      "command": "node",
      "args": [
        "${__dirname}/build/index.js"
      ],
      "env": {}
    }
  },
  "license": "MIT"
}

dxt validate manifest.jsonを実行して検証が行えます。自動作成された場合は不要ですが、手で修正を行った場合などに便利です。

では最後にパッキングです。

dxt pack

<snip>
Archive Details
name: dxt
version: 1.0.0
filename: dxt-1.0.0.dxt
package size: 11.8MB
unpacked size: 32.4MB
shasum: 184dd8099cb2fb094f9159935a2620bf6f088a98
total files: 1469
ignored (.dxtignore) files: 807

Output: C:\Users\h-kameda\dxt\dxt.dxt

作成された dxt.dxt はZIP形式のファイルなので、拡張子を .zip に変更することで内容を直接確認できます。

3. Claude Desktop への組み込み

Settingsを開きます。

Extensionsを選びAdvanced Settingsを選択します。

Install Extentionをクリックします。

先ほど作成されたdxtを選択してInstallをクリックすれば完了です。

もともと有効化されているweatherを無効化してアメリカの天気を問い合わせれば動作確認ができます。

途中MCPを利用してよいか確認が求められます。

4.dxt の中身

dxtファイルを解凍すると以下の通りとなっています。

dxt の tree構造

C:.
├─build
├─node_modules
│ ├─@modelcontextprotocol
│ │ └─sdk
│ │ └─dist
│ │ ├─cjs
│ │ │ ├─client
│ │ │ ├─examples
│ │ │ │ ├─client
│ │ │ │ ├─server
│ │ │ │ └─shared
│ │ │ ├─server
│ │ │ │ └─auth
│ │ │ │ ├─handlers
│ │ │ │ ├─middleware
│ │ │ │ └─providers
│ │ │ └─shared
│ │ └─esm
│ │ ├─client
│ │ ├─examples
│ │ │ ├─client
│ │ │ ├─server
│ │ │ └─shared
│ │ ├─server
│ │ │ └─auth
│ │ │ ├─handlers
│ │ │ ├─middleware
│ │ │ └─providers
│ │ └─shared
│ ├─@types
│ │ └─node
│ ├─accepts
│ ├─ajv
│ │ ├─dist
│ │ ├─lib
│ │ │ ├─compile
│ │ │ ├─dot
│ │ │ ├─dotjs
│ │ │ └─refs
│ │ └─scripts
│ ├─body-parser
│ │ └─lib
│ │ └─types
│ ├─bytes
│ ├─call-bind-apply-helpers
│ │ ├─.github
│ │ └─test
│ ├─call-bound
│ │ ├─.github
│ │ └─test
│ ├─content-disposition
│ ├─content-type
│ ├─cookie
│ ├─cookie-signature
│ ├─cors
│ │ └─lib
│ ├─cross-spawn
│ │ └─lib
│ │ └─util
│ ├─debug
│ │ └─src
│ ├─depd
│ │ └─lib
│ │ └─browser
│ ├─dunder-proto
│ │ ├─.github
│ │ └─test
│ ├─ee-first
│ ├─encodeurl
│ ├─es-define-property
│ │ ├─.github
│ │ └─test
│ ├─es-errors
│ │ ├─.github
│ │ └─test
│ ├─es-object-atoms
│ │ ├─.github
│ │ └─test
│ ├─escape-html
│ ├─etag
│ ├─eventsource
│ │ ├─dist
│ │ └─src
│ ├─eventsource-parser
│ │ ├─dist
│ │ └─src
│ ├─express
│ │ └─lib
│ ├─express-rate-limit
│ │ └─dist
│ ├─fast-deep-equal
│ │ └─es6
│ ├─fast-json-stable-stringify
│ │ ├─.github
│ │ ├─benchmark
│ │ ├─example
│ │ └─test
│ ├─finalhandler
│ ├─forwarded
│ ├─fresh
│ ├─function-bind
│ │ ├─.github
│ │ └─test
│ ├─get-intrinsic
│ │ ├─.github
│ │ └─test
│ ├─get-proto
│ │ ├─.github
│ │ └─test
│ ├─gopd
│ │ ├─.github
│ │ └─test
│ ├─has-symbols
│ │ ├─.github
│ │ └─test
│ │ └─shams
│ ├─hasown
│ │ └─.github
│ ├─http-errors
│ │ └─node_modules
│ │ └─statuses
│ ├─iconv-lite
│ │ ├─.github
│ │ ├─.idea
│ │ │ ├─codeStyles
│ │ │ └─inspectionProfiles
│ │ ├─encodings
│ │ │ └─tables
│ │ └─lib
│ ├─inherits
│ ├─ipaddr.js
│ │ └─lib
│ ├─is-promise
│ ├─isexe
│ │ └─test
│ ├─json-schema-traverse
│ │ └─spec
│ │ └─fixtures
│ ├─math-intrinsics
│ │ ├─.github
│ │ ├─constants
│ │ └─test
│ ├─media-typer
│ ├─merge-descriptors
│ ├─mime-db
│ ├─mime-types
│ ├─ms
│ ├─negotiator
│ │ └─lib
│ ├─object-assign
│ ├─object-inspect
│ │ ├─.github
│ │ ├─example
│ │ └─test
│ │ └─browser
│ ├─on-finished
│ ├─once
│ ├─parseurl
│ ├─path-key
│ ├─path-to-regexp
│ │ └─dist
│ ├─pkce-challenge
│ │ └─dist
│ ├─proxy-addr
│ ├─punycode
│ ├─qs
│ │ ├─.github
│ │ ├─dist
│ │ ├─lib
│ │ └─test
│ ├─range-parser
│ ├─raw-body
│ ├─router
│ │ └─lib
│ ├─safe-buffer
│ ├─safer-buffer
│ ├─send
│ ├─serve-static
│ ├─setprototypeof
│ │ └─test
│ ├─shebang-command
│ ├─shebang-regex
│ ├─side-channel
│ │ ├─.github
│ │ └─test
│ ├─side-channel-list
│ │ ├─.github
│ │ └─test
│ ├─side-channel-map
│ │ ├─.github
│ │ └─test
│ ├─side-channel-weakmap
│ │ ├─.github
│ │ └─test
│ ├─statuses
│ ├─toidentifier
│ ├─type-is
│ ├─typescript
│ │ ├─bin
│ │ └─lib
│ │ ├─cs
│ │ ├─de
│ │ ├─es
│ │ ├─fr
│ │ ├─it
│ │ ├─ja
│ │ ├─ko
│ │ ├─pl
│ │ ├─pt-br
│ │ ├─ru
│ │ ├─tr
│ │ ├─zh-cn
│ │ └─zh-tw
│ ├─undici-types
│ ├─unpipe
│ ├─uri-js
│ │ └─dist
│ │ ├─es5
│ │ └─esnext
│ │ └─schemes
│ ├─vary
│ ├─which
│ │ └─bin
│ ├─wrappy
│ ├─zod
│ │ ├─src
│ │ │ ├─v3
│ │ │ │ ├─benchmarks
│ │ │ │ ├─helpers
│ │ │ │ ├─locales
│ │ │ │ └─tests
│ │ │ ├─v4
│ │ │ │ ├─classic
│ │ │ │ │ └─tests
│ │ │ │ ├─core
│ │ │ │ │ └─tests
│ │ │ │ │ └─locales
│ │ │ │ ├─locales
│ │ │ │ └─mini
│ │ │ │ └─tests
│ │ │ └─v4-mini
│ │ ├─v3
│ │ │ ├─helpers
│ │ │ └─locales
│ │ ├─v4
│ │ │ ├─classic
│ │ │ ├─core
│ │ │ ├─locales
│ │ │ └─mini
│ │ └─v4-mini
│ └─zod-to-json-schema
│ ├─.github
│ └─dist
│ ├─cjs
│ │ └─parsers
│ └─esm
│ └─parsers
└─src

Node環境が丸々入っているため、ClaudeDesktopなどMCP Clientが実行される環境にNodeをインストールしていなくても動作するのがdxtのもう一つのメリットです。

Discussion