📦

10分で終わる！？既存MCPサーバーのDXT (Desktop Extensions) 化実践ガイド

2025/06/29に公開

npm

TouchDesigner

Model Context Protocol

Claude

dxt

tech

 最終成果物https://youtu.be/7N8AgcyCnOc?si=p31SLpHDQfwHqBaD&t=13

 なぜDXT化するのかMCP（Model Context Protocol）サーバーの開発と配布において、従来は複雑なセットアップ手順が大きな課題でした。開発者は詳細なインストール手順書を作成し、エンドユーザーは慎重な設定作業を強いられていました。
そんな中、Anthropic社が発表した DXT (Desktop Extensions) は、この状況を打破するかもと評判の仕様です。アプリケーションのインストーラのように、.dxt ファイルをダブルクリックするだけでMCPサーバーのインストールが完了する体験を提供することが可能となります。
本稿では、筆者が実際にTouchDesigner MCPをDXT化した実装体験を基に、DXT化の具体的な手順と遭遇した課題、そして公式ドキュメントには記載されていない npxで提供しているMCPサーバーのDXT提供手法について紹介します。
https://github.com/8beeeaaat/touchdesigner-mcp/pull/82

 TouchDesignerと非エンジニアユーザーの課題TouchDesignerはメディアアーティスト、VJ、インタラクティブデザイナーなど、必ずしもプログラミング経験が豊富でないクリエイター層も含めたユーザーも利用するアプリケーションです。

自由度が高い反面、その学習コストも高いため細々とMCPサーバーを開発しています。

https://zenn.dev/8beeeaaat/articles/c7651e8a1dd937
しかし、従来のMCPサーバーインストールには、ターミナルでのコマンド実行や、JSONファイルの手動編集、複雑な設定手順の理解などが必要で、実際にユーザーから課題として指摘されていました。

 非エンジニアにとっての導入ハードルの高さTouchDesigner MCPリポジトリへのGitHubのIssueやYouTubeコメントで、「インストール手順が分かりにくい」「設定が複雑すぎる」といったフィードバックが度々寄せられていました。
これを受けて解説動画も制作しましたが、それでも全ユーザーが理解できるとは言い難い状況でした。

「ターミナルって何？」という観点から説明が必要だったり、JSONファイルの編集でシンタックスエラーが発生するといったケースでつまずくユーザーさんもおり、導入ハードルが高すぎることが明らかでした。

https://www.youtube.com/watch?v=jFaUP1fYum0
また、AIエージェントやMCPのエコシステム自体が成長の過渡期であることからエージェントごとにMCPの設定ファイルが異なってサポートしきれない、といった問題もあります。
DXTによる 「ワンクリックインストール」 は、こうした非エンジニア層の実際の課題を解決する、極めて価値のある改善といえます。

 DXTの基本概念DXT（Desktop Extensions）は、MCPサーバーを標準化された形式で配布するためのオープンソース仕様です。

https://www.anthropic.com/engineering/desktop-extensions

 DXTの特徴DXTの基本構造は .dxtファイル = zipアーカイブ + manifest.json というシンプルなものです。これはChrome拡張やVS Code拡張と同様のアプローチで、既存の拡張システムと親和性が高い設計になっています。
Node.js、Python、バイナリ実行ファイルなど複数言語に対応しており、必要な依存関係も一緒にパッケージングして自動管理できます。

 従来の課題とDXTの解決策従来の課題
# 複雑なセットアップ手順
npm install -g touchdesigner-mcp
# Claude Desktopの設定ファイル編集
# 長いJSON設定の追加...
DXTでの解決
# ワンクリックインストール
touchdesigner-mcp.dxt をダウンロード → ダブルクリック → Claude Desktopで承認 → 完了
特にnpmで公開されているMCPサーバーの場合、DXT化において大きなメリットがあります（詳細は実装セクションで説明）。

 実際のDXT化プロセス
 環境準備公式ドキュメントを参照いただくのが最も確実なので割愛します。
https://github.com/anthropics/dxt/tree/main?tab=readme-ov-file#for-extension-developers

 DXT化の実装
 1. マニフェストの初期化# プロジェクトルートで実行
