How to add MCP Servers to Claude Desktop with Docker MCP Toolkit

投稿日 10月 27, 2025

Claudeを会話型アシスタントから、ローカルマシンに触れることなく、安全、確実に実際に物 事を行う 開発パートナーに変えることができたらどうでしょうか?

Claude Desktopを探索し、実際の開発者ツールと接続する方法を疑問に思っているなら、 Docker MCP Toolkit はあなたが探していた欠けている部分です。

現実は次のとおりです: 今日の AI アシスタントは、概念の推論と説明に優れています。しかし、その知識に基づいて 行動 することになるとどうでしょうか?彼らは行き詰まっています。コンテナのデプロイ、リポジトリの管理、データの分析は、そのギャップを埋めるための信頼できるツールなしではできません。

そこで、Docker MCP Toolkit の出番です。

次のように考えてください。

  • クロード は推論エンジンであり、あなたが何を望んでいるのかを理解する脳です
  • Claude Desktop は、あなたのリクエストを実用的なコマンドに変える翻訳者です
  • Docker MCP Toolkit は、分離されたコンテナーでこれらのアクションを安全に実行する手です

これらが協力して、Claude を単に話すだけのものから、Docker の信頼できるセキュリティ強化されたワークフローを通じて、 あなたと一緒に構築するものに変えます。

このガイドでは、Claude DesktopをMCPクライアントとして設定し、Docker Desktopで実行されているMCPサーバーに接続し、実際の開発者タスクを安全かつ再現性よく自動化する方法を説明します。 

何時間 4 作業を 10 分に変えることができたらどうでしょうか?Stripe のチェックアウトページ、ダッシュボードコンポーネントなど、あらゆるアプリの UI のスクリーンショットを撮り、Claude がそれを Jest テスト、GitHub リポジトリ、デプロイを備えた、完全にテスト済みの本番環境対応の React コンポーネントとして再作成する様子を想像してみてください。それこそが、私たちが一緒に構築するものです

モデルコンテキストプロトコル(MCP)とは何ですか?

セットアップに入る前に、MCP が実際に何であるかを明確にしましょう。

画像12

モデルコンテキストプロトコル (MCP)は、ClaudeのようなAIエージェントがツール、API、サービスに接続する標準化された方法です。これにより、Claudeは会話を超えて、コンテナのデプロイ、データセットの分析、GitHubリポジトリの管理など、実際のアクションを実行できます。

要は: MCPは、Claudeの推論と開発者スタックの間の架け橋です。そしてDockerは?Docker は、それを安全にするためのガードレールを提供します。

Docker MCP ToolkitをClaude Desktopで使用する理由

私はしばらくの間 AI ツールを使ってきましたが、この Docker MCP セットアップは私が見た中で最も印象的なものの 1 つです。Docker MCP Toolkitは、ClaudeのインテリジェンスとDockerの信頼できる開発者ワークフローを橋渡しします。

Docker MCP Toolkitは、Claudeをツールに接続するだけでなく、Claudeがローカルマシンにリスクを与えることなく作業できる 安全なコンテナ化された環境 を作成します。すべてのアクションは、完了すると破棄される分離されたコンテナー内で行われます。混乱やセキュリティリスクがなく、完全な再現性があります。

