ローカル MCP サーバーを Desktop Extensions で便利に配布してみた

1 はじめに
2 構成概要
3 配布元 PC で基礎環境の構築（第１弾の環境復元）
4 配布元 PC で DXT ファイルを作成
5 配布先 PC で DXT ファイルからインストール
- 5.1 DXT ファイルの入手
- 5.2 DXT ファイルからインストール
6 まとめ

はじめに

こんにちは、サイオステクノロジーの小沼俊治です。
これまで、オリジナルの MCP サーバーを開発するノウハウを、以下の記事で公開してきました。

その第３弾として、2025年6月下旬に、ローカル MCP サーバーをパッケージングして手軽に配布できる「Desktop Extensions（以下、デスクトップ拡張、または DXT と略して表す）」の仕組みが公開されたので、その最新ノウハウを共有します。

ローカルMCPサーバーは、AIエージェントを自由に拡張できる非常に便利な機能です。しかし、これまでは開発ツールの準備や設定ファイルの編集など、インストールが複雑で IT リテラシーが高くないと導入が難しいという課題がありました。

今回の DXT の登場により、パッケージングされたローカル MCP サーバーは、マウスのクリックやドラッグ＆ドロップといった簡単な操作でデスクトップ拡張としてインストールできるようになります。これはMCPサーバーの普及を大きく加速させる画期的な仕組みであり、私自身も大変ワクワクしています！

本ハンズオンはローカル MCP サーバーを対象とするため、第１弾「オリジナルのちょっと便利な MCP サーバーを作ってみた」の続きとして解説を進めます。引き続き、MCP サーバーの実装には Node.js を使用します。

構成概要

筆者が動かした際の主な構成要素は以下の通りです。

DXT 配布元となるローカル MCP サーバーの開発 PC
- Windows 10 Professional
- Claude desktop for Windows version 0.11.6
- Windows PowerShell 5.1.19041.5737
- Node.js v22.15.0
DXT 配布先となるローカル MCP サーバーの利用 PC
- Windows 10 Professional
- Claude desktop for Windows version 0.11.6

ハンズオンを構成する環境は以下の通りです。

MCP ホストは、ローカル MCP サーバーを組み込める Claude desktop のネイティブアプリ版を利用します。
配布元 PC の構成における主な考慮事項は以下の通りです。
- MCP サーバーを稼働させる環境は Node.js 環境を選択しています。
- TypeScript で実装したソースコードのトランスパイルや、デスクトップ拡張としてパッケージングするため Node.js のインストールが必要です。
配布先 PC の構成における主な考慮事項は以下の通りです。
- デスクトップ拡張としてインストールした MCP サーバーの稼働には、Claude の組込み Node.js を利用できるため、別途 Node.js のインストールは不要です。

Claude にバンドルされた Node.js の利用について

TypeScript で実装して JavaScript にトランスパイルされたローカル MCP サーバーを動かす場合には、Claude にバンドルされた Node.js を利用できます。
デフォルトで有効になっていますが、Claude desktop 画面左上のハンバーガーメニュー（三本線）から「ファイル > 設定…」で表示した設定画面で、左ペインより「エクステンション」を選び、画面下部の「詳細設定」ボタンをクリックすると組み込み Node.js の有効状態が確認できます。

ハンズオンの手順でパッケージングするローカル MCP サーバーの設定ファイルやソースコードは、以下の GitHub リポジトリで公開しています。必要に応じてご活用ください。

hands-on-mcp-sios-apisl @ GitHub
- v1.0.0 : オリジナルのちょっと便利な MCP サーバーを実装

配布元 PC で基礎環境の構築（第１弾の環境復元）

以前の記事「オリジナルのちょっと便利な MCP サーバーを作ってみた」で開発したローカル MCP サーバーのソースコード等のリソースが手元にある場合には、本章はスキップして以下の章へ進んでください。

ローカル MCP サーバーを Desktop Extensions で便利に配布してみた | 配布元 PC で DXT ファイルを作成

Claude desktop for Windows インストール

MCP ホストに Web 版ではなくアプリ版の Claude desktop for Windows を利用するため、以下公式手順を参考に Windows PC へインストールします。

Claude for Desktopのインストール | Anthropicヘルプセンター

Node.js インストール

パッケージの作成に Node.js を必要とするため、以下手順を参考に Windows PC へインストールします。

初期環境構築: Node.js on Windows

デスクトップ拡張にするローカル MCP サーバーの用意

ローカル MCP サーバーのリソースを用意する方法は２通りあります。お使いの環境に合わせて、いずれかの方法でリポジトリを取得してください。

方法１：Git コマンドで取得する

Git がインストールされている場合は、以下のコマンドでリモートリポジトリをクローンします。

PS C:\Users\...\development> git clone https://github.com/Toshiharu-Konuma-sti/hands-on-mcp-sios-apisl.git -b v1.0.0

方法２：ブラウザでダウンロードする

Git がインストールされていない、またはコマンド操作に不慣れな場合は、ブラウザから GitHub の以下 URL にアクセスし、「Source code (zip)」をクリックして Zip ファイルを取得します。

Release v1.0.0 · Toshiharu-Konuma-sti/hands-on-mcp-sios-apisl

配布元 PC で DXT ファイルを作成

配布元 PC でローカル MCP サーバーをパッケージングして、デスクトップ拡張（DXT ファイル）として配布できるようにします。

デスクトップ拡張のパッケージ作成には dxt コマンドが必要ですが、通常、このコマンドをグローバルインストール（npm install -g @anthropic-ai/dxt）すると管理者権限やルート権限が求められます。
本ハンズオンでは管理者権限なしで dxt コマンドのパッケージを直接実行できる npx コマンドを使って進めます。