dxt init
対話形式でセットアップを進めると、このような基本的なmanifest.jsonが生成されます。
{
  "dxt_version": "0.1",
  "name": "touchdesigner-mcp-server",
  "version": "0.4.1",
  "description": "MCP server for TouchDesigner",
  "author": {
    "name": "8beeeaaat"
  },
  "server": {
    "type": "node",
    "entry_point": "dist/index.js",
    "mcp_config": {
      "command": "node",
      "args": [
        "${__dirname}/dist/index.js"
      ],
      "env": {}
    }
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/8beeeaaat/touchdesigner-mcp.git"
  }
}

 2. manifest.jsonの設定その後toolやpromptなどマニフェストの設定項目を細かく設定することになるのですが、ここで重要な発見がありました。
🚀【公式ドキュメント未記載】npxなら "args" 指定だけで完結する

通常のDXTマニフェスト では、mcp_config にMCPサーバーのエントリーファイルを指定する様になっているのですが、npxで利用可能なMCPサーバーの場合は以下の指定だけで完結します。
https://github.com/8beeeaaat/touchdesigner-mcp/blob/92ffb82b118a9046869c0c6c35a41396ccc9af18/manifest.json#L12-L28
npx を利用することで、DXT化のプロセスは劇的に簡素化されます。

依存関係の自動解決: node_modules を同梱する必要がなく、npmエコシステムがすべて管理してくれます。

ランタイム設定不要: 複雑なパス指定や実行環境の設定から解放されます。

manifest.jsonの極小化: 必要な記述は、サーバーがnpmパッケージ名であることを示す args の指定だけです。

 📦 npmエコシステムの活用による劇的なファイルサイズ軽量化npx利用のもう一つの重要な利点はファイルサイズの大幅削減です。
TouchDesigner MCPサーバーと同一リポジトリで開発しているため、そのまま何も考えずにpackするとDXTに内包する必要のない /node_modules やソースファイルもバンドルされてしまいます。

当初は manifest.json をリポジトリのルートに配置していたため、TouchDesigner MCPのソースコード全体がパッケージされ80MB以上の巨大ファイルになってしまいました。

一方、npx方式のパッケージングでは依存関係はnpmエコシステムに委任することで、最終的に1.5KBまで軽量化できました。
この劇的な軽量化により、ダウンロード時間が大幅に短縮され、ストレージ容量も節約でき、より快適な導入体験を提供できるようになりました。

 💡 究極の軽量化：「manifest.jsonだけあれば良い」.dxtignoreでの除外には限界があったため、最終的に別ディレクトリにmanifest.jsonだけを配置する方法で究極の軽量化を実現しました。
dxt/ディレクトリを作成してmanifest.jsonのみを配置し、以下のコマンドでパッケージングしています
npx @anthropic-ai/dxt pack dxt/ touchdesigner-mcp.dxt
https://github.com/8beeeaaat/touchdesigner-mcp/pull/87/files
結果：
📦  touchdesigner-mcp@0.1.1
Archive Contents
   3.9kB ../manifest.json

Archive Details
name: touchdesigner-mcp
version: 0.1.1
filename: touchdesigner-mcp-0.1.1.dxt
package size: 1.5kB
unpacked size: 3.9kB
total files: 1
ignored (.dxtignore) files: 0
manifest.jsonファイル1つだけをバンドルすることで、わずか1.5KBのDXTファイルを実現できました。

 CI/CDでのビルド自動化GitHub Actionsワークフローを更新し、リリース時に自動で.dxtファイルを生成・アップロードするよう設定しました。
実際の成果物はGitHub Releasesで確認できます。

touchdesigner-mcp.dxtファイルが自動生成・配布されています。

 遭遇した問題と解決策
 署名エラーの問題DXT化の過程で、最も大きな問題となったのが署名（signing）の不具合です。

 問題の詳細# 署名は成功と表示される
$ dxt sign touchdesigner-mcp.dxt
Successfully signed touchdesigner-mcp.dxt

# しかし検証で失敗する
$ dxt verify touchdesigner-mcp.dxt
ERROR: Extension is not signed
この問題は、自己署名証明書でも独自証明書でも同様に発生しました。
署名プロセス自体は完了するものの、検証時に署名が認識されないという問題で、DXTエコシステム全体に影響する可能性があるためIssueとして報告しました。
ひとまず無署名で頒布していますが、信頼性に関わるので早く解決したい...。

 DXT化の効果とメリット
 インストールの簡略化従来の手順：非エンジニアだと約10分〜？
# 1. グローバルインストール
npm install -g touchdesigner-mcp

# 2. Claude Desktop設定ファイルの編集
# ~/Library/Application Support/Claude/claude_desktop_config.json

