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