DEV Community: Mukhtar Salim

Building an Intelligent Image Analyzer with Google Cloud Vision API and Cloud Run

Mukhtar Salim — Wed, 30 Sep 2026 12:40:46 +0000

Modern digital platforms from e-commerce marketplaces to content hubs handle massive volumes of user-uploaded imagery daily. Manually reviewing images, writing catalog tags, and catching policy-violating content quickly becomes an operational bottleneck. While training custom computer vision models from scratch is an option, it requires massive labeled datasets, specialized hardware, and continuous model maintenance.

What is an Image Analyzer?

An Image Analyzer is a software system or application that processes visual data (digital images) to extract meaningful, structured information. Instead of treating an image as merely a collection of raw pixels or a static file, an analyzer uses computer vision techniques and machine learning models to "understand" what is inside the picture.

Depending on the implementation, an image analyzer can perform several tasks:

Object & Entity Detection: Identifying items, landscapes, people, or products.
Semantic Labeling: Generating descriptive keywords and tagging the image (e.g., identifying "beach", "ocean", or "sunset").
Content Moderation: Detecting unsafe, sensitive, or policy-violating imagery (e.g., adult content, violence, or hate symbols).
Metadata Extraction: Extracting dominant color palettes, aspect ratios, image clarity, and visual properties.

What is Google Cloud Vision API?

Google Cloud Vision API is a fully managed computer vision service provided by Google Cloud. It allows developers to integrate pre-trained machine learning models into their applications through simple REST or gRPC API calls.

Training computer vision models from scratch requires massive datasets, expensive GPU compute clusters, and continuous model fine-tuning. Cloud Vision API eliminates this barrier by giving you immediate access to Google’s state-of-the-art vision models.

Key capabilities include:

- Label Detection: Generating descriptive tags with associated confidence scores.

- SafeSearch Detection: Evaluating content likelihood across five moderation categories (adult, spoof, medical, violence, and racy).

Text Detection (OCR): Extracting printed or handwritten text from images.

- Landmark & Logo Recognition: Identifying well-known public structures and commercial brand logos.

- Image Properties: Evaluating dominant colors, aspect ratios, and visual quality.

What is Google Cloud Run?

Google Cloud Run is a fully managed serverless compute platform that runs containerized applications directly on top of Google’s scalable infrastructure.

With Cloud Run, you package your code, dependencies, and system runtime into an OCI-compliant container (such as a standard Docker container). Cloud Run then manages everything else:

- True Serverless Scaling (Scale-to-Zero): The service automatically spins up instances when requests arrive and scales down to zero when idle, meaning you do not pay for idle server compute.

- Granular Autoscaling: When traffic spikes, Cloud Run provisions new instances in seconds and supports multiple concurrent requests per container instance.

Zero Infrastructure Maintenance: There are no virtual machines to patch, no operating systems to update, and no Kubernetes clusters to configure.

- Native Security & IAM Integration: Authenticates securely with other Google Cloud services using Service Accounts and Application Default Credentials (ADC), removing the need to embed secret API keys in your code.

Why We Need Them in This Demo

In the Smart Tagger application, these three components work together to solve a specific production architecture challenge:

[ Image Upload ] ──> [ Cloud Run (FastAPI) ] ──> [ Cloud Vision API ] ──> [ Structured Tags & Flags ]
                      (Microservice Host)          (AI Inference Engine)

Why an Image Analyzer?

Modern applications (like e-commerce platforms, social feeds, and digital asset managers) receive thousands of user-uploaded images. Businesses cannot afford to have human operators manually verify every photo, write catalog search tags, and check for offensive material. An automated Image Analyzer is the core business solution being built.

Why Cloud Vision API?

It provides the AI intelligence without requiring custom model training. It processes complex image labeling, dominant color extraction, and content moderation in a single network round-trip with high accuracy and low latency.

Why Cloud Run?

Cloud Vision API is an external service....it cannot serve user uploads or enforce business rules on its own. Cloud Run acts as the secure, scalable host for your API microservice (built with FastAPI). It:

Provides an authenticated boundary between the client and Google Cloud using IAM (no exposed credentials).

Validates incoming file types and size limits before invoking paid AI calls.

Scales instantly to absorb sudden spikes in user uploads while scaling to zero during periods of inactivity, keeping operational costs low for developer communities and startups.

Getting Started

Accepts a user-uploaded photo.
Uses Vision API to generate hashtags automatically. (This implies using an object/label detection or similar feature).
Filters out "unsafe" images before they are published. (This uses the safe search detection feature of the Vision API).

To create this application, we need to build three main parts:

Frontend (HTML/CSS/JavaScript): To allow users to upload a photo and display the results.
Backend (e.g., Python/Node.js): To handle the file upload and communicate with the Google Cloud Vision API.
Google Cloud Project & Vision API: Set up the necessary cloud resources and credentials.

Application Blueprint: The "Smart Tagger"

A. Prerequisites (What you need to set up)

A Google Cloud Project: Create a new project.
Enable the Vision API: Go to "APIs & Services" and enable the "Cloud Vision API."
Set up Authentication: For a server application, the best method is to create a Service Account and download the JSON key file.

1. You will need to set an environment variable to point to this file

(e.g., export GOOGLEAPPLICATIONCREDENTIALS="/path/to/your/keyfile.json").

Install Python Libraries:

1.  pip install Flask google-cloud-vision

2. Backend Code (Python using Flask)

Create a file named app.py. This code handles the upload, calls the Vision API, and checks for safety.

Python

import os

from flask import Flask, request, jsonify, render\_template

from google.cloud import vision

Initialize Flask app

app = Flask(\_\_name\_\_)

Vision API Functions

def analyze_image_with_vision(image_path):
    """Detects labels and checks for explicit content in the image."""

    client = vision.ImageAnnotatorClient()

    with open(image_path, 'rb') as image_file:
        content = image_file.read()

    image = vision.Image(content=content)

    # 1. Label Detection for Hashtags
    label_response = client.label_detection(image=image)
    labels = label_response.label_annotations

    hashtags = [
        f"#{label.description.replace(' ', '').replace('/', '')}"
        for label in labels[:5]
    ]  # Take top 5 labels

    # 2. Safe Search Detection for Filtering
    safe_response = client.safe_search_detection(image=image)
    safe = safe_response.safe_search_annotation

    # Check for likely or very likely unsafe content
    is_unsafe = False

    # Vision API Safe Search categories and their thresholds
    # for "Unsafe"
    # LIKELY (3) or VERY_LIKELY (4) are generally considered unsafe.
    unsafe_threshold = 3

    if (
        safe.adult >= unsafe_threshold
        or safe.violence >= unsafe_threshold
        or safe.racy >= unsafe_threshold
        or safe.medical >= unsafe_threshold
    ):
        is_unsafe = True

    return hashtags, is_unsafe

Flask Routes

@app.route('/')

def index():

    """Renders the upload page."""

    return render\_template('index.html')

@app.route('/upload', methods=\['POST'\])

def upload\_file():

    """Handles the file upload and analysis."""

    if 'file' not in request.files:

        return jsonify({'error': 'No file part'}), 400

    file = request.files\['file'\]

    if file.filename == '':

        return jsonify({'error': 'No selected file'}), 400

    if file:

        # Save the file temporarily

        temp\_file\_path = 'temp\_uploaded\_image.jpg'

        file.save(temp\_file\_path)

        try:

            # Analyze the image

            hashtags, is\_unsafe = analyze\_image\_with\_vision(temp\_file\_path)

            # Prepare result

            result = {

                'status': 'success',

                'hashtags': hashtags,

                'is\_unsafe': is\_unsafe,

                'message': 'Image analyzed successfully.'

            }

            if is\_unsafe:

                result\['message'\] = '⚠️ \*\*UNSAFE IMAGE DETECTED.\*\* Filtering image from publication.'

                result\['hashtags'\] = \[\] # Clear hashtags if unsafe

            else:

                result\['message'\] = '✅ Image is safe. Hashtags generated.'

            return jsonify(result)

        except Exception as e:

            return jsonify({'status': 'error', 'message': f'An error occurred during analysis: {e}'}), 500

        finally:

            # Clean up the temporary file

            if os.path.exists(temp\_file\_path):

                os.remove(temp\_file\_path)

