AI is moving into the browser, and that changes the economics of AI-powered applications.
With browser-native AI APIs, tasks such as prompting, summarization, writing, translation, and proofreading can run directly on the user's device. This can reduce cloud inference costs, API dependencies, data transfer, and token usage, potentially to zero for supported workloads.
Combined with MCP and WebMCP, applications can expose structured tools and actions directly to AI agents without relying on expensive, context-heavy DOM automation.
In this hands-on workshop, you will learn how to build local-first, agent-ready web applications designed around one goal: do more AI work in the browser, send less to the cloud, and minimize token costs.
High-Level Workshop Agenda
Block 1: The AI-Native Browser
From Cloud AI to Browser AI
- Tokens, context windows, latency, and API costs
- What changes when inference moves into the browser?
- Local-first, cloud-first, and hybrid AI architectures
- Privacy, latency, offline capabilities, and cost
Browser Built-in AI
- Understanding the browser-native AI architecture
- Models, capabilities, and feature detection
- Downloading and initializing browser models
- Capability detection and progressive enhancement
Coffee Break
Block 2: Prompt API
- Interact with the browser's built-in language model
- Create and manage sessions
- Use system prompts and initial prompts
- Stream responses
- Generate structured output
- Manage context windows
- Explore multimodal possibilities
Lunch Break
Block 3: Task-Specific Browser AI APIs
Discover why specialized APIs can be preferable to generic prompting.
Summarizer API
- Summarize documents, articles, and application content
- Configure summary types, formats, and lengths
- Stream generated summaries
- Summarize large documents with small context windows
Coffee Break
Block 4: Model Context Protocol and WebMCP
Model Context Protocol (MCP)
- Understand why agents need tools instead of prompts alone
- Work with resources, tools, and structured interfaces
- Understand MCP clients and servers
- Connect applications and developer tooling to AI agents
- Explore where MCP fits into modern web architectures
WebMCP
- Bring agent-accessible tools directly into web applications
- Understand how WebMCP differs from traditional MCP
- Expose application functionality to browser agents
- Use declarative WebMCP with HTML forms
- Use imperative WebMCP with JavaScript parameters
Q&A Session