接続すると、Claude DesktopはDockerの厳選された MCPサーバー を利用して、以前は一日の時間を費やしていた開発者のタスクを自動化できます。実際の様子は次のとおりです。

  • GitHub 統合: リポジトリを作成したり、コードをプッシュしたり、プル リクエストを確認したりしたいですか?クロードがあなたをサポートします。タブを頻繁に切り替える必要はもうありません。
  • Kubernetes管理:K8に興味があるなら(正直に言うと、最近は興味がない人はいないでしょうか?Claudeは、ポッドのデプロイ、サービスの管理、さらにはHelmチャートの処理もできます。
  • データ分析: CSV ファイルをアップロードして、Claude がそれを分析し、ビジュアライゼーションを作成し、必要だとさえ知らなかった洞察を提供するのを見てください。
  • ウェブスクレイピング: Firecrawl の統合により、Claude は Web サイトからデータを取得し、すべてフォーマットしてすぐに使用できる状態で戻すことができます。

ID 159 Cladue Desktop Flow Diagram Updates Option3

これらの各 MCP サーバーは、Docker Desktop の MCP Toolkit を使用して直接有効にできます。セットアップは簡単で、実行は安全で、結果は毎回再現可能です。

Docker MCP Toolkitを使用したClaude Desktopのセットアップ

前提 条件

開始する前に、次のものがあることを確認してください。

ステップ 1: Claude Desktopをインストールしてサインインする

まだダウンロードしていない場合は、 claude.ai/desktop にアクセスして、 Claude Desktop をダウンロードしてください。インストールは非常に簡単で、プロンプトに従うだけです。インストールしたら、Anthropic アカウントでサインインします。

ステップ 2: Docker MCP Toolkit を有効にする

Docker Desktop を開き、[設定] メニューから MCP Toolkit を有効にします。

画像4 5

ステップ 3.Claude DesktopをMCPクライアントとして接続する

Docker Desktopの左側のサイドバーにある「MCP Toolkit」をクリックし、Claude Desktopの下にある「接続」をクリックします。

Claudeデスクトップステップ 3

ステップ 4.MCP_DOCKER接続を確認する 

Claude Desktopを再起動し、Claude DesktopメニューにMCP_DOCKER接続が表示されることを確認します。

画像11

ステップ 5.Claudeの設定を見る

Claude 設定ファイルは、Claude > 設定 > 開発者 > 設定の編集 からアクセスclaude_desktop_config.json表示できます。

Claudeデスクトップステップ 6

「構成の編集」をクリックし、Visual Studio Code またはお好みの IDE で開きます。

仕組み

Claude Desktop を Docker MCP Toolkit に接続すると、次の設定が Claude Desktop のclaude_desktop_config.jsonファイルに追加されます。

Claudeデスクトップステップ 7

各パートの動作は次のとおりです。

  • mcpServers: Claude Desktopで利用可能なすべてのMCPサーバー接続を定義する親オブジェクト
  • "MCP_DOCKER": この接続の名前識別子。これは、Claude Desktopの設定とログで参照されるものです
  • "command": "docker": 実行コマンドとしてDocker CLIを使用するようにClaude Desktopに指示します。
  • "args": ["mcp", "gateway", "run"]: Docker に渡される引数で、実行中に変換されます。
$ docker mcp gateway run

これが実際に行うこと

Claude DesktopがMCPツールにアクセスする必要がある場合、docker mcp gateway runを実行します。

  1. Docker MCP ゲートウェイを起動します – これは中央ルーター/ブリッジとして機能します
  2. Claude Desktop(MCPクライアント)をDocker Desktopで有効なすべてのMCPサーバーに接続します。
  3. Claude → Gateway →適切な MCP サーバー→ Claude にツールリクエストをルーティングします。
  4. セキュリティと再現性のために、すべてを分離されたコンテナで実行します

簡単に言うと、次のようになります。

次のように考えてください。

  • Claude Desktop = あなたのAIアシスタント(クライアント)
  • Docker MCP ゲートウェイ = 交換機オペレーター (ルーター)
  • MCP サーバー = 実際のツール (GitHub、Firecrawl、Node.js Sandbox など)

この1つの設定行がすべての魔法を実現するものです - Claudeがコンテナ化された開発者ツールに安全にアクセスして実行できるようにするハンドシェイクです。

このファイルの場所:

  • macOS: ~/ライブラリ/アプリケーションサポート/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

手記: Docker Desktop の MCP クライアント設定で [接続] をクリックすると、この構成が自動的に追加されるため、手動で編集する必要はありません。

実際のデモ: スクリーンショットからデプロイされたアプリまで (テスト付き!)

Claude Desktopを Docker MCP Toolkitに接続したので、実際の例で実際の動作を見てみましょう。アプリのスクリーンショットを撮って、Claudeに動作するコードと完全なテストカバレッジで数分で再作成してもらうことができたらどうでしょうか?

問題を

現時点では、一般的なワークフローは次のようになります。

  • デザイナーがモックアップを作成する
  • 開発者はコードで手動で再構築します
  • QAはテストを書き、実行します
  • 動作するまで繰り返します

それは遅く、手動で、やり取りのギャップだらけです。

ソリューション

Claude Desktop + Docker MCP Toolkit は、3つのステップすべてを自動化します。スクリーンショットを提供すると、残りの分析、コード生成、テスト、デバッグ、デプロイなど、Claudeが処理します。

構築する内容

スクリーンショットからの機能的な React コンポーネント、以下が含まれます。

  • Jest単体テスト 
  • GitHubリポジトリ(基本構造)
  • 構成ファイル (package.json、babelrc.js、gitignore)
  • ダウンロード可能なファイル

注: これはコード基盤であり、本番環境のデプロイではありません。CI/CD、ライブデプロイメント、Playwrightテスト、または11y検証は含まれません。

ID 158 Update Claude Desktop blog image V2

デモのセットアップ

このデモンストレーションでは、5 つの MCP サーバーを使用します。

  • Firecrawl – スクリーンショットをキャプチャして分析します
  • Node.js Sandbox – テストの実行、依存関係のインストール、コードの検証 (分離されたコンテナー内)
  • GitHub – バージョン管理とデプロイを処理します
  • シーケンシャル思考 – 失敗したテストをデバッグし、コードを最適化します
  • コンテキスト7 – LLM および AI コード エディター向けのコード ドキュメントを提供します

ウォークスルー (ステップバイステップ)

フェーズ 1: スクリーンショットからコンポーネントへ

– スクリーンショットを提供し、Stripe チェックアウト ページ、ダッシュボード カードなど、必要な UI を何でも使用できます。

– Claudeは、レイアウトを分析し、コンポーネントを識別し、間隔を測定し、色をキャプチャし、デザインに一致するReact/Next.jsコンポーネントを生成します。

フェーズ 2: テストスイートの生成

– コンポーネント ロジックの Jest 単体テスト (レンダリング、インタラクション、フィルター、状態管理をカバーする41 テスト)。

フェーズ 3: Node.js Sandbox を使用した実行とデバッグ

ここで Docker が本当に輝きます

– Node.js Sandbox MCP は、分離されたコンテナをスピンアップし、すべての依存関係を安全にインストールし、テストスイートを実行します。

– すべてはサンドボックス環境で行われます。ローカルマシンには何も触れません。

– テストが不合格になった場合?シーケンシャルシンキングが始まります。Claudeは反復処理を行い、コードを修正し、 新しい コンテナを起動し、テストを再度実行します。すべてが通過するまで、このループを繰り返します。

フェーズ 4: GitHub へのデプロイ

テストが緑色になったら:

– Claudeは、適切な構造を持つGitHubリポジトリを作成します。

– コードをプッシュします

結果: 

  • 以前は: UI のスクリーンショット
  • 後: 完全にテストされ、デプロイされ、本番環境に対応したコンポーネント

節約された時間: 以前は 4 時間かかっていたものが、今では 10 分で完了します。

なぜこれが重要なのか

  1. セキュリティ第一
    コードは、マシン上ではなく、分離されたコンテナーで実行されます。悪意のあるコードがシステムに影響を与えるリスクはありません。すべての実行には監査証跡があります。
  2. 再生可能性
    同じDockerイメージ=毎回同じ結果。自分のマシン、チームメイトのマシン、CI/CD で動作します。「私のマシンで動作する」という言い訳はもうありません。
  3. スピード+安全性
    潜在的に危険な AI 生成コードを恐れることなくテストします。分離された環境で迅速に反復します。何かが壊れた場合はすぐにロールバックします。
  4. 可視
    何がどこで実行されているかを正確に確認します。Docker Desktop でリソースの使用状況を監視します。完全なログとデバッグ機能にアクセスします。

MCP サーバーの構成

Docker MCP ToolkitがすでにClaude Desktopで設定されていると仮定して、以下の手順に従ってMCPサーバーを設定し、追加します。 

「MCP Toolkit」をクリックし、「カタログ」を選択すると、以下のMCPサーバーを検索し、1つずつ追加します。

  • Firecrawl (Web スクレイピング、スクリーンショット)
  • GitHub Official (リポジトリ管理、PR、課題、コミット)
  • シーケンシャルシンキング(体系的な問題解決)
  • コンテキスト7 (LLMおよびコードエディタ用の最新のコードドキュメント)

手記:

Node.js Sandbox MCP サーバーは、/var/run/docker.sock をマウントすることで Docker-out-of-Docker (DooD) パターンを実装します。サンドボックスコンテナに完全なDockerデーモンAPIアクセスを許可します。これにより、コード実行用の一時的な兄弟コンテナを生成できます – ClaudeがJavaScriptの実行を要求すると、サンドボックスコンテナはDocker API呼び出しを行いNode.js、リソース制限(512MB RAM、 0.75CPU コア) はコードを分離して実行し、コンテナーを自動削除します。

Docker ソケット マウントは、権限昇格ベクトル (ルート レベルのホスト アクセスを効果的に許可します) ですが、真の Docker-in-Docker のオーバーヘッドなしで動的なコンテナー オーケストレーションを可能にします。ファイルはボリュームマウントによって~/Desktop/sandbox-outputに永続化され、実行コンテナ内の/rootにマップされます。このアーキテクチャは、セキュリティと柔軟性を交換しており、ローカル開発には許容できますが、Docker Scoutの脆弱性スキャンと本番環境での使用には慎重な検討が必要です。したがって、Claude設定ファイル Node.js Sandbox MCPサーバー用の別のエントリが必要になります。構成方法については、この記事の後半で説明します。

画像8 2

Firecrawl MCP サーバーの設定

Firecrawl MCPサーバーは、Claude Desktopに強力なウェブスクレイピングと検索機能を追加する機能を提供します。Firecrawl MCP サーバーをセットアップするには、 https://www.firecrawl.dev/app/api-keys 経由で Firecrawl API キーが必要です。https://www.firecrawl.dev/ にアクセスしている場合は、新しいアカウントを作成してくださいポータルを初めて。左側のサイドバーの「APIキー」をクリックして、新しいAPIキーを作成します。

ファイアクロール API

Docker Desktopの場合:

  1. Docker DesktopMCP ToolkitCatalogを開きます
  2. 「Firecrawl」で検索
  3. 検索結果で Firecrawl を見つける
  4. 構成の選択
  5. 前に作成した Firecrawl API キー (firecrawl.api_key) を追加する
  6. 他のすべてのエントリは空白のままにします
  7. [サーバーの保存と追加] をクリックします。
ファイアクロールの秘密

Firecrawl MCPサーバーは、Docker MCP Toolkitの「マイサーバー」に表示されます。

あなたが得るもの:

  • 6+ Firecrawl ツールには以下が含まれます。
    • firecrawl_check_crawl_status – クロールジョブのステータスを確認します。
    • firecrawl_crawl – Web サイトでクロールジョブを開始し、すべてのページからコンテンツを抽出します。
    • firecrawl_map – Web サイトをマッピングして、サイト上のインデックスに登録されているすべての URL を検出します
    • firecrawl_extract – LLM 機能を使用して Web ページから構造化情報を抽出します。
    • firecrawl_scrape - 高度なオプションを使用して単一の URL からコンテンツをスクレイピングします。
    • firecrawl_search – Web を検索し、必要に応じて検索結果からコンテンツを抽出します。

GitHub Official MCP Server の構成

GitHub MCPを使用すると、Claude Desktopはユーザーに代わって課題、PRを作成し、リポジトリを管理できます。

オプション 1: OAuth 認証 (推奨 – 最も簡単)

  1. MCP ToolkitCatalog で、「GitHub Official」を検索します。
  2. [+ 追加] をクリックします。
  3. Docker Desktop の [OAuth ] タブに移動します
  4. GitHub エントリを見つける
  5. 「承認」をクリックします。
  6. ブラウザーで GitHub の承認ページが開きます
  7. GitHubの 「Authorize Docker」 をクリックします。
  8. Docker Desktop にリダイレクトされます
  9. [カタログ] タブに戻り、GitHub Official を見つけます。
  10. [サーバーの開始] をクリックします。

GitHub MCPのセットアップ

利: トークンを手動で作成する必要はありません。承認は、トークンの自動更新を備えた GitHub の安全な OAuth フローを通じて行われます。

オプション 2: 個人用アクセストークン(きめ細かな制御用)

手動制御を希望する場合、または特定のスコープが必要な場合:

ステップ 1: GitHub Personal Access Token を作成する

  1. https://github.com に移動 そしてサインイン
  2. プロフィール写真設定をクリックします
  3. 左側のサイドバーの 「開発者設定」 までスクロールします
  4. 「個人用アクセストークン」「トークン(クラシック)」をクリックします。
  5. 「新しいトークンの生成」「新しいトークンの生成(クラシック)」をクリックします。
  6. Docker MCP Browser Testing」という名前を付けます。
  7. スコープを選択します。
    • repo (リポジトリのフルコントロール)
    • ワークフロー (GitHub Actions ワークフローの更新)
  8. 「トークンの生成」をクリックします
  9. トークンをすぐにコピーします (二度と表示されません!

ステップ 2: Docker Desktop で構成する

  1. MCP ToolkitCatalog で、GitHub Official
  2. [ + 追加 ] をクリックします (まだ追加していない場合)
  3. [ 構成 ] タブに移動します
  4. 認証方法として 「個人用アクセストークン」 を選択します
  5. トークンを貼り付ける
  6. [サーバーの開始] をクリックします。

またはCLI経由で:

docker mcp secret set GITHUB.PERSONAL_ACCESS_TOKEN=github_pat_YOUR_TOKEN_HERE

Sequential Thinking MCP サーバーの設定

Sequential Thinking MCPサーバーは、思考シーケンスを通じて動的で内省的な問題解決をClaude Desktopに提供します。Sequential Thinking MCPサーバーの追加は簡単で、APIキーは必要ありません。カタログで Sequential Thinking を検索して、MCP サーバー リストに取得するだけです。

Docker Desktopの場合:

  1. Docker DesktopMCP ToolkitCatalogを開きます
  2. 「シーケンシャルシンキング」で検索する
  3. 結果からシー ケンシャル思考 を見つける
  4. 「MCPサーバーの追加」をクリックして、設定なしで追加します

Sequential Thinking MCP MCPサーバーは、Docker MCP Toolkitの「マイサーバー」の下に表示されます。

あなたが得るもの:

  • 以下を含む単一のシーケンシャル思考ツール :
    • シーケンシャルシンキング – 思考を通じて動的かつ内省的な問題解決のための詳細なツール。このツールは、適応して進化できる柔軟な思考プロセスを通じて問題を分析するのに役立ちます。それぞれの考えは、理解が深まるにつれて、以前の洞察に基づいて構築したり、疑問を投げかけたり、修正したりすることができます。
シーケンシャル Thinkign セットアップ

サンドボックスMCPサーバー Node.js構成

Node.js Sandbox MCPにより、Claude Desktopは使い捨てのDockerコンテナを起動して任意のJavaScriptを実行できます。Claude Desktopに追加するには、Claude Desktop設定ファイルの内容を次のJSON構造に置き換えます。この設定は、特定のディレクトリにアクセスできる Node.js サンドボックスを起動するようにClaude Desktopに指示します。

{
  "mcpServers": {
    "MCP_DOCKER": {
      "command": "docker",
      "args": ["mcp", "gateway", "run"]
    },
    "node-code-sandbox": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-v",
        "/var/run/docker.sock:/var/run/docker.sock",
        "-v",
        "/Users/YOUR_USERNAME/Desktop/sandbox-output:/root",
        "mcp/node-code-sandbox"
      ],
      "env": {
        "FILES_DIR": "/root",
        "SANDBOX_MEMORY_LIMIT": "512m",
        "SANDBOX_CPU_LIMIT": "0.75"
      }
    }
  }
}


Claude Desktopを再起動する前に、ローカルシステムに/Users/YOUR_USERNAME/Desktop/sandout-outputディレクトリが存在し、このディレクトリがDocker Desktop>設定>リソース>ファイル共有を介してコンテナで利用可能になっていることを確認してください。

ローカル MCP サーバー

あなたが得るもの:

  • 7 ノード.jsサンドボックスツールには以下が含まれます。
    • get_dependency_types – npmパッケージ名(およびオプションのバージョン)の配列が与えられた場合、各パッケージが独自のTypeScript定義を出荷しているか、対応する@types/...package を作成し、生の.d.tsテキストを返します。なじみのない依存関係に対してNode.jsスクリプトを実行しようとしていて、それが公開する API と型を調べたい場合に便利です。
    • run_js- npm 依存関係をインストールし、実行中のサンドボックス コンテナ内で JavaScript コードを実行します。
    • run_js_ephermeral – オプションの npm 依存関係を持つ一時的な使い捨てコンテナで JavaScript スニペットを実行し、自動的にクリーンアップします。
    • sandbox_exe – 実行中のサンドボックスコンテナ内で 1 つ以上のシェルコマンドを実行します。事前に初期化されたサンドボックスが必要です。
    • sandbox_initialize – Node.jsを実行している新しい分離された Docker コンテナーを開始します。複数のコマンドとスクリプトのサンドボックスセッションを設定するために使用します。
    • sandbox_stop – 実行中のサンドボックスコンテナを終了して削除します。sandbox_initializeで初期化されたサンドボックスでの作業を終了した後に呼び出す必要があります。
    • search_npm_packages – 検索語で npm パッケージを検索し、名前、説明、README スニペットを取得します。