if \_\_name\_\_ == '\_\_main\_\_':

    # You must have the GOOGLE\_APPLICATION\_CREDENTIALS environment variable set

    if not os.environ.get('GOOGLE\_APPLICATION\_CREDENTIALS'):

        print("!!! WARNING: GOOGLE\_APPLICATION\_CREDENTIALS environment variable is not set. !!!")

        print("Please set it to the path of your Vision API Service Account key file.")

    app.run(debug=True)

3 Frontend Code (HTML/JavaScript)

Create a folder named templates and inside it, a file named index.html. This provides the user interface.

Demo: The "Smart Tagger"
A simple web application that automates image tagging and safety filtering using the Vision API.

Analyze Image

Analysis Results

Upload an image to start the analysis.

function uploadImage() {
    const fileInput = document.getElementById('imageUpload');
    const file = fileInput.files[0];
    const statusMessage = document.getElementById('statusMessage');
    const safetyBadge = document.getElementById('safetyBadge');
    const hashtagsDisplay = document.getElementById('hashtagsDisplay');

    // Reset previous results
    statusMessage.textContent = 'Analyzing...';
    safetyBadge.className = '';
    safetyBadge.textContent = '';
    hashtagsDisplay.innerHTML = '';

    if (!file) {
        statusMessage.textContent = 'Please select a file first.';
        return;
    }

    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            statusMessage.textContent = data.message;

            if (data.status === 'success') {
                if (data.is_unsafe) {
                    safetyBadge.className = 'unsafe';
                    safetyBadge.textContent = 'Status: UNSAFE (Filtered)';
                } else {
                    safetyBadge.className = 'safe';
                    safetyBadge.textContent = 'Status: SAFE (Published)';

                    data.hashtags.forEach(tag => {
                        const span = document.createElement('span');
                        span.textContent = tag;
                        hashtagsDisplay.appendChild(span);
                    });
                }
            } else {
                safetyBadge.className = 'unsafe';
                safetyBadge.textContent = 'ERROR';
                console.error(data.message);
            }
        })
        .catch(error => {
            statusMessage.textContent = `An error occurred: ${error.message}`;
            safetyBadge.className = 'unsafe';
            safetyBadge.textContent = 'NETWORK ERROR';
            console.error('Fetch error:', error);
        });
}

4 How to Run the Application

Set Environment Variable: Open your terminal and set the path to your service account key file.

export GOOGLEAPPLICATIONCREDENTIALS="/path/to/your/vision-api-key.json"

