{"id":2602,"date":"2025-10-15T13:13:31","date_gmt":"2025-10-15T13:13:31","guid":{"rendered":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2025\/10\/15\/how-to-add-mcp-servers-to-gemini-cli-with-docker-mcp-toolkit\/"},"modified":"2025-10-15T13:13:31","modified_gmt":"2025-10-15T13:13:31","slug":"how-to-add-mcp-servers-to-gemini-cli-with-docker-mcp-toolkit","status":"publish","type":"post","link":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2025\/10\/15\/how-to-add-mcp-servers-to-gemini-cli-with-docker-mcp-toolkit\/","title":{"rendered":"How to add MCP Servers to Gemini CLI with Docker MCP Toolkit"},"content":{"rendered":"<p>In the rapidly evolving landscape of <a href=\"https:\/\/www.docker.com\/solutions\/docker-ai\/\">AI-assisted development<\/a>, most developers continue to struggle with clunky web interfaces, resource-intensive IDEs, and fragmented toolchains. But what if we told you there\u2019s a combination that pairs Google\u2019s <a href=\"https:\/\/github.com\/google-gemini\/gemini-cli\" target=\"_blank\"><strong>76.3K-star Gemini CLI<\/strong><\/a> (in just 5 months) with Docker\u2019s innovative MCP Toolkit, quietly revolutionizing how modern AI developers work?<\/p>\n<p>Enter the powerhouse duo: <strong>Gemini CLI and <\/strong><a href=\"https:\/\/www.docker.com\/products\/mcp-catalog-and-toolkit\/\"><strong>Docker MCP Toolkit<\/strong><\/a>. This isn\u2019t just another tool combination \u2014 it\u2019s a paradigm shift that delivers developer AI assistance with zero complexity overhead. A one-time setup of just 5 minutes can save you 20 minutes per test scenario \u2014 that\u2019s a 97% time reduction that compounds with every test you run.<\/p>\n<p>Let\u2019s look at a concrete example: browser testing and performance analysis that developers do regularly can be simplified and completely automated. What used to require opening browsers, clicking through flows, analyzing DevTools, taking screenshots, and manually documenting buys can now happen in a single 30-second conversation.<\/p>\n<p>In this guide, you\u2019ll learn how to:<\/p>\n<p>Set up Gemini CLI and connect it to Docker MCP Toolkit<\/p>\n<p>Configure the <a href=\"https:\/\/hub.docker.com\/mcp\/server\/playwright\/overview\" target=\"_blank\">Playwright MCP server<\/a> for browser automation<\/p>\n<p>Configure the <a href=\"https:\/\/hub.docker.com\/mcp\/server\/github-official\/overview\" target=\"_blank\">GitHub MCP server<\/a> for issue creation<\/p>\n<p>Configure the <a href=\"https:\/\/hub.docker.com\/mcp\/server\/filesystem\/overview\" target=\"_blank\">Filesystem MCP server<\/a> for saving test artifacts<\/p>\n<p>Automate browser testing that discovers real bugs and creates documented GitHub issues<\/p>\n<p>See how Gemini CLI can analyze performance, capture screenshots, and report findings\u2014all without leaving your terminal<\/p>\n<p>With 220+ <a href=\"https:\/\/hub.docker.com\/mcp\" target=\"_blank\">pre-built MCP servers<\/a>, browser automation becomes as simple as having a conversation. No Selenium WebDriver configuration, no CI\/CD pipeline complexity, no manual screenshot management \u2014 just natural language instructions that execute real browser tests.<\/p>\n<h2 class=\"wp-block-heading\">Why Gemini CLI and Docker MCP Toolkit Work Better Together<\/h2>\n<p>Manual browser testing and performance analysis are broken. You open Chrome DevTools, click through pages, check network requests, analyze performance metrics, take screenshots, write bug reports, and then manually create GitHub issues. This context-switching nightmare wastes hours every sprint.<\/p>\n<p>Traditional automation tools don\u2019t solve the real problem. Selenium requires brittle selectors and a complex setup. Playwright needs JavaScript knowledge and test frameworks. Both require maintaining test scripts that break with every UI change. The \u201csolution\u201d often takes more time than manual testing.<\/p>\n<p>While Gemini provides powerful AI capabilities and MCP provides the protocol, Docker MCP Toolkit makes browser automation practical. Without containerization, setting up browser testing means managing Chrome\/Firefox installations, dealing with WebDriver versions, configuring Node.js dependencies, handling screenshot directories manually, and different configurations for every developer\u2019s machine. The setup that should take 2 minutes takes 2-6 hours per developer.<\/p>\n<p>Docker MCP Toolkit eliminates this friction:<\/p>\n<p><strong>220+ pre-built MCP servers<\/strong> in the catalog<\/p>\n<p><strong>One-click deployment<\/strong> through Docker Desktop<\/p>\n<p><strong>Playwright MCP<\/strong> with browsers pre-installed (Chrome, Firefox, WebKit)<\/p>\n<p><strong>GitHub MCP<\/strong> for automated issue creation<\/p>\n<p><strong>Filesystem MCP<\/strong> for artifact storage<\/p>\n<p><strong>Secure credential management<\/strong> via OAuth or encrypted storage<\/p>\n<p><strong>Consistent configuration<\/strong> across Mac, Windows, and Linux<\/p>\n<p><strong>Automatic updates<\/strong> when new server versions are released<\/p>\n<p>We built Docker MCP Toolkit to meet developers where they are. If you\u2019re using Gemini CLI, you should be able to automate browser testing without wrestling with infrastructure.<\/p>\n<p>Your tests run securely on your machine. Everything executes in isolated Docker containers on your local system. Test data, screenshots, and application access never leave your computer. No cloud uploads, no third-party services, no compliance concerns. You get enterprise-grade browser automation with complete privacy.<\/p>\n<h2 class=\"wp-block-heading\">Setting up Gemini CLI in Docker MCP Toolkit<\/h2>\n<h3 class=\"wp-block-heading\">Prerequisites<\/h3>\n<p><a href=\"https:\/\/www.docker.com\/products\/docker-desktop\/\">Install Docker Desktop<\/a> 4.40 or later<\/p>\n<p><a href=\"https:\/\/docs.docker.com\/ai\/mcp-catalog-and-toolkit\/get-started\/#enable-docker-mcp-toolkit\" target=\"_blank\">Enable MCP Toolkit<\/a>\u00a0<\/p>\n<h3 class=\"wp-block-heading\">Step 1. Install Gemini CLI<\/h3>\n<p>Install via npm:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\nnpm install -g @google\/gemini-cli\n<\/div>\n<h3 class=\"wp-block-heading\">Step 2. Launch and authenticate<\/h3>\n<p>Once installed, just type gemini in your terminal window.<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\ngemini\n<\/div>\n<h3 class=\"wp-block-heading\">Step 3. Log in via Google<\/h3>\n<p>Follow the setup wizard:<\/p>\n<p>Select a preferred theme style from the options.<\/p>\n<p>Choose a login method. I recommend \u201cLogin with Google\u201d, which allows up to 60 requests\/minute and 1,000 requests\/day for free<\/p>\n<p>In case you need higher rate limits or enterprise access, I suggested you use an API key from <a href=\"https:\/\/aistudio.google.com\/apikey?ref=ajeetraina.com\" target=\"_blank\">Google AI Studio<\/a>. You can easily set it as an environment variable:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\nexport GEMINI_API_KEY=&#8221;YOUR_API_KEY&#8221;\n<\/div>\n<p>After selecting your sign-in method, a browser window will open. Simply log in with your Google account<\/p>\n<h3 class=\"wp-block-heading\">Step 4. Start chatting with Gemini<\/h3>\n<p>Just type \u201cgemini\u201d in your terminal window to start chatting with Gemini and enter your prompt.<\/p>\n<div class=\"wp-block-ponyo-image\"><\/div>\n\n<h4 class=\"wp-block-heading\">Connect Gemini CLI to Docker MCP Toolkit<\/h4>\n<p><strong>Option 1: One-Click Connection (Recommended)<\/strong><\/p>\n<p>Open Docker Desktop<\/p>\n<p>Navigate to <strong>MCP Toolkit<\/strong> in the sidebar<\/p>\n<p>Click the <strong>Clients<\/strong> tab<\/p>\n<p>Find \u201cGemini\u201d in the list.<\/p>\n<p>Click <strong>Connect<\/strong><\/p>\n<div class=\"wp-block-ponyo-image\"><\/div>\n<p>Docker Desktop automatically configures the MCP Gateway connection \u2013 the underlying infrastructure that routes requests between Gemini CLI and your MCP servers, handling authentication, containerisation, and secure communication seamlessly.<\/p>\n<p><strong>Option 2: Manual Command Line Setup<\/strong><br \/>If you prefer a command-line setup or need to configure a specific project:<\/p>\n<p>Navigate to your project folder in the terminal<\/p>\n<p>Run this command:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\ndocker mcp client connect gemini &#8211;global\n<\/div>\n<p>You\u2019ll see output like this:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n=== System-wide MCP Configurations ===<br \/>\n \u25cf gemini: connected<br \/>\n   MCP_DOCKER: Docker MCP Catalog (gateway server) (stdio)<br \/>\n \u25cf gordon: connected<br \/>\n   MCP_DOCKER: Docker MCP Catalog (gateway server) (stdio)\n<p>You might have to restart &#8216;gemini&#8217;.\n<\/p><\/div>\n<p>The connected status confirms Gemini CLI is linked to the Docker MCP Gateway.<\/p>\n<h4 class=\"wp-block-heading\">What\u2019s happening under the hood?<\/h4>\n<p>The Gemini CLI uses the mcpServers configuration in your settings.json file to locate and connect to MCP servers. This configuration supports multiple servers with different transport mechanisms. The mcpServers object is where you define each MCP server you want the CLI to connect to.<\/p>\n<p>Whenever you hit the \u201cConnect\u201d button under the Docker MCP Client for Gemini CLI, it adds the following Docker MCP Gateway configuration to the ~\/.gemini\/settings.json file.<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n{<br \/>\n  &#8220;theme&#8221;: &#8220;Default&#8221;,<br \/>\n  &#8220;selectedAuthType&#8221;: &#8220;oauth-personal&#8221;,<br \/>\n  &#8220;mcpServers&#8221;: {<br \/>\n    &#8220;MCP_DOCKER&#8221;: {<br \/>\n      &#8220;command&#8221;: &#8220;docker&#8221;,<br \/>\n      &#8220;args&#8221;: [&#8220;mcp&#8221;, &#8220;gateway&#8221;, &#8220;run&#8221;],<br \/>\n      &#8220;env&#8221;: {}<br \/>\n    }<br \/>\n  }<br \/>\n}\n<\/div>\n<p>Learn more about MCP and Gemini CLI interaction through <a href=\"https:\/\/github.com\/google-gemini\/gemini-cli\/blob\/3667ecf1078f83a714da54aa002913c87a0e135d\/docs\/tools\/mcp-server.md#how-to-interact-with-your-mcp-server\" target=\"_blank\">this<\/a> link.<\/p>\n\n<h3 class=\"wp-block-heading\">Step 5. Restart Gemini CLI<\/h3>\n<div class=\"wp-block-syntaxhighlighter-code \">\n# Exit Gemini CLI if running, then restart<br \/>\ngemini\n<\/div>\n<h3 class=\"wp-block-heading\">Step 6. Verify the Connection<\/h3>\n<p>Inside Claude Code, type \/mcp to see available MCP servers.\u00a0<\/p>\n<div class=\"wp-block-ponyo-image\"><\/div>\n\n<p>You should see the Docker MCP Gateway listed, which provides access to all enabled MCP servers. The \/MCP_DOCKER tools indicate a successful connection. As you enable more MCP servers in Docker Desktop, they\u2019ll appear here automatically.<\/p>\n<h3 class=\"wp-block-heading\">First Run: What to Expect<\/h3>\n<p>When you start Gemini CLI for the first time after connecting to Docker MCP Toolkit, you\u2019ll see a prompt about the new MCP server:<\/p>\n<div class=\"wp-block-ponyo-image\"><\/div>\n\n<p><strong>Choose Option 1<\/strong> (recommended). This configures your project to automatically use Docker MCP Toolkit and any MCP servers you enable in Docker Desktop. You won\u2019t need to approve MCP servers individually each time.<\/p>\n<div class=\"wp-block-ponyo-image\"><\/div>\n\n<p>You\u2019re now ready to use Gemini with MCP servers from Docker Desktop.<\/p>\n\n<h2 class=\"wp-block-heading\">Real-World Demo: Automated Browser Testing and Performance Analysis<\/h2>\n<p>Now that you\u2019ve connected Gemini CLI to Docker MCP Toolkit, let\u2019s see it in action with a practical example. We\u2019ll automatically discover real bugs through browser testing and identify performance bottlenecks through detailed analysis \u2014 the kind that would take 20 minutes of manual testing, DevTools monitoring, and performance profiling.<\/p>\n<h3 class=\"wp-block-heading\">What Makes This Realistic?<\/h3>\n<p>This isn\u2019t a trivial \u201cHello World\u201d demo. We\u2019re performing comprehensive browser testing and performance analysis on a real e-commerce application with the kinds of issues you encounter in production:<\/p>\n<p>Uses actual application running on localhost<\/p>\n<p>Executes functional browser tests (navigation, element inspection, console monitoring)<\/p>\n<p>Discovers genuine performance bottlenecks through browser DevTools analysis<\/p>\n<p>Identifies accessibility violations that affect real users<\/p>\n<p>Captures evidence with screenshots and console logs<\/p>\n<p>Measures real performance metrics: page load times, network requests, resource usage<\/p>\n<p>Creates properly formatted GitHub issues with actionable recommendations<\/p>\n<h3 class=\"wp-block-heading\">Time investment:<\/h3>\n<p>Manual process: ~20 minutes (opening browsers, clicking through flows, DevTools analysis, performance profiling, documentation, issue creation)<\/p>\n<p>Automated with Gemini CLI + MCP: ~30 seconds total<\/p>\n<p>That\u2019s a <strong>97% time reduction<\/strong>, but more importantly, it\u2019s consistent, thorough, and documented every time.<\/p>\n<h3 class=\"wp-block-heading\">What We\u2019re Testing<\/h3>\n<p>The catalog-service-node application is a realistic e-commerce catalog with intentional issues that mirror common production problems:<\/p>\n<p>Performance Issues:<\/p>\n<p>No pagination \u2013 loads all 15 products at once (will degrade with scale)<\/p>\n<p>Duplicate API calls \u2013 requests \/api\/products twice unnecessarily<\/p>\n<p>Missing optimization \u2013 unoptimized loading patterns<\/p>\n<p>Accessibility Issues:<\/p>\n<p>Missing product images \u2013 placeholder buttons instead of actual images<\/p>\n<p>Vague button labels \u2013 \u201cFetch\u201d and \u201cUpload\u201d aren\u2019t descriptive for screen readers<\/p>\n<p>Missing ARIA labels \u2013 table structure not properly announced<\/p>\n<p>Browser Issues:<\/p>\n<p>Missing favicon \u2013 generates 404 errors in console<\/p>\n<p>Console warnings \u2013 duplicate request warnings<\/p>\n<p>Let\u2019s see if Gemini CLI can discover all of these automatically through intelligent browser testing and performance analysis, then create a comprehensive GitHub issue.<\/p>\n<h3 class=\"wp-block-heading\">Step 1: Set Up a Real-World e-Commerce Catalog application<\/h3>\n<p>For this demo, we\u2019ll use a real e-commerce catalog application. This gives us realistic performance and accessibility issues to discover.<\/p>\n<p><strong>Clone the repository:<\/strong><\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\ngit clone https:\/\/github.com\/ajeetraina\/catalog-service-node<br \/>\ncd catalog-service-node\n<\/div>\n<p><strong>Start all services:<\/strong><\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n# Start Docker services (database, S3, Kafka)<br \/>\ndocker compose up -d\n<p># Install dependencies<br \/>\nnpm install &#8211;omit=optional<\/p>\n<p># Start the application<br \/>\nnpm run dev\n<\/p><\/div>\n<p><strong>Verify it\u2019s running:<\/strong><\/p>\n<p>Frontend:<a href=\"http:\/\/localhost:5173\/\" target=\"_blank\"> http:\/\/localhost:5173<\/a><\/p>\n<p>API:<a href=\"http:\/\/localhost:3000\/\" target=\"_blank\"> http:\/\/localhost:3000<\/a><\/p>\n<h3 class=\"wp-block-heading\">Step 2: Seed Test Data<\/h3>\n<p>To make testing realistic, create sample products:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n# Create seed script<br \/>\ncat &gt; seed-data.sh &lt;&lt; &#8216;EOF&#8217;<br \/>\n#!\/bin\/bash<br \/>\nAPI_URL=&#8221;http:\/\/localhost:3000\/api&#8221;\n<p>echo &#8220;Seeding test products&#8230;&#8221;<\/p>\n<p>curl -s -X POST &#8220;$API_URL\/products&#8221; <br \/>\n  -H &#8220;Content-Type: application\/json&#8221; <br \/>\n  -d &#8216;{&#8220;name&#8221;:&#8221;Vintage Camera&#8221;,&#8221;description&#8221;:&#8221;Classic 35mm film camera&#8221;,&#8221;price&#8221;:299.99,&#8221;upc&#8221;:&#8221;CAM001&#8243;}&#8217; <br \/>\n  &gt; \/dev\/null &amp;&amp; echo &#8220;\u2705 Vintage Camera&#8221;<\/p>\n<p>curl -s -X POST &#8220;$API_URL\/products&#8221; <br \/>\n  -H &#8220;Content-Type: application\/json&#8221; <br \/>\n  -d &#8216;{&#8220;name&#8221;:&#8221;Rare Vinyl Record &#8211; LAST ONE!&#8221;,&#8221;description&#8221;:&#8221;Limited edition. Only 1 left!&#8221;,&#8221;price&#8221;:149.99,&#8221;upc&#8221;:&#8221;VINYL001&#8243;}&#8217; <br \/>\n  &gt; \/dev\/null &amp;&amp; echo &#8220;\u2705 Rare Vinyl Record&#8221;<\/p>\n<p>curl -s -X POST &#8220;$API_URL\/products&#8221; <br \/>\n  -H &#8220;Content-Type: application\/json&#8221; <br \/>\n  -d &#8216;{&#8220;name&#8221;:&#8221;Professional DSLR Camera&#8221;,&#8221;description&#8221;:&#8221;50MP camera with 8K video&#8221;,&#8221;price&#8221;:2499.99,&#8221;upc&#8221;:&#8221;CAMPRO001&#8243;}&#8217; <br \/>\n  &gt; \/dev\/null &amp;&amp; echo &#8220;\u2705 Professional DSLR&#8221;<\/p>\n<p># Add bulk test products<br \/>\nfor i in {4..15}; do<br \/>\n  curl -s -X POST &#8220;$API_URL\/products&#8221; <br \/>\n    -H &#8220;Content-Type: application\/json&#8221; <br \/>\n    -d &#8220;{&#8220;name&#8221;:&#8221;Test Product $i&#8221;,&#8221;description&#8221;:&#8221;Bulk test product $i&#8221;,&#8221;price&#8221;:$((50 + RANDOM % 450)).99,&#8221;upc&#8221;:&#8221;BULK$(printf &#8216;%03d&#8217; $i)&#8221;}&#8221; <br \/>\n    &gt; \/dev\/null &amp;&amp; echo &#8220;\u2705 Test Product $i&#8221;<br \/>\ndone<\/p>\n<p>echo &#8220;&#8221;<br \/>\nTOTAL=$(curl -s &#8220;$API_URL\/products&#8221; | jq &#8216;. | length&#8217;)<br \/>\necho &#8220;Total products: $TOTAL&#8221;<br \/>\necho &#8220;Ready! Visit http:\/\/localhost:5173&#8221;<br \/>\nEOF<\/p>\n<p>chmod +x seed-data.sh<br \/>\n.\/seed-data.sh<\/p>\n<\/div>\n<p><strong>Expected output:<\/strong><\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\nSeeding test products&#8230;<br \/>\n\u2705 Vintage Camera<br \/>\n\u2705 Rare Vinyl Record<br \/>\n\u2705 Professional DSLR<br \/>\n\u2705 Test Product 4<br \/>\n\u2705 Test Product 5<br \/>\n&#8230;<br \/>\n\u2705 Test Product 15\n<p>Total products: 15<br \/>\nReady! Visit http:\/\/localhost:5173<\/p>\n<\/div>\n<p>Now you have a realistic environment with 15 products to analyze.<\/p>\n<h2 class=\"wp-block-heading\">Configure MCP Servers<\/h2>\n<p>For browser testing and performance analysis automation, you\u2019ll orchestrate three MCP servers:<\/p>\n<p><strong><a href=\"https:\/\/hub.docker.com\/mcp\/server\/playwright\/overview\" target=\"_blank\">Playwright MCP<\/a><\/strong> \u2013 Controls browsers, takes screenshots, captures console logs<\/p>\n<p><strong><a href=\"https:\/\/hub.docker.com\/mcp\/server\/github-official\/overview\" target=\"_blank\">GitHub MCP<\/a><\/strong> \u2013 Creates issues automatically with full context<\/p>\n<p><strong><a href=\"https:\/\/hub.docker.com\/mcp\/server\/filesystem\/overview\" target=\"_blank\">Filesystem MCP<\/a><\/strong> \u2013 Saves screenshots and test artifacts<\/p>\n<p>Let\u2019s configure each one.<\/p>\n<h3 class=\"wp-block-heading\">Configure Playwright MCP (Browser Automation)<\/h3>\n<p>The Playwright MCP server gives Gemini the ability to control real browsers, Chrome, Firefox, and WebKit, just like a human would.<\/p>\n<p><strong>In Docker Desktop:<\/strong><\/p>\n<p>Open <strong>Docker Desktop<\/strong> \u2192 <strong>MCP Toolkit<\/strong> \u2192 <strong>Catalog<\/strong><\/p>\n<p>Search for <strong>\u201cPlaywright\u201d<\/strong> or <strong>\u201cBrowser\u201d<\/strong><\/p>\n<p>Find <strong>Playwright (Browser Automation)<\/strong> in the results<\/p>\n<p>Click <strong>+ Add<\/strong><\/p>\n<p>The server will be added with default configuration (no additional setup needed)<\/p>\n<p>Click <strong>Start Server<\/strong><\/p>\n<p><strong>What you get:<\/strong><\/p>\n<p><strong>21+ browser automation tools<\/strong> including:<\/p>\n<p>browser_navigate \u2013 Navigate to URLs<\/p>\n<p>browser_snapshot \u2013 Capture page state for analysis<\/p>\n<p>browser_take_screenshot \u2013 Save visual evidence<\/p>\n<p>browser_click, browser_type \u2013 Interact with elements<\/p>\n<p>browser_console_messages \u2013 Get console errors<\/p>\n<p>browser_network_requests \u2013 Analyze HTTP requests<\/p>\n<div class=\"wp-block-ponyo-image\"><\/div>\n\n<p>The Playwright MCP runs in a secure Docker container with browsers pre-installed. No manual ChromeDriver setup, no WebDriver conflicts, no OS-specific browser installations.<\/p>\n<h3 class=\"wp-block-heading\">Configure GitHub MCP (Issue Creation)<\/h3>\n<p>The GitHub MCP enables Gemini to create issues, PRs, and manage repositories on your behalf.<\/p>\n<p><strong>Option 1: OAuth Authentication (Recommended \u2013 Easiest)<\/strong><\/p>\n<p>In <strong>MCP Toolkit<\/strong> \u2192 <strong>Catalog<\/strong>, search <strong>\u201cGitHub Official\u201d<\/strong><\/p>\n<p>Click <strong>+ Add<\/strong><\/p>\n<p>Go to the <strong>OAuth<\/strong> tab in Docker Desktop<\/p>\n<p>Find the <strong>GitHub<\/strong> entry<\/p>\n<p>Click <strong>\u201cAuthorize\u201d<\/strong><\/p>\n<p>Your browser opens GitHub\u2019s authorization page<\/p>\n<p>Click <strong>\u201cAuthorize Docker\u201d<\/strong> on GitHub<\/p>\n<p>You\u2019re redirected back to Docker Desktop<\/p>\n<p>Return to <strong>Catalog<\/strong> tab, find <strong>GitHub Official<\/strong><\/p>\n<p>Click <strong>Start Server<\/strong><\/p>\n<div class=\"wp-block-ponyo-image\"><\/div>\n\n<p><strong>Advantage:<\/strong> No manual token creation. Authorization happens through GitHub\u2019s secure OAuth flow with automatic token refresh.<\/p>\n\n<p><strong>Option 2: Personal Access Token (For Granular Control)<\/strong><\/p>\n<p>If you prefer manual control or need specific scopes:<\/p>\n\n<p><strong>Step 1: Create GitHub Personal Access Token<\/strong><\/p>\n<p>Go to <a href=\"https:\/\/github.com\/\" target=\"_blank\"><strong>https:\/\/github.com<\/strong><\/a><strong> <\/strong>\u00a0and sign in<\/p>\n<p>Click your <strong>profile picture<\/strong> \u2192 <strong>Settings<\/strong><\/p>\n<p>Scroll to <strong>\u201cDeveloper settings\u201d<\/strong> in the left sidebar<\/p>\n<p>Click <strong>\u201cPersonal access tokens\u201d<\/strong> \u2192 <strong>\u201cTokens (classic)\u201d<\/strong><\/p>\n<p>Click <strong>\u201cGenerate new token\u201d<\/strong> \u2192 <strong>\u201cGenerate new token (classic)\u201d<\/strong><\/p>\n<p>Name it: <strong>\u201cDocker MCP Browser Testing\u201d<\/strong><\/p>\n<p><strong>Select scopes:<\/strong><\/p>\n<p>repo (Full control of repositories)<\/p>\n<p>workflow (Update GitHub Actions workflows)<\/p>\n<p>Click <strong>\u201cGenerate token\u201d<\/strong><\/p>\n<p><strong>Copy the token immediately<\/strong> (you won\u2019t see it again!)<\/p>\n<p><strong>Step 2: Configure in Docker Desktop<\/strong><\/p>\n<p>In <strong>MCP Toolkit<\/strong> \u2192 <strong>Catalog<\/strong>, find <strong>GitHub Official<\/strong><\/p>\n<p>Click <strong>+ Add<\/strong> (if not already added)<\/p>\n<p>Go to <strong>Configuration<\/strong> tab<\/p>\n<p>Select <strong>\u201cPersonal Access Token\u201d<\/strong> as the authentication method<\/p>\n<p>Paste your token<\/p>\n<p>Click <strong>Start Server<\/strong><\/p>\n<p><strong>Or via CLI:<\/strong><\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\ndocker mcp secret set GITHUB.PERSONAL_ACCESS_TOKEN=github_pat_YOUR_TOKEN_HERE\n<\/div>\n<h3 class=\"wp-block-heading\">Configure Filesystem MCP (Screenshot Storage)<\/h3>\n<p>The Filesystem MCP allows Gemini to save screenshots and test artifacts to your local machine.<\/p>\n<p><strong>In Docker Desktop:<\/strong><\/p>\n<p>Go to <strong>MCP Toolkit<\/strong> \u2192 <strong>Catalog<\/strong><\/p>\n<p>Search for <strong>\u201cFilesystem\u201d<\/strong><\/p>\n<p>Find <strong>Filesystem (Reference)<\/strong> and click <strong>+ Add<\/strong><\/p>\n<p>Go to the <strong>Configuration<\/strong> tab<\/p>\n<p>Under <strong>filesystem.paths<\/strong>, add your project directory:<\/p>\n<p>Example: \/Users\/yourname\/catalog-service-node<\/p>\n<p>Or wherever you cloned the repository<\/p>\n<p>You can add multiple paths by clicking the <strong>+ button<\/strong><\/p>\n<p>Click <strong>Save<\/strong><\/p>\n<p>Click <strong>Start Server<\/strong><\/p>\n<div class=\"wp-block-ponyo-image\"><\/div>\n<p><strong>Important Security Note:<\/strong> Only grant access to directories you\u2019re comfortable with Gemini reading and writing to. The Filesystem MCP is scoped to these specific paths for your protection.<\/p>\n\n<h3 class=\"wp-block-heading\">Run the Automation<\/h3>\n<p>Change directory to the root of the catalog-service-node project repository and open Gemini CLI:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\ngemini\n<\/div>\n<p>Paste this prompt:<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\nNavigate to http:\/\/host.docker.internal:5173 and perform a detailed<br \/>\nperformance and accessibility analysis:\n<p>1. Take a screenshot of the full page<br \/>\n2. Count how many products are displayed<br \/>\n3. Open browser DevTools and check:<br \/>\n   &#8211; Console for any JavaScript errors<br \/>\n   &#8211; Network tab: how many HTTP requests are made?<br \/>\n   &#8211; Performance: how long does the page take to load?<br \/>\n4. Identify performance issues:<br \/>\n   &#8211; Are all products loading at once with no pagination?<br \/>\n   &#8211; Are images optimized?<br \/>\n   &#8211; Any unnecessary network requests?<br \/>\n5. Check for accessibility issues:<br \/>\n   &#8211; Missing alt text on images<br \/>\n   &#8211; Color contrast problems<br \/>\n   &#8211; Vague button labels<\/p>\n<p>Create a GitHub issue titled &#8220;Product catalog performance and<br \/>\naccessibility issues&#8221; with:<br \/>\n&#8211; Screenshots attached<br \/>\n&#8211; List of specific problems found<br \/>\n&#8211; Severity: Medium<br \/>\n&#8211; Labels: performance, accessibility, enhancement\n<\/p><\/div>\n<h4 class=\"wp-block-heading\">Watch Gemini Work<\/h4>\n<p>Here\u2019s what happens behind the scenes as Gemini orchestrates multiple MCP servers:<\/p>\n<p><strong>Step 1: Browser Navigation<\/strong><\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\nThe web server is running. I&#8217;ll navigate to http:\/\/host.docker.internal:5173, take a screenshot, and then proceed with the rest of the performance analysis.\n<\/div>\n<p>Gemini launches a real Chromium browser in the Docker container and navigates to your application.<\/p>\n<p><strong>Step 2: Console Analysis<\/strong><\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n\u2726 I can see 15 products listed on the page: * Vintage Camera * Rare Vinyl Record &#8211; LAST ONE! * Professional DSLR Camera * Test Product 4-15\n<\/div>\n<p><strong>Step 3: Performance Check<\/strong><\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n\u2726 Checking browser console and network requests&#8230; Opening DevTools to analyze performance metrics&#8230;\n<\/div>\n<p><strong>Step 4: Issue Creation<\/strong><\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n \u2726 Creating GitHub issue with findings&#8230; \n<p>create_issue (MCP_DOCKER MCP Server) {&#8220;labels&#8221;:[&#8220;performance&#8221;,&#8221;accessibility&#8221;,&#8221;enhancement&#8221;],&#8221;body&#8221;:&#8221;### Summary&#8230;&#8221;} <\/p>\n<p>\u2726 I have successfully created the issue. You can find it at: https:\/\/github.com\/ajeetraina\/catalog-service-node\/issues\/1\n<\/p><\/div>\n<h3 class=\"wp-block-heading\">The Complete GitHub Issue<\/h3>\n<p>Gemini automatically created this comprehensive issue with structured information:<\/p>\n<div class=\"wp-block-ponyo-image\"><\/div>\n\n<h4 class=\"wp-block-heading\">Workflow Comparison: Before vs After MCP<\/h4>\n<div class=\"wp-block-ponyo-table style__default\">\n<p>Step<\/p>\n<p>Before MCP (Manual Testing)<\/p>\n<p>Time<\/p>\n<p>After MCP (Gemini CLI + MCP)<\/p>\n<p>Time<\/p>\n<p>1<\/p>\n<p>Open browser manually<\/p>\n<p>1 min<\/p>\n<p>Paste prompt in Gemini CLI<\/p>\n<p>5 sec<\/p>\n<p>2<\/p>\n<p>Navigate to application<\/p>\n<p>30 sec<\/p>\n<p>Gemini analyzes automatically<\/p>\n<p>25 sec<\/p>\n<p>3<\/p>\n<p>Click through pages<\/p>\n<p>3 min<\/p>\n<p>GitHub issue created<\/p>\n<p>auto<\/p>\n<p>4<\/p>\n<p>Open DevTools manually<\/p>\n<p>30 sec<\/p>\n<p>Screenshots attached<\/p>\n<p>auto<\/p>\n<p>5<\/p>\n<p>Take screenshots<\/p>\n<p>2 min<\/p>\n<p>\u2713 Complete<\/p>\n<p>\u2013<\/p>\n<p>6<\/p>\n<p>Check browser console<\/p>\n<p>1 min<\/p>\n<p>\u2013<\/p>\n<p>\u2013<\/p>\n<p>7<\/p>\n<p>Analyze network requests<\/p>\n<p>2 min<\/p>\n<p>\u2013<\/p>\n<p>\u2013<\/p>\n<p>8<\/p>\n<p>Document findings<\/p>\n<p>3 min<\/p>\n<p>\u2013<\/p>\n<p>\u2013<\/p>\n<p>9<\/p>\n<p>Write detailed bug report<\/p>\n<p>5 min<\/p>\n<p>\u2013<\/p>\n<p>\u2013<\/p>\n<p>10<\/p>\n<p>Create GitHub issue<\/p>\n<p>2 min<\/p>\n<p>\u2013<\/p>\n<p>\u2013<\/p>\n<p>Summary<\/p>\n<p>Total<\/p>\n<p>~ 20 minutes per test<\/p>\n<p>\u2013<\/p>\n<p>30 sec per test<\/p>\n<\/div>\n<p>Time saved per test: 19.5 minutes (97% faster!)<\/p>\n<p>Impact over time:<\/p>\n<p>Per day (5 tests): 97 minutes saved \u2192 1.6 hours<\/p>\n<p>Per week (25 tests): 8 hours saved \u2192 1 full workday<\/p>\n<p>Per sprint (50 tests): 16 hours saved \u2192 2 full workdays<\/p>\n<p>Per year (1,000 tests): 325 hours saved \u2192 40 workdays<\/p>\n<h3 class=\"wp-block-heading\">Wrapping Up<\/h3>\n<p>You\u2019ve just witnessed how Docker MCP Toolkit transforms Gemini CLI from a chat assistant into a complete browser testing and performance analysis platform. What used to require opening browsers, clicking through flows, analyzing DevTools, documenting bugs, and creating issues manually now happens in one 30-second conversation.<\/p>\n\n<p>The combination of Gemini CLI and Docker MCP Toolkit represents a paradigm shift in AI-assisted development. By leveraging terminal-native tools and containerized services, you get:<\/p>\n<p><strong>Unmatched flexibility<\/strong> in tool selection<\/p>\n<p><strong>Superior performance<\/strong> with minimal overhead<\/p>\n<p><strong>Future-proof architecture<\/strong> that scales with your needs<\/p>\n<p>This setup isn\u2019t just about convenience \u2014 it\u2019s about building a development environment that adapts to your workflow rather than forcing you to adapt to it. The developer productivity revolution is here. The question isn\u2019t whether you\u2019ll adopt AI-assisted development \u2014 it\u2019s whether you\u2019ll lead with the best tools available or play catch-up later.<\/p>\n<p>Ready to try it? <a href=\"https:\/\/docs.docker.com\/ai\/mcp-catalog-and-toolkit\/get-started\/#enable-docker-mcp-toolkit\" target=\"_blank\">Enable Docker MCP Toolkit<\/a> in Docker Desktop and start building your own Gemini-powered development workflow today.<\/p>\n<h3 class=\"wp-block-heading\"><strong>Learn more<\/strong><\/h3>\n<p><a href=\"https:\/\/hub.docker.com\/mcp\" target=\"_blank\">Explore the MCP Catalog<\/a>: Discover containerized, security-hardened MCP servers<\/p>\n<p>Open Docker Desktop and\u00a0<a href=\"https:\/\/hub.docker.com\/open-desktop?url=https:\/\/open.docker.com\/dashboard\/mcp\" target=\"_blank\">get started with the MCP Toolkit<\/a>\u00a0<em>(Requires version 4.48 or newer to launch the MCP Toolkit automatically)<\/em><\/p>\n<p>Explore our guide on adding <a href=\"https:\/\/www.docker.com\/blog\/add-mcp-servers-to-claude-code-with-mcp-toolkit\/\">MCP Servers to Claude Code with the Docker MCP Toolkit<\/a><\/p>\n<p>Check out our<a href=\"https:\/\/www.docker.com\/blog\/mcp-horror-stories-the-supply-chain-attack\/\"> MCP Horror Stories<\/a> series to see common MCP security pitfalls and how you can avoid them.<\/p>","protected":false},"excerpt":{"rendered":"<p>In the rapidly evolving landscape of AI-assisted development, most developers continue to struggle with clunky web interfaces, resource-intensive IDEs, and [&hellip;]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2602","post","type-post","status-publish","format-standard","hentry","category-docker"],"_links":{"self":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/2602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/comments?post=2602"}],"version-history":[{"count":0,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/2602\/revisions"}],"wp:attachment":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/media?parent=2602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/categories?post=2602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/tags?post=2602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}