Google Flow Browser MCP

Google Flow Browser MCP

Controls Google Flow for image and video generation from an AI agent. Enables generating images with models like Imagen 4, creating videos, managing characters and scenes via browser automation.

Category
Visit Server

README

<div align="center">

🧠 Google Flow Browser MCP

Control Google Flow β€” image & video generation β€” directly from your AI agent via MCP.

<p> <img src="https://img.shields.io/badge/version-1.0.0-blue?style=flat-square" alt="Version 1.0.0"> <img src="https://img.shields.io/badge/node-%3E%3D18-green?style=flat-square" alt="Node >= 18"> <img src="https://img.shields.io/badge/license-MIT-lightgrey?style=flat-square" alt="License MIT"> <img src="https://img.shields.io/badge/MCP-server-8A2BE2?style=flat-square" alt="MCP Server"> <img src="https://img.shields.io/badge/OpenCode-ready-4CAF50?style=flat-square" alt="OpenCode Ready"> </p>

<br>

✨ Features β€’ πŸš€ Quick Start β€’ πŸ”§ Tools β€’ βš™οΈ Configuration β€’ πŸ›‘οΈ Safety

<br>

</div>


πŸ‡«πŸ‡· Ce serveur MCP permet Γ  votre agent AI (OpenCode) d'utiliser Google Flow pour gΓ©nΓ©rer des images et des vidΓ©os, via votre propre compte Google et sans partager vos identifiants.


πŸ“Έ What It Does

This MCP server connects your AI agent to Google Flow β€” Google's creative suite for image and video generation. Your agent can:

  • 🎨 Generate images with Nano Banana Pro, Nano Banana 2, or Imagen 4
  • 🎬 Create videos and scenes with characters
  • πŸ§‘ Manage characters and scenes in your Flow workspace
  • πŸ–ΌοΈ Use Grid Architect for batch shot generation
  • πŸ” Discover and control any Flow tool programmatically

All through your own Google account β€” no API keys, no third-party tokens.


✨ Features

<table> <tr> <td width="50%">

🎯 For AI Agents

</td> <td width="50%">

πŸ”’ For Humans

</td> </tr> <tr> <td>

  • 15+ MCP tools ready to use

  • Smart job queue β€” no parallel conflicts

  • Auto-discover UI β€” adapts to Flow changes

  • Structured logging for debugging

  • Safe actions β€” resilient click/fill logic </td> <td>

  • Your account, your data β€” no token sharing

  • No password asked β€” ever

  • Clean safety rules β€” stops on captcha/verification

  • Config backup before any modification

  • Single-job queue β€” no runaway generation </td> </tr> </table>


πŸš€ Quick Start

Prerequisites

What Why
Node.js β‰₯ 18 Runtime for the MCP server
Google Chrome Required for browser automation
OpenCode AI agent that connects to MCP servers
A Google account To use Google Flow (yours, not shared)

1️⃣ Install

git clone https://github.com/TMSSS05/google-flow-browser-mcp.git
cd google-flow-browser-mcp
npm install

2️⃣ Configure your Google profile

cp config/flow.config.example.json config/flow.config.json

Edit config/flow.config.json:

{
  "expectedAccount": "your.email@gmail.com",
  "chromeProfile": "Profile 3",
  "chromeUserDataDir": "/home/you/.config/google-chrome"
}

πŸ’‘ Finding your Chrome profile:
Open Chrome and go to chrome://version/. Look for "Profile Path" β€” the last folder name is your profile (e.g., Profile 3), and the path before it is your chromeUserDataDir.

3️⃣ Make scripts executable