Run the Flask App: In the directory where you saved app.py, run:python app.py
Open in Browser: Open your web browser and navigate to the address shown in the terminal (usually http://127.0.0.1:5000/).

Building Production-Ready, Secure AI Backends with WebMCP and Google Cloud Run

Mukhtar Salim — Thu, 10 Sep 2026 06:17:47 +0000

The shift toward autonomous AI agents has exposed a critical gap in modern web infrastructure: the interface gap. For years, browser-based AI agents have had to navigate web pages the way humans do...parsing visual layouts, guessing CSS selectors, and attempting to mimic clicks.

Connecting in-browser agent tools directly to modern cloud backends requires an architectural shift. By combining WebMCP on the frontend with Google Cloud Run on the backend, engineers can build a deterministic, resilient, and enterprise-grade AI foundation.

What is WebMCP?

WebMCP (Web Model Context Protocol) is an emerging browser-level standard that allows live web pages to expose structured, machine-readable tools directly to client-side AI agents.

While Anthropic’s open-source MCP focuses on server-to-server and local-system connections (connecting LLMs to local databases, file systems, and internal enterprise services), WebMCP brings that same tooling contract into the browser DOM.

Through imperative JavaScript APIs (or declarative HTML annotations), a web application can register explicit capabilities...defining function names, JSON input schemas, and expected returns. When an AI agent visits the page, it does not need to guess what a button does; it inspects the page's registered WebMCP tools and calls them natively.

Why Does It Matter?

Traditional web agents rely on heuristic scraping, computer vision screenshot analysis, and DOM parsing. This approach introduces major engineering bottlenecks:

- Fragility: A slight redesign, a changed CSS class name, or an A/B test often breaks the agent's workflow entirely.

- Token Inefficiency: Feeding raw HTML or multi-resolution screenshots into LLM context windows consumes thousands of tokens per step, escalating cost and latency.

- Non-Determinism: Vision-driven clicking frequently misfires on interactive widgets, dynamic modals, or custom calendar pickers.

WebMCP establishes an explicit contract between websites and AI. Instead of asking an LLM to find an <input name="search"> tag and trigger a mouse event, the page declares a search_flights tool with typed arguments. The agent interacts with the website via a reliable, typed contract, making browser automation resilient and predictable.

Why Use WebMCP Instead of a Normal API?

WebMCP is an in-context orchestration layer for browser-agent interaction rather than a replacement for standard REST or GraphQL APIs. Unlike headless, server-to-server APIs that operate blindly and require manual state assembly and separate authentication flows, WebMCP executes inside the user's active browser session.

This setup enables tools to inherit live DOM state, reuse existing login sessions, and register dynamically based on application context. Most importantly, it keeps humans in the loop by updating the UI in real time, allowing users to visibly monitor, confirm, or abort agent actions as they happen.

What is Google Cloud Run?

Google Cloud Run is a fully managed, serverless compute platform that enables you to deploy and run containerized applications directly on top of Google’s scalable infrastructure.

Cloud Run eliminates container orchestration complexity. You package your application logic...whether written in Python, Go, Node.js, or Rust...into an OCI-compliant container image, and Cloud Run provisions, executes, and scales it automatically in response to incoming HTTPS requests or asynchronous events.

Core Features of Google Cloud Run

- True Serverless Scaling (Scale-to-Zero): Cloud Run instances scale dynamically from zero to thousands based on incoming traffic, meaning you only pay for compute resources while requests are actively processing.

- Concurrency per Instance: Unlike traditional Function-as-a-Service (FaaS) platforms where one instance handles one request at a time, Cloud Run allows a single container instance to process dozens of concurrent requests, optimizing memory and reducing costs.

- Native Secret Management: Deep integration with Google Cloud Secret Manager allows API keys (such as GEMINI_API_KEY) to be injected directly as environment variables or mounted files without hardcoding credentials in container builds.

- Built-in Identity & Access Management (IAM): Native support for Google Cloud IAM enables granular access policies, ensuring that only authenticated users or approved API Gateways can invoke endpoints.

- Traffic Splitting & Canary Deployments: Cloud Run allows zero-downtime rollouts and traffic splitting across multiple container revisions (e.g., routing 10% of agent traffic to a new LLM model prompt for evaluation).

- VPC Integration: Containers can securely communicate with internal databases (like Cloud SQL or Memorystore) and private VPC networks without exposing resources to the public internet.

Pros of Using Google Cloud Run for AI Backends

- Reduced Operational Overhead: No virtual machines to patch, no Kubernetes clusters to configure, and no manual node autoscaling policies to maintain.

- Cost Predictability: For AI workloads with unpredictable spikes or long periods of developer inactivity, scaling to zero prevents idle server bills.

- Portability: Because Cloud Run is standard container-based (Docker/Podman), you avoid vendor lock-in. The same container running on Cloud Run can run locally via Docker Compose or on an on-premises cluster.

- Long Request Timeouts: AI workloads....especially long-form analysis, retrieval-augmented generation (RAG), and agentic reasoning loops....require longer runtimes. Cloud Run supports request timeouts up to 60 minutes, accommodating long-running generative processes without dropped connections.

- Hardware Acceleration (GPU Support): Cloud Run supports attached GPUs (such as NVIDIA L4s), allowing you to run self-hosted inference or embedding models serverlessly alongside lightweight orchestration APIs.7.

Why Build a Production-Ready, Secure AI Backend with WebMCP and Google Cloud Run?

While running WebMCP with a local server (localhost:8080) is ideal for developer experimentation, a production deployment presents serious enterprise requirements: session isolation, API key protection, denial-of-service resilience, and strict compliance.

Pairing WebMCP and Google Cloud Run creates an optimal AI architecture for several reasons:

A. Zero Secret Exposure on the Client

WebMCP runs on the user's browser, meaning client-side code is entirely public. If a browser tool attempts to call models like Google Gemini directly from JavaScript, the API key must live in the browser, exposing it to exfiltration.

By having the WebMCP tool forward requests to a FastAPI container on Cloud Run, Cloud Run acts as a secure boundary. The Gemini API key remains isolated inside Google Secret Manager, never visible to the browser or network inspector.

B. Defending Against Resource Exhaustion & Model Quota Draining

Because WebMCP allows autonomous or semi-autonomous tools to trigger operations, unchecked clients could inadvertently loop and consume your LLM token quotas.

Placing Cloud Run behind an API Gateway or Cloud Armor allows you to implement:

Granular IP and token-bucket rate limiting.
Input size and schema validation (using Pydantic/FastAPI) before calling upstream models.
Token budgets and payload sanitization to mitigate prompt injection.

C. Enterprise-Grade Session Security

WebMCP leverages the user’s active web session for frontend context, while Cloud Run allows you to enforce strict CORS policies and JWT/OAuth authentication. The backend verifies that the incoming request originates from your authorized frontend domain and corresponds to a validated, logged-in enterprise user before executing backend agent tools.

D. Architectural Symmetry

This architecture creates a clean separation of concerns:

- The Client (WebMCP): Governs user experience, contextual state, DOM-aware interactions, and transparent human-in-the-loop controls.

- The Cloud (Cloud Run): Governs compute, security boundaries, model orchestration, cost controls, and audit logging.

By adopting this pattern, teams can deploy AI agents that operate reliably inside the browser without compromising enterprise security or server stability.

Hands-On: Building the WebMCP Gemini Data Analyzer

This practical proof-of-concept shows how an in-browser WebMCP tool registers an analytical capability, accepts parameters from an agent, and delegates execution to a containerized FastAPI service on Cloud Run.

Architecture Flow

index.html serves as the frontend and registers the analyze_data_with_cloud_run tool via WebMCP.
The browser agent inspects the page, discovers the tool, and passes an analytical prompt with structured JSON.
The WebMCP handler sends a POST request to FastAPI's /analyze endpoint.
FastAPI validates the payload, queries Gemini via the official SDK, and returns the response.
The frontend displays the analysis live in the DOM for the user.

How it works

The application has two independent parts:

index.html registers a WebMCP tool named analyze_data_with_cloud_run.
A browser agent discovers and invokes that tool with a prompt and JSON data.
The tool sends a POST request to the FastAPI /analyze endpoint.
FastAPI sends the prompt and data to the Gemini API.
Gemini's response is returned to the browser agent as JSON.

Browser agent
    |
    | WebMCP tool invocation
    v
index.html (localhost:5500)
    |
    | POST /analyze
    v
FastAPI (localhost:8080)
    |
    | Gemini generate_content
    v
Google Gemini API

Project structure

.
├── Dockerfile
├── README.md
├── index.html
├── main.py
└── requirements.txt

index.html contains the user interface and WebMCP tool registration.
main.py contains the FastAPI application and Gemini integration.
requirements.txt lists the Python dependencies.
Dockerfile packages the backend for container-based deployment.

Requirements

Python 3.11 or newer
A Google Gemini API key
Brave or Chrome with experimental WebMCP support
Docker, optionally, for running the backend in a container

Local setup

1. Create a virtual environment

Open a terminal in the project directory:

cd /Users/mukhtarsalim/Desktop/webmcp-demo
python3 -m venv .venv
source .venv/bin/activate

On Windows PowerShell:

python -m venv .venv
.\.venv\Scripts\Activate.ps1

2. Install dependencies

pip install -r requirements.txt

3. Configure the Gemini API key

Create or rotate an API key in Google AI Studio. Export it only in the backend terminal:

export GEMINI_API_KEY='your-new-gemini-api-key'

On Windows PowerShell:

$env:GEMINI_API_KEY='your-new-gemini-api-key'

Do not add API keys to index.html, source control, screenshots, documentation, or shell scripts.

4. Start the backend

uvicorn main:app --host 0.0.0.0 --port 8080 --reload

The API should be available at:

Health endpoint: http://localhost:8080/
Analysis endpoint: http://localhost:8080/analyze
Swagger UI: http://localhost:8080/docs

Keep this terminal running.

5. Start the frontend

Open a second terminal in the project directory:

python3 -m http.server 5500

Open http://localhost:5500 in the WebMCP-enabled browser.

Do not open index.html directly with a file:// URL. WebMCP requires a secure context such as HTTPS or localhost.

Enable WebMCP

WebMCP is currently an experimental browser feature.

For Brave:

Open brave://flags/#enable-webmcp-testing.
Set WebMCP for testing to Enabled.
Restart Brave.
Open http://localhost:5500.
Open the WebMCP Tools inspector on the application tab.

For Chrome:

Open chrome://flags/#enable-webmcp-testing.
Set WebMCP for testing to Enabled.
Restart Chrome.
Open http://localhost:5500.
Use the Model Context Tool Inspector to view and invoke the registered tool.

The tool is registered by the application page, not globally. The inspector will not find the tool while the active page is brave://flags, chrome://flags, or another website.

WebMCP tool

The frontend registers this tool:

analyze_data_with_cloud_run

It accepts:

prompt: the question or analysis instruction for Gemini.
data: a JSON object containing the structured information to analyze.

Example arguments:

{
  "prompt": "Summarize the data and identify unusual values.",
  "data": {
    "sales": [120, 135, 128, 410],
    "currency": "USD"
  }
}

The tool forwards the arguments to:

POST http://localhost:8080/analyze

API usage

Health check

curl http://localhost:8080/

Example response:

{
  "status": "online",
  "message": "WebMCP Cloud Run Backend is running",
  "api_key_configured": true
}

Analyze data

curl --request POST http://localhost:8080/analyze \
  --header 'Content-Type: application/json' \
  --data '{
    "prompt": "Summarize this dataset.",
    "data": {
      "value": 42,
      "category": "example"
    }
  }'

