Web Agent API Demos

Interactive walkthrough — step through detecting the Web Agent API, requesting permissions, and making your first tool call.

💬

Chat Demo API

Full-featured chat interface using window.agent.run() with MCP tool integration, streaming responses, and citations.

📄

Page Summarizer

Simple bookmarklet-style demo using window.ai.createTextSession() to summarize the current page. Shows Chrome API compatibility.

🔄

Chrome Compat Demo

Same summarizer but using the Chrome-compatible window.ai.languageModel.create() API style.

📧

Email Chat MCP

Chat with your email inbox using window.agent.run() with Gmail MCP tools. Setup wizard walks you through the process.

🔖

Page Chat Bookmarklet

Drag-and-drop bookmarklet that injects a chat sidebar into any page. Works on any website to chat about the current content.

🛒

Bring Your Own Chatbot

Demo showing how websites can integrate with the user's own AI chatbot via <link rel="mcp-server"> and agent.chat.open().

Web Agent Control

🧪

Basic Actions Start Here

Practice click, fill, and select on a simple form.

🧭

Multi-step Form

Validate fields, advance between steps, and use waitForSelector.

🔬

Research Agent Multi-Tab

Search Google, open multiple result tabs, and synthesize findings with AI using browser.tabs.create() and browser.tab.readability().

Multi Web Agent

🔬

Research Pipeline 4 Agents

Four agents collaborate in a sequence diagram view: Orchestrator coordinates, Searcher queries Google, Reader extracts content from pages, and Writer synthesizes findings into an article.

Note: These demos require a Web Agent API implementation (like Harbor) to be installed. The implementation provides the window.ai and window.agent APIs.

Build on this with Cursor, Claude, or Copilot?

Copy our starter guide into your project so the API, examples, and capabilities are in context. No Harbor clone required — just add the doc and point your AI at it.

Web Agents

Web Agent Control

Multi Web Agent