chmod +x scripts/*.sh

4️⃣ Start Chrome with CDP

./scripts/start-browser.sh

This launches Chrome with remote debugging enabled on port 9222 using your configured profile.

5️⃣ Start the MCP server

# In a separate terminal:
./scripts/start-mcp.sh

6️⃣ Register with OpenCode

./scripts/register-opencode.sh

πŸ”„ Restart OpenCode after registration for the changes to take effect.

βœ… Verify it works

./scripts/test-flow-image.sh

πŸ—οΈ Architecture

google-flow-browser-mcp/
β”‚
β”œβ”€β”€ πŸ“‚ config/
β”‚   β”œβ”€β”€ flow.config.example.json    # Configuration template
β”‚   └── selectors.map.json          # UI selectors (auto-populated)
β”‚
β”œβ”€β”€ πŸ“‚ scripts/
β”‚   β”œβ”€β”€ start-browser.sh            # Launch Chrome + CDP
β”‚   β”œβ”€β”€ start-mcp.sh                # Start the MCP server
β”‚   β”œβ”€β”€ test-flow-image.sh          # Quick integration test
β”‚   └── register-opencode.sh        # Register in OpenCode config
β”‚
β”œβ”€β”€ πŸ“‚ src/
β”‚   β”œβ”€β”€ index.js                    # MCP server entry point
β”‚   β”‚
β”‚   β”œβ”€β”€ πŸ“ browser/                 # Chrome & CDP management
β”‚   β”‚   β”œβ”€β”€ connect.js              # CDP connection manager
β”‚   β”‚   β”œβ”€β”€ launch-profile.js       # Chrome profile launcher
β”‚   β”‚   β”œβ”€β”€ account-check.js        # Verify Google account
β”‚   β”‚   └── safe-actions.js         # Safe click, fill, detection
β”‚   β”‚
β”‚   β”œβ”€β”€ πŸ“ tools/                   # All MCP tool implementations
β”‚   β”‚   β”œβ”€β”€ flow-open.js            # Navigate to Flow
β”‚   β”‚   β”œβ”€β”€ flow-status.js          # Connection status
β”‚   β”‚   β”œβ”€β”€ generate-image.js       # Image generation
β”‚   β”‚   β”œβ”€β”€ generate-video.js       # Video generation (setup only)
β”‚   β”‚   β”œβ”€β”€ download-latest.js      # Download generated files
β”‚   β”‚   β”œβ”€β”€ create-character.js     # Create a character
β”‚   β”‚   β”œβ”€β”€ import-character.js     # Import character JSON
β”‚   β”‚   β”œβ”€β”€ open-characters.js      # List characters
β”‚   β”‚   β”œβ”€β”€ create-scene.js         # Create a scene
β”‚   β”‚   β”œβ”€β”€ open-tools-gallery.js   # Open tools gallery
β”‚   β”‚   β”œβ”€β”€ grid-architect.js       # Batch shot generation
β”‚   β”‚   β”œβ”€β”€ discover-ui.js          # UI discovery & mapping
β”‚   β”‚   └── use-flow-tool.js        # Generic tool opener
β”‚   β”‚
β”‚   β”œβ”€β”€ πŸ“ queue/                   # Job management
β”‚   β”‚   └── job-queue.js            # Single-job queue
β”‚   β”‚
β”‚   └── πŸ“ utils/                   # Helpers
β”‚       β”œβ”€β”€ config.js               # Config loader
β”‚       β”œβ”€β”€ logger.js               # Structured logging
β”‚       β”œβ”€β”€ errors.js               # Error codes & types
β”‚       β”œβ”€β”€ file-manager.js         # File download/save
β”‚       └── screenshots.js          # Screenshot capture
β”‚
└── πŸ“‚ output/                      # Generated files land here

πŸ”§ Tools

All tools are organized by function for easy discovery.

🌐 Connection & Status

Tool Description
flow_connect Launch Chrome, connect CDP, navigate to Google Flow
flow_disconnect Close browser and clean up all connections
flow_status Full status: connection, Flow loaded, account, queue state
flow_account_check Verify logged-in account matches configured email
flow_screenshot Capture a screenshot of the current Flow page

🎨 Image Generation

Tool Description
flow_generate_image Generate image with Nano Banana Pro, Nano Banana 2, or Imagen 4. Supports aspect ratios, reference images, and brand-based model selection.
flow_download_latest Download the most recently generated file

🎬 Video Generation

Tool Description
flow_generate_video Set up video generation (Omni Flash, Veo models, custom duration/ratio). ⚠️ Stops at "ready to generate" β€” no credit consumed.
flow_create_scene Create a video scene with characters and a text prompt

πŸ‘€ Characters

Tool Description
flow_create_character Create a new character with name, description, and optional reference images
flow_import_character Import a character from a saved JSON file
flow_open_characters Open the characters page and list all existing characters

πŸ› οΈ Tools & Discovery

Tool Description
flow_open_tools_gallery Open the tools gallery and browse available tools
flow_use_tool Open any Flow tool by name with optional parameters
flow_use_grid_architect Configure Grid Architect for batch shot generation with theme prompts, visual logic, and reference images
flow_discover_ui Discover and map all interactive elements (buttons, inputs, headings) on any Flow page

πŸ“Š Queue & Monitoring

Tool Description
flow_queue_status Check job queue: active job, pending queue, completed and failed history

βš™οΈ Configuration

Edit config/flow.config.json (copy from config/flow.config.example.json):

πŸ”‘ Essential

Key Type Default Description
expectedAccount string β€” Your Google account email βœ… REQUIRED
chromeProfile string "Profile 3" Chrome profile directory name
chromeUserDataDir string β€” Full path to Chrome user data directory βœ… REQUIRED
flowUrl string Flow labs URL Google Flow URL (supports fr, en locales)

πŸ”§ Advanced

Key Type Default Description
cdpPort number 9222 Chrome DevTools Protocol port
browserMode string "direct-cdp" "direct-cdp" (recommended) or "playwright"
headless boolean true Run Chrome in headless mode
locale string "fr" UI locale ("fr", "en", etc.)

⏱️ Timing

Key Default Description
jobTimeoutMs 300000 (5 min) Max job execution time
actionDelayMs 800 Delay between UI actions (anti-detection)
generationPollIntervalMs 5000 (5s) How often to poll for generation completion
maxPollAttempts 120 Max polling attempts before timeout
downloadWaitMs 30000 (30s) Wait time for file download

🎨 Models & Ratios

Key Description
imageModels Available models: Nano Banana Pro, Nano Banana 2, Imagen 4
videoModels Available models: Omni Flash, Veo 3.1 - Lite/Fast/Quality
ratios Supported aspect ratios: 16:9, 4:3, 1:1, 3:4, 9:16

πŸ›‘οΈ Safety & Ethics

This project is built with safety-first design:

βœ… Principle How it's enforced
Your account only Uses your own Google profile β€” never asks for or stores passwords
No credential theft Never exports cookies, tokens, or session data
No bypass Stops cleanly on captcha, login walls, or verification challenges
No parallel abuse Single-job queue prevents concurrent generation
Credit-safe video Video generation sets up parameters but stops before the final "Generate" click (no credit consumed)
Config backup Backs up OpenCode config before any modification

⚠️ This is a browser automation tool. Use it responsibly and in accordance with Google's Terms of Service.


❓ FAQ

Getting Started

<details> <summary><strong>Which Chrome profile should I use?</strong></summary>

Open Chrome and go to chrome://version/. The Profile Path shows both your user data directory and profile name. For example:

  • /home/you/.config/google-chrome/Profile 3 β†’ chromeUserDataDir: "/home/you/.config/google-chrome", chromeProfile: "Profile 3"

You need a profile where you're already logged into your Google account. </details>

<details> <summary><strong>Can I use this without OpenCode?</strong></summary>

Yes! Any MCP-compatible client (Claude Desktop, Continue.dev, etc.) can connect to this server. Just point your MCP config to node /path/to/src/index.js. </details>

Troubleshooting

<details> <summary><strong>Chrome doesn't start</strong></summary>

Make sure Chrome is installed at the expected path. On Linux, the default is /opt/google/chrome/chrome. Edit scripts/start-browser.sh to set the correct CHROME path for your system. </details>

<details> <summary><strong>CDP port already in use</strong></summary>

The script checks for existing Chrome instances on port 9222. If something else is using that port, you can change cdpPort in config/flow.config.json (and update the script's CDP_PORT variable). </details>

<details> <summary><strong>"Expected account mismatch"</strong></summary>

Verify that expectedAccount in config/flow.config.json matches the email logged into your Chrome profile. Use flow_account_check to verify. </details>

<details> <summary><strong>Flow UI changed and tools don't work</strong></summary>

Run flow_discover_ui to re-map selectors. The selectors.map.json will auto-update with new UI element positions. </details>

Usage

<details> <summary><strong>How do I generate images?</strong></summary>

Your AI agent calls flow_generate_image with a text prompt. Optionally specify model (Nano Banana 2 is default), aspect ratio, and reference images. The server waits for completion and makes the file available for download. </details>

<details> <summary><strong>Can I generate videos for free?</strong></summary>

flow_generate_video sets up the video parameters (model, ratio, duration) but stops before clicking Generate. This lets you review the setup before consuming credits. The actual generation requires a paid Google Flow subscription. </details>


🀝 Contributing

Contributions are welcome! Please follow these guidelines:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/my-feature)
  3. Commit your changes (git commit -m 'Add my feature')
  4. Push to the branch (git push origin feature/my-feature)
  5. Open a Pull Request

πŸ“„ License

MIT Β© TMSSS05


<div align="center"> <sub>Built with ❀️ for the OpenCode ecosystem</sub> <br> <sub> <a href="https://github.com/TMSSS05/google-flow-browser-mcp/issues">Report Issue</a> · <a href="https://github.com/TMSSS05/google-flow-browser-mcp/discussions">Discussion</a> </sub> </div>

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured