⚓

Web Agent API Demos

Choose your LLM. Choose your MCP servers. Choose your tools. The Web Agent API (window.ai, window.agent, navigator.modelContext) gives you the building blocks — every integration decision is yours.

Web Agents

Choose an LLM, pick your tools, build with the API

🚀

Getting Started Start Here

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

Choose how the AI interacts with the page — click, fill, scroll, or observe

🧪

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

Choose your agent topology — pipelines, parallel, or custom routing

🔬

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. You choose the LLM backend (Ollama, llamafile, cloud providers) and which MCP servers to connect. The implementation provides window.ai, window.agent, and navigator.modelContext.

Aligned with the W3C WebMCP proposal

Harbor implements navigator.modelContext from the W3C WebMCP proposal — the emerging standard for pages to register JavaScript tools that AI agents can call. Same API shape proposed by Google and Microsoft, available today.

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.