Example successful response:

{
  "status": "success",
  "result": "Gemini-generated analysis"
}

Run the backend with Docker

Build the image:

docker build -t webmcp-demo .

Run the container:

docker run --rm \
  --publish 8080:8080 \
  --env GEMINI_API_KEY='your-new-gemini-api-key' \
  webmcp-demo

The Docker container runs only the FastAPI backend. The frontend must still be served separately:

python3 -m http.server 5500

Optional Cloud Run deployment

Cloud Run is not required for local development. It is only needed when the backend must be publicly accessible.

For a hosted deployment:

Build and deploy the backend container to Cloud Run.
Configure GEMINI_API_KEY as a Cloud Run secret or environment variable.
Restrict unauthenticated access where appropriate.
Configure CORS to allow only the deployed frontend origin.
Replace the local backend URL in index.html with the deployed HTTPS /analyze URL.
Serve the frontend from an HTTPS host.

Do not deploy the current demo publicly without adding authentication, rate limiting, request-size limits, and restrictive CORS settings. Otherwise, third parties could consume the Gemini quota.

Changes made during local setup

The original frontend sent requests directly to a hardcoded Google Cloud Run endpoint:

https://webmcp-backend-103973904738.us-central1.run.app/analyze

It was changed to the local FastAPI endpoint:

http://localhost:8080/analyze

This change:

Removes the need to configure Cloud Run for local testing.
Connects the locally served frontend to the locally running backend.
Keeps Gemini API calls on the backend so the API key is not exposed to browser code.
Allows the complete WebMCP flow to run on localhost.

The application was then verified with:

The FastAPI health endpoint responding on port 8080.
The frontend serving successfully on port 5500.
WebMCP for testing enabled in Brave.
The tool inspector opened on the application page.

Troubleshooting

WebMCP API not found

Confirm the WebMCP testing flag is enabled.
Restart the browser after changing the flag.
Open the application through http://localhost:5500.
Test with the latest Google Chrome if Brave does not expose the API.

No tools registered

The inspector must be attached to the application tab. Navigate to http://localhost:5500 before opening or refreshing the inspector.

Receiving end does not exist

This usually means the inspector extension cannot communicate with the active page or its background process.

Restart the browser.
Reopen the application tab.
Disable and re-enable the inspector extension.
Test with current Google Chrome if the issue persists in Brave.

Backend is not reachable

Confirm the backend process is running:

curl http://localhost:8080/

Also confirm that index.html points to:

http://localhost:8080/analyze

Gemini API key is not configured

Export GEMINI_API_KEY in the same terminal before starting Uvicorn. Restart Uvicorn after changing it.