MCP サーバ7 コンテキストの設定

Context7 MCPにより、Claude DesktopはLLMやAIコードエディタの最新かつ最新のコードドキュメントにアクセスできます。MCP サーバー7 コンテキストの追加は簡単です。APIキーは必要ありません。カタログでコンテキスト7 を検索し、MCPサーバーリストに追加するだけです。

Docker Desktopの場合:

  1. Docker DesktopMCP ToolkitCatalogを開きます
  2. 「Context7」を検索します。
  3. 結果でコンテキスト7を見つける
  4. 「MCPサーバーの追加」をクリックして、設定なしで追加します
コンテキスト 7

コンテキスト7 MCPサーバーが、Docker MCP Toolkitの「マイサーバー」に表示されるようになりました

あなたが得るもの:

  • 2 以下を含むコンテキスト7ツール:
    • get-library-docs – ライブラリの最新のドキュメントを取得します。
    • resolve-library-id – パッケージ/製品名を Context7互換ライブラリ ID に解決し、一致するライブラリのリストを返します。 

Claude Desktopで利用可能なツールを確認する

すべてのMCPサーバーを追加したら、「切断」と「接続」をクリックして、MCP_DOCKERの下にさまざまなMCPツールが表示されます。

クロード
Claudeのすべてのツール

