Control web pages using Gemini cli and Chrome Devtool MCP Server

Description

This video demonstrates how to use the **Gemini Command Line Interface (CLI)** alongside the **Chrome DevTools Multi-Control Protocol (MCP) Server** to automate complex user interactions on a local Angular-based Photo Editing App, an excellent technique for creating reliable, offline live demos for presentations. The tutorial covers setting up the Gemini CLI to use the Chrome DevTools MCP server and then scripts three complete user workflows: **Image Creation**, where a prompt is input, an image is generated, and then downloaded and cleared; **Visual Story Generation**, which automates the selection of multiple dropdown parameters and clicks the generation button to create a sequential tutorial; and **Conversational Editing**, which simulates a multi-turn chat interaction where an uploaded image is progressively edited based on natural language requests (e.g., uploading an image, changing a drink to milk, and then replacing it with a beer and a slice of orange), culminating in clearing the chat to reset the application. This powerful combination provides a robust, code-free way to control web applications for demonstrations and testing. |Start|End|Caption| |---|---|---| |0:00|0:05|Video Title: Control web pages using Gemini-cli and Chrome DevTool MCP| |0:05|1:40|Introduction of the speaker and the goal: Automating live demos for a conference using Gemini CLI and the Chrome DevTools MCP server due to lack of internet access.| |1:40|3:30|Overview of the Angular-based Photo Editing Demo App and its three features: Image Creation, Visual Story, and Conversational Editing.| |3:30|5:09|Setting up the Gemini CLI with the Chrome DevTools MCP Server by showing the configuration in `~/.gemini/settings.json` and listing the available tools like `click`, `fill`, and `navigate_page`.| |5:09|9:23|**Demo 1: Image Creation.** Automating navigation to the page, entering a prompt ("A unicorn is flying..."), clicking 'Create' to generate an image, downloading the image, and clicking 'Clear Image' to reset the view.| |9:23|12:59|**Demo 2: Visual Story Generation.** Automating navigation to the Visual Story page, inputting a prompt, selecting dropdown values (e.g., Image count=4, Type=tutorial), and clicking the 'Write your story' button to generate a sequence of images.| |12:59|18:33|**Demo 3: Conversational Editing.** Automating navigation to the Conversational Editing page, selecting the 'Edit' radio button, uploading a test image, starting the conversation, and sending two conversational edit requests (changing the drink to milk, then replacing it with beer and an orange slice) to progressively modify the image, and finally clearing the chat.| |18:33|19:44|Conclusion, summary of the demonstrated Chrome DevTools MCP tools, and a thank you. #GeminiCLI #ChromeDevTools #WebAutomation #MCPserver #LiveDemoAutomation #Angular #ImageGeneration #GoogleAI