⚡ Interactive Client-Side Web AI LabWebMCP + Gemini Nano + Firebase Hybrid AI + WebGPU

browser-native web ai & webmcp playground

Test our production client-side Web AI stack directly in your browser. Inspect and execute live WebMCP tools registered on document.modelContext and declarative HTML forms, probe Chrome Built-in AI (Gemini Nano) APIs with live Firebase AI Logic & Edge fallback, and run zero-backend WebGPU / Float32 semantic vector search.

Read WebMCP Guide→Read Built-in AI Guide →Read Hybrid Routing Guide →Agent Discovery Docs

WebMCP Ready!

WebMCP Context

Polyfill Ready (3 tools)

Chrome Prompt API

Hybrid Fallback Ready

Summarizer / Rewriter

Hybrid Fallback Ready

WebGPU Compute

Float32 SIMD Ready

Imperative API (`document.modelContext`)

registerTool()

Select any WebMCP tool registered on this page to inspect its typed JSON Schema contract and execute its in-tab handler with same-origin session locality.

Registered Browser ToolJSON Arguments Payload

Ready

Registered Tool Schema & Annotations

{
  "name": "search_content",
  "description": "Search CodingCat.dev tutorials, blog posts, courses, and podcasts by technical topic",
  "annotations": {
    "readOnlyHint": true,
    "untrustedContentHint": true
  },
  "inputSchema": {
    "type": "object",
    "properties": {
      "query": {
        "type": "string",
        "description": "Keyword or technology (e.g. WebMCP, Gemini Nano, WebGPU, Astro)"
      }
    },
    "required": [
      "query"
    ]
  }
}

Live Tool Execution Response

JSON-RPC / Structured Result

Click "Execute WebMCP Tool" to run the registered handler in your browser session.

Declarative API (`<form toolname="...">`)

Zero-JS Schema Discovery

This HTML form includes standard W3C WebMCP attributes (toolname, tooldescription, and toolparamdescription) so browser agents can synthesize a tool contract without executing custom scripts.

Auto-Extracted Declarative Tool Contract from DOM

{
  "protocol": "webmcp-declarative/1.0",
  "toolname": "search_codingcat_catalog",
  "tooldescription": "Search CodingCat.dev courses, podcasts, and blog posts by keyword and content pillar",
  "toolautosubmit": true,
  "action": "/api/search",
  "method": "GET",
  "inputSchema": {
    "type": "object",
    "properties": {
      "q": {
        "type": "string",
        "description": "Technical keyword or framework name (for example: Astro, Sanity, WebMCP, Firebase)"
      },
      "type": {
        "type": "string",
        "enum": [
          "post",
          "course",
          "podcast"
        ],
        "description": "CodingCat.dev content pillar filter (post, course, podcast)"
      }
    },
    "required": [
      "q"
    ]
  }
}

Chrome Built-in AI & Firebase Hybrid Router

PREFER_ON_DEVICE

Run zero-cost, on-device inference via Chrome's window.LanguageModel, Summarizer, or Rewriter APIs when Gemini Nano is available locally, or automatically route through our live Firebase AI Logic / Cloudflare Edge Fallback endpoint (/api/ai/hybrid-fallback).

Web AI Task API

Firebase AI InferenceMode

Input Context / Developer Prompt

Route: Ready (PREFER_ON_DEVICE)

Firebase AI Logic SDK Hybrid Configuration (firebase/ai)

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

const app = initializeApp(firebaseConfig);
const ai = getAI(app, { backend: new GoogleAIBackend() });

// Automatically routes to Chrome Built-in AI (Gemini Nano) when available,
// and falls back to Gemini Flash in the cloud via Firebase AI Logic:
const hybridModel = getGenerativeModel(ai, {
  mode: InferenceMode.PREFER_ON_DEVICE,
  inCloudParams: { model: "gemini-flash-latest" },
});

const result = await hybridModel.generateContent(prompt);

Live Inference Output & Route Telemetry

Standby

Click "Run Hybrid Inference" to execute on local Chrome Gemini Nano or fall back to our live Edge AI endpoint (/api/ai/hybrid-fallback).

Chrome & Hybrid Router Diagnostic Matrix

{
  "builtInAi": { "LanguageModel": "probing...", "Summarizer": "probing...", "Rewriter": "probing..." },
  "hybridFallbackEndpoint": "/api/ai/hybrid-fallback (Firebase AI Logic + Edge Worker)"
}

Client-Side Vector Cosine Similarity Engine

0 Bytes Network Egress

Test client-side semantic retrieval in the browser. Enter a technical query below to compute real-time Float32Array cosine similarity against our pre-indexed Web AI & Architecture corpus right on your device.

Semantic Search Query

Ready

Top-K Local Vector Matches (Cosine Similarity)

Apr 14, 2026Cosine: 0.942 (94%)

WebMCP Explained: Exposing Browser-Native AI Tools with document.modelContext

Deep dive into the W3C WebMCP specification, imperative registerTool() lifecycles with AbortController, and declarative HTML tool forms.

Web AI & Agent Architecture Trade-Off Matrix

How modern browser-native AI capabilities compare across latency, privacy, token economics, and ideal production workloads:

Web AI Layer	Browser API / Standard	Network Latency & Cost	Best Production Use Case
WebMCP (Client-Side Agent Tools)	`document.modelContext.registerTool` & `<form toolname>`	0ms IPC / 90% fewer agent tokens	Exposing authenticated in-tab actions (search, filters, checkout, speaker kits) to browser AI assistants without fragile DOM scraping.
Chrome Built-in AI (Gemini Nano)	`LanguageModel`, `Summarizer`, `Rewriter`, `Translator`	0ms RTT / $0 per 1M tokens	Privacy-sensitive drafting, instant article summaries, offline-capable UI helpers, and zero-cost pre-classification.
Client-Side WebGPU / WebNN	`navigator.gpu` + Transformers.js v3 / MediaPipe + OPFS	0ms RTT / Local GPU Shaders	Local 384-d embeddings, client-side RAG over OPFS/IndexedDB, and real-time vision/audio inference.
Hybrid Edge AI Fallback	Firebase AI Logic (Gemini Flash) / Cloudflare Workers	120ms to 380ms RTT / Metered API	Fallback for devices without local NPU/GPU weights or complex multi-step reasoning and large context windows.