それです。MCP サーバーとツールとの対話を開始します。

試してみよう

プロンプト 1:

I'm going to upload a screenshot of a UI component. Please execute this complete workflow using all available MCP tools: 

PHASE 0: STRATEGIC PLANNING Sequential Thinking to: 

1. Analyze what type of component this appears to be 
2. Determine what research and documentation we'll need 
3. Plan the component architecture and structure 
4. Identify testing requirements and edge cases 
5. Create a step-by-step implementation strategy 
6. Estimate the number of tests needed for full coverage 

PHASE 1: DESIGN RESEARCH 

Use Firecrawl to analyze the screenshot and extract: 
- Complete color palette (hex values) 
- All spacing and padding measurements 
- Typography specifications (font family, sizes, weights) - Layout structure (grid, flexbox patterns) 
- Component boundaries and hierarchy 
- Interactive elements (buttons, inputs, dropdowns) 

PHASE 2: DOCUMENTATION RESEARCH 

Use Context7 to fetch the latest documentation for: 
- React (latest hooks patterns and best practices) 
- Next.js (if applicable 
- Jest (current testing patterns and matchers) 
- React Testing Library (current query methods and best practices) 
- Lucide React or any icon library needed 
- Any other libraries identified in the planning phase 

PHASE 3: CODE GENERATION 

Based on the research from Phases 0-2, generate: 
1. A React/Next.js component that: 
   - Uses exact colors and spacing from Firecrawl analysis 
   - Follows current best practices from Context7 docs 
   - Implements the architecture from Sequential Thinking plan 
   - Includes proper TypeScript types 
   - Has clean, readable, production-ready code '

2. Complete project structure: 
- package.json with correct dependencies 
- babel.config.js for Jest 
- .gitignore 
- README.md with setup instructions 

PHASE 4: COMPREHENSIVE TESTING 

Generate Jest + React Testing Library tests covering: 
- Component rendering (all variants) 
- User interactions (clicks, inputs, selections) 
- State management and updates 
- Edge cases (empty states, loading, errors) 
- Accessibility (ARIA roles, keyboard navigation) 
- Props validation and defaults 

Follow current best practices from Context7 documentation. Aim for the test count estimated in Phase 0. 

PHASE 5: VALIDATION & DEBUGGING 

Use Node.js Sandbox to: 
1. Install all dependencies in isolated container 
2. Run the complete test suite 
3. Capture all output and results 

If ANY tests fail: 
- Use Sequential Thinking to: 
   * Analyze the error messages 
   * Generate 3 hypotheses for root cause 
   * Rank hypotheses by likelihood 
   * Test hypothesis 1 with a fix 
   * Re-run in Node.js Sandbox 
   * If still failing, move to hypothesis #2 
   * Continue until all tests pass 

If tests need clarification on errors: 
  - Use Context7 to look up specific error messages or API changes 

スクリーンショットを アップロード してください

画像3 5

Claude Desktopの応答は次のとおりです。

I'll execute this comprehensive workflow step-by-step using all available MCP tools. Let me start by analyzing the uploaded screenshot and planning our approach.
PHASE 0: STRATEGIC PLANNING
Let me use Sequential Thinking to analyze this component and create a comphrenesive implementation strategy.
Perfect! I've completed the strategic planning. Now let's move to Phase 1.
PHASE 1: DESIGN RESEARCH

For Phase 1, I'll use Firecrawl to scrape the uploaded image and extract visual specifications. However, Firecrawl is designed for web scraping, not image analysis. I should use the image directly for visual analysis and describe what I see.
..

PHASE 2: DOCUMENTATION RESEARCH
Now let me fetch the latest documentation using Context7:
...
Now let me fetch React Testing Library documentation:...
I'll use /websites/testing-library_com-docs as it has the most code snippets (565) and comprehensive documentation.
Perfect! I have enough documentation. Now let's proceed to PHASE 3: CODE GENERATION
...
Perfect! Now let's move to PHASE 6: DEPLOYMENT. Let me create a GitHub repository
..

Now let's proceed with PHASE 4: COMPREHENSIVE TESTING. I'll create comprehensive test files for all components:
...
Now I'll create comprehensive tests for the resource library component based on the screenshot. Let me generate a complete test suite.
...
Excellent progress! CSS issue resolved - 35 of 41 tests now passing! Let me analyze the remaining 6 failures:

BUG IDENTIFIED: Type Filter Mismatch
Problem: Type filter keys don't match resource.type values:
Filter keys: 'Infographics', 'Videos', 'White Papers' (plural/different)
Resource types: 'Infographic', 'Video', 'White Paper' (singular/different)
Fixing the component:
SUCCESS! ALL 41 TESTS PASSING!
Test Suites: 1 passed, 1 total
Tests:       41 passed, 41 total
Time:        3.046 s
..
Due to character limits, let me push the updated files more efficiently. Since all tests pass locally, let me commit the fixes...

数分以内に、Claudeは次のことを行います。 

  • 設計の解析 
  • コンポーネントを生成する 
  • 包括的なテストを作成する 
  • 分離された Docker コンテナーで実行する 
  • 障害をデバッグする 
  • ライブ リポジトリ リンクを使用して最終コードを GitHub にプッシュする
画像7 3

画像5 3

結果の例: https://github.com/ajeetraina/resources-browser-component

画像13

Sandbox コンテナー Node.js Docker Dashboard を使用して実行されているかどうかを確認できるはずです。ログには、MCP (Model Context Protocol) サーバーが Docker コンテナ内で正常に初期化されていることが示されています。コンテナーは、 1 時間非アクティブ状態が続くと自動的にクリーンアップされるスカベンジャー プロセスを開始します ( 60 秒ごとにチェックします)。次に、MCP プロトコル 2025-06-18 およびサーバー バージョン 1をサポートすることをアナウンスするハンドシェイクを実行します。3。0。

クレイジー・ロザリン

サーバーは、JavaScript を実行するための 7 ツールを登録します。 

  • sandbox_initialize (永続コンテナの作成)、 
  • sandbox_exec (シェルコマンドを実行する)、 
  • run_js (永続コンテナでJSを実行する)、 
  • run_js_ephemeral (自動クリーンアップ機能付きワンショット JS)、 
  • sandbox_stop (クリーンアップ)、 
  • get_dependency_types (TypeScript 定義のフェッチ)、および 
  • search_npm_packages (npm レジストリを検索)。 

JavaScript を実行するすべてのツールには ESModules 構文が必要で、./filesファイルの永続性のためのディレクトリ。サーバーは完全に動作し、コードを実行する準備ができています。 

まとめ

Docker MCP ToolkitがClaude Desktopをチャットアシスタントから本物の開発パートナーに変える様子を目の当たりにしました。

設計の分析、コードの作成、テストの作成、失敗のデバッグ、リポジトリの設定など、以前は何時間もの手作業が必要でしたが、今では 1 つのプロンプトで数分で完了します。

これは、AI 支援開発の新しいパラダイムです。もうAIだけを使っているわけではありません。安全で再現性があり、本番環境に対応した方法で コラボレーション しています。

試してみる準備はできましたか?Docker Desktop を開いて MCP Toolkit の使用を開始します (自動的に起動するには v4.48 以降が必要です)。

さらに詳しく

投稿カテゴリ

関連記事