# 3. 複雑なJSON設定の追加
{
  "mcpServers": {
    "touchdesigner-mcp": {
      "command": "npx",
      "args": ["touchdesigner-mcp"]
    }
  }
}

# 4. Claude Desktopの再起動
DXT導入後：1分以内
1. GitHub Releasesからtouchdesigner-mcp.dxtをダウンロード
2. Claude Desktopで.dxtファイルを開く
3. 完了！

 配布の標準化
 GitHub Releasesでの自動配布GitHub Actionsによりtouchdesigner-mcp.dxtファイルとtouchdesigner-mcp-td.zip（TouchDesigner用コンポーネント）が自動生成・配布されています。
https://github.com/8beeeaaat/touchdesigner-mcp/releases/latest

 エコシステムへの貢献TouchDesigner MCPサーバーのDXT化により、クリエイティブコーディング分野でのAI導入が促進され、DXT仕様の実用性を証明することができました。また、npmパッケージDXT化のベストプラクティス確立にも貢献できたと考えています。

 開発者体験の向上# 開発者：簡単なマニフェスト設定
{
  "command": "npx",
  "args": ["your-mcp-server"]
}

# ユーザー：ワンクリックインストール
# .dxtファイルをダブルクリック → 完了

 まとめ
 署名問題の解決待ち現在最大の課題は筆者が報告した署名検証の問題です。この問題が解決されれば、より安全な拡張配布が可能になり、エンタープライズ環境での採用促進やDXTエコシステム全体の信頼性向上につながると期待されます。（おま環だったらすみません...）

 DXTエコシステムの発展
 npmパッケージの優位性npmパッケージをDXT化する場合、manifest.jsonの簡素化とバイナリの軽量化が最大の利点で、"args": ["package-name"]だけで完了します。

 DXT化の敷居の低さ今回の経験から、MCPサーバーが既にnpmで公開されているなら、DXT化が驚くほど簡単 であることを確認できました。

プロジェクトでDXTを初期化

dxt init


manifest.jsonでnpxコマンドを指定

"args": ["your-package-name"] を追記


.dxtファイルを生成

dxt pack .

特にすでにnpmパッケージとして動作しているサーバーなら、設定ファイルの記述量も最小限で済むため、npxでMCPサーバーを公開している開発者の皆様も試してみる価値は十分にあると思います。

 TouchDesignerコミュニティでの普及TouchDesignerの主要ユーザーである非エンジニア層のクリエイターにとって、DXTは特に重要な意味を持ちます。

メディアアーティスト・VJにとって：技術的な設定作業なしでAI支援機能を活用可能

教育現場において：過去記事で紹介したような学習ハードルに加え、インストールの複雑さも解消

ライブパフォーマンス現場において：本番前の環境構築時間を大幅短縮

プロダクション環境において：技術者でなくても確実にツールを導入可能

 TouchDesigner MCPのDXT化を通じて得られた知見npmパッケージのDXT化は想像以上に簡単

ユーザー体験の劇的な改善（10分 → 1分以内）
署名問題は解決待ちだが、実用性は十分
公式ドキュメントにない実践的なTipsの発見
DXTは単なる新しい配布形式ではなく、MCPエコシステム全体を次のレベルに押し上げる革新的な仕様です。特にnpmで公開されているMCPサーバーにとって、DXT化は最小限の労力で最大限の効果を得られる施策と言えそうです。

今後もDXTエコシステムの発展と、より多くのMCPサーバーでのDXT対応に貢献していきたいと思います。

最終成果物

なぜDXT化するのか

TouchDesignerと非エンジニアユーザーの課題

非エンジニアにとっての導入ハードルの高さ

DXTの基本概念

DXTの特徴

従来の課題とDXTの解決策

実際のDXT化プロセス

環境準備

DXT化の実装

1. マニフェストの初期化

2. manifest.jsonの設定

📦 npmエコシステムの活用による劇的なファイルサイズ軽量化

💡 究極の軽量化：「manifest.jsonだけあれば良い」

CI/CDでのビルド自動化

遭遇した問題と解決策

署名エラーの問題

問題の詳細

DXT化の効果とメリット

インストールの簡略化

配布の標準化

GitHub Releasesでの自動配布

エコシステムへの貢献

開発者体験の向上

まとめ

署名問題の解決待ち

DXTエコシステムの発展

npmパッケージの優位性

DXT化の敷居の低さ

TouchDesignerコミュニティでの普及

TouchDesigner MCPのDXT化を通じて得られた知見

Discussion