`python main.py` fails

The current main.py calls uvicorn.run(...) without importing uvicorn. Start the application with the supported command:

uvicorn main:app --host 0.0.0.0 --port 8080 --reload

Alternatively, add import uvicorn at the top of main.py before using python main.py.

CORS errors

Ensure the frontend uses http://localhost:5500 and the backend uses http://localhost:8080. For production, replace wildcard CORS configuration with the exact frontend origin.

Current limitations

This project is a proof of concept rather than a production-ready service:

The /analyze endpoint has no authentication.
CORS currently permits every origin.
There is no rate limiting or request-size limit.
Backend exception details may be returned to clients.
Dependencies are not version-pinned.
Automated tests and CI are not configured.
The WebMCP tool does not yet use an AbortSignal for cleanup.
The WebMCP tool does not yet declare security annotations.

Security notes

Rotate an API key immediately if it appears in terminal history, screenshots, chat, or source control.
Never put GEMINI_API_KEY in frontend JavaScript.
Use a secret manager for hosted deployments.
Add authentication and rate limiting before exposing /analyze publicly.
Restrict CORS to trusted frontend origins in production.
Avoid returning raw provider errors to clients.

Stopping the application

Press Ctrl+C in both terminals:

The terminal running Uvicorn.
The terminal running the Python HTTP server.

DEV Community: Mukhtar Salim

Building an Intelligent Image Analyzer with Google Cloud Vision API and Cloud Run

What is an Image Analyzer?

What is Google Cloud Vision API?

What is Google Cloud Run?

Why We Need Them in This Demo

Why an Image Analyzer?

Why Cloud Vision API?

Why Cloud Run?

Getting Started

4 How to Run the Application

Building Production-Ready, Secure AI Backends with WebMCP and Google Cloud Run

What is WebMCP?

Why Does It Matter?

Why Use WebMCP Instead of a Normal API?

What is Google Cloud Run?

Core Features of Google Cloud Run

Pros of Using Google Cloud Run for AI Backends

Why Build a Production-Ready, Secure AI Backend with WebMCP and Google Cloud Run?

Hands-On: Building the WebMCP Gemini Data Analyzer

How it works

Project structure

Requirements

Local setup

1. Create a virtual environment

2. Install dependencies

3. Configure the Gemini API key

4. Start the backend

5. Start the frontend

Enable WebMCP

WebMCP tool

API usage

Health check

Analyze data

Run the backend with Docker

Optional Cloud Run deployment

Changes made during local setup

Troubleshooting

WebMCP API not found

No tools registered

Receiving end does not exist

Backend is not reachable

Gemini API key is not configured

python main.py fails

CORS errors

Current limitations

Security notes

Stopping the application

`python main.py` fails