> Canonical URL: https://codingcat.dev/demos/web-ai

# Interactive Web AI, WebMCP & Chrome Built-in AI Playground | CodingCat.dev

⚡ Interactive Client-Side Web AI LabWebMCP + Gemini Nano + 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 hybrid edge fallback, and run zero-backend **WebGPU / Float32**  semantic vector search.

[Read WebMCP Guide→](/post/webmcp-browser-native-model-context-protocol-guide)[Read Built-in AI Guide →](/post/chrome-built-in-ai-gemini-nano-prompt-api-guide)[Agent Discovery Docs](/developers)WebMCP ContextDetecting...Chrome Prompt APIProbing...Summarizer / RewriterProbing...WebGPU ComputeProbing...

## 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 Toolsearch_content (Live CodingCat.dev Search API)estimate_inference_budget (Local vs. Cloud Token Calculator)extract_page_headings (DOM Outline Extractor)JSON Arguments Payload{"query": "WebMCP"}ReadyRegistered Tool Schema & Annotations

### Live Tool Execution Response

JSON-RPC / Structured ResultClick "Execute WebMCP Tool" to run the registered handler in your browser session.

### Declarative API (``)

Zero-JS Schema DiscoveryThis HTML form includes standard W3C WebMCP attributes (`toolname`, `tooldescription`, and `toolparamdescription`) so browser agents can synthesize a tool contract without executing custom scripts.

Topic Keyword (`q`)Content Pillar (`type`)Blog Posts (post)Courses (course)Podcasts (podcast)Auto-Extracted Declarative Tool Contract from DOM

## Chrome Built-in AI & Hybrid Edge Router

window.LanguageModelRun zero-cost, on-device inference via Chrome's `LanguageModel` or `Summarizer` API when Gemini Nano is available locally, or test our automatic **Hybrid Browser-to-Edge Router**  fallback.

Built-in Web AI Task APIPrompt API (LanguageModel.create + promptStreaming)Summarizer API (Summarizer.create + type: "key-points")Rewriter API (Rewriter.create + tone: "more-casual")Input Context / Developer PromptExplain why exposing structured tools via WebMCP (document.modelContext) is 10x faster and more reliable than DOM screen-scraping for browser AI agents.Route: Standby

### Streaming Output & Hardware Telemetry

0 tokens

Click "Run Inference" to test on-device Gemini Nano or Hybrid Edge fallback.Chrome Diagnostic Matrix

## Client-Side Vector Cosine Similarity Engine

0 Bytes Network EgressTest 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 QueryReady

### Top-K Local Vector Matches (Cosine Similarity)

## 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 LayerBrowser API / StandardNetwork Latency & CostBest Production Use CaseWebMCP (Client-Side Agent Tools)`document.modelContext.registerTool` & ``0ms IPC / 90% fewer agent tokensExposing 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 tokensPrivacy-sensitive drafting, instant article summaries, offline-capable UI helpers, and zero-cost pre-classification.Client-Side WebGPU / WebNN`navigator.gpu` + Transformers.js v3 / MediaPipe + OPFS0ms RTT / Local GPU ShadersLocal 384-d embeddings, client-side RAG over OPFS/IndexedDB, and real-time vision/audio inference.Hybrid Edge AI FallbackFirebase AI Logic (Gemini 2.5 Flash) / Cloudflare Workers120ms to 380ms RTT / Metered APIFallback for devices without local NPU/GPU weights or complex multi-step reasoning and large context windows.