パッケージングするリソースの準備

デスクトップ拡張としてパッケージングするために、ローカル MCP サーバーが実行可能な状態にして、必要なリソースを準備します。

依存パッケージの準備

まず始めに、依存パッケージをダウンロードします。

PS C:\Users\...\hands-on-mcp-sios-apisl> npm install

次に、TypeScript から JavaScript のソースコードをトランスパイルして生成するため、ビルドを行います。

PS C:\Users\...\hands-on-mcp-sios-apisl> npm run build

アイコンの準備

アイコンの設定は必須ではありませんが、配布先の利用者にとって製品としての完成度が高まるため、設定をお勧めします。
今回は「FLAT ICON DESIGN -フラットアイコンデザイン-」様より、ローカル MCP サーバーの機能（天気予報）にちなんだアイコンを使用させていただきます。

天気のアイコン素材

用意したアイコンは、プロジェクトリポジトリの直下にimage\フォルダを作成し、その中に PNG 形式の画像ファイルとして保存します。

準備できた構成

ここまでの手順で、パッケージングに必要なソースコードや画像などのリソースが以下の構成で準備できたことを確認してください。これが整っていれば、いよいよデスクトップ拡張（DXT）を作成するパッケージング手順に進めます。

PS C:\Users\...\hands-on-mcp-sios-apisl> tree /f

C:.
│  .gitignore
│  LICENSE
│  package-lock.json
│  package.json
│  README.md
│  tsconfig.json
│
├─build
│  │  index.js
│  ├─interfaces
│  │      areaApi.js
│  └─services
│          areaWeatherForecast.js
├─image
│      f_f_traffic_4_s512_f_traffic_4_0bg.png
├─node_modules
│  ：
│ （省略）
│
└─src
    │  index.ts
    ├─interfaces
    │      areaApi.ts
    └─services
            areaWeatherForecast.ts

マニフェストの新規作成

dxt initコマンドを使うと、デスクトップ拡張のパッケージングに必要なmanifest.jsonファイルを対話形式で簡単に作成できます。以下のコマンドを実行してください。

PS C:\Users\...\hands-on-mcp-sios-apisl> npx @anthropic-ai/dxt init

This utility will help you create a manifest.json file for your DXT extension.
Press ^C at any time to quit.
✔ Extension name: hands-on-mcp-sios-apisl
✔ Author name: SIOS Technology, Inc. API Solution Service Line Devision.
✔ Display name (optional): The hands-on local MCP server
✔ Version: 1.0.0
✔ Description: A bit useful locat MCP server to check a weather!
✔ Add a detailed long description? no
✔ Author email (optional):
✔ Author URL (optional): https://api-ecosystem.sios.jp
✔ Homepage URL (optional): 
✔ Documentation URL (optional): https://tech-lab.sios.jp/archives/48129
✔ Support URL (optional):
✔ Icon file path (optional, relative to manifest): image/f_f_traffic_4_s512_f_traffic_4_0bg.png
✔ 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? yes
✔ Repository URL: git+https://github.com/Toshiharu-Konuma-sti/hands-on-mcp-sios-apisl.git

Created manifest.json at /home/hoge/handson/hands-on-mcp-sios-apisl/manifest.json

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

対話形式で入力する主要な項目とその内容は以下の通りです。
- Extension name: DXT のファイル名になります。
- Author name: 作成者名を入力します。
- Display name: デスクトップ拡張として表示される名称です。
- Description: 入力すると、デスクトップ拡張の名称の下に説明文として表示されます。
- Author URL: 入力すると、作成者が該当 URL へのリンクとなります。
- Icon file path: PNG 画像ファイルのパスを入力すると、デスクトップ拡張のアイコンを設定できます。
- Entry point: ローカル MCP サーバーのスクリプトファイルパスを入力します。

対話形式での入力が完了したら、manifest.jsonファイルができあがったことを確認します。

PS C:\Users\...\hands-on-mcp-sios-apisl> ls

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
 :
-a----        2025/07/01     10:47            705 manifest.json
 :

DXT ファイルの作成

いよいよ、ローカルMCPサーバーをパッケージ形式のデスクトップ拡張として作成します。プロジェクトのルートディレクトリで、以下のコマンドを実行します。

PS C:\Users\...\hands-on-mcp-sios-apisl> npx @anthropic-ai/dxt pack

Validating manifest...
Manifest is valid!
📦  hands-on-mcp-sios-apisl@1.0.0
Archive Contents
     27B BUILD.bat
   2.1kB build/index.js
         :
 110.9kB node_modules/zod-to-json-schema/dist/ [and 78 more files]
 509.2kB node_modules/zod/lib/ [and 25 more files]

Archive Details
name: hands-on-mcp-sios-apisl
version: 1.0.0
filename: hands-on-mcp-sios-apisl-1.0.0.dxt
package size: 5.0MB
unpacked size: 22.8MB
shasum: 04fc9aff3e343e1e0fa2afaf3a537ed51a71a09a
total files: 817
ignored (.dxtignore) files: 692
Output: C:\Users\...\hands-on-mcp-sios-apisl\hands-on-mcp-sios-apisl.dxt

コマンドの実行が成功したら、デスクトップ拡張ができあがったことを確認します。

PS C:\Users\...\hands-on-mcp-sios-apisl> ls

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
 :
-a----        2025/07/01     10:56        5282475 hands-on-mcp-sios-apisl.dxt
 :

できあがったパッケージ形式のデスクトップ拡張は、ウェブサイトで公開やクラウドのファイルサーバーで共有などを活用して利用者に配布します。