Inspiration

AI chat is easy to add to a website, but most assistants remain separate from the application. They can answer questions but cannot understand or use the actions the page already provides.

I built Agentak to close this gap: giving any website a browser-native AI agent without requiring a server, specific framework, or single AI provider. WebMCP was a major unblocker! a standard way for pages to expose structured tools that agents can discover and use.

What it does

Agentak adds a complete AI chat experience to any web page. It supports React, Vue, Preact, and plain JavaScript, and works with the included Pi agent or any custom backend.

The browser-based agent supports:

• Streaming answers, reasoning, Markdown, code, and tool results
• Eight providers, including options that require no API key
• On-device models through Chrome Built-in AI and wllama
• Provider, model, API key, and thinking-level controls
• Tool approvals, queued messages, stop, retry, and conversation forks
• Saved conversations, generated titles, context usage, and cost tracking
• WebMCP tool discovery from the current page
• A Chrome MV3 side panel that follows the active tab

With WebMCP, pages can publish actions such as “Search products,” “Read this record,” or “Add to cart.” Agentak discovers these tools, updates the list as the page changes, and lets the model call them. Read--only tools can run directly, while mutating actions can require approval.

Everything can run in the browser. Agentak does not place its own server between the user and their selected model provider.

How we built it

Agentak is a TypeScript and Preact workspace with a strict separation between the interface and agent runtime.

At its center is ChatSession, a small, framework-neutral contract. The chat only needs to subscribe to a session, read its state, send messages, stop work, and reset. The same interface therefore works with our Pi agent, a custom client runtime, or a remote backend.

The chat widget is wrapped for React, Vue, Preact, and plain JavaScript. Components use inline styles and design tokens, so no stylesheet or shadow root is required.

The optional agentak/pi entry adds:

• The Pi agent loop
• Provider and model selection
• Lazy-loaded model catalogs and provider APIs
• Typed host tools and WebMCP page tools
• Approval policies and tool results
• Storage, history, usage, and error handling

I also built a Chrome MV3 side panel using the same chat and session. It reads the active page, discovers WebMCP tools in the tab’s main world, resolves links against the page, and keeps conversation history separate for each site.

For local inference, wllama runs GGUF models through WebAssembly in a Worker. Supported Chrome installations can instead use the built-in Prompt API.

Challenges i faced

Keeping the package modular was a major challenge. Developers using only the chat UI should not download Pi, provider SDKs, model catalogs, or local-inference code. Separate entry points and lazy imports ensure applications load only what they use.

WebMCP brought its own challenges. It is experimental, browser support is limited, and live tool objects cannot cross extension boundaries. The extension therefore performs discovery and execution inside the source page, transferring only serializable metadata, arguments, and results.

Chrome MV3 also blocks remote executable modules and runtime-created blob: Workers. I bundled provider catalogs and wllama locally, then changed wllama’s Worker creation to load a packaged file.

Tool use required careful trust and approval design. Agentak distinguishes read-only and mutating actions, handles denied or aborted calls, warns users and models about untrusted page content, and ensures every tool call receives a result even when it fails.

API keys must remain usable without being stored as plaintext in localStorage. Agentak encrypts them using a non-extractable WebCrypto key stored in IndexedDB. We also explored an optional WebAuthn PRF device lock while handling missing credentials, cancelled prompts, and user-gesture requirements.

Finally, chat interfaces are deceptively complex. Streaming, growing composers, mobile keyboards, queued messages, approvals, settings, history, safe links, and stable transcript rendering must work together without making typing or scrolling feel slow.

Accomplishments i'm proud of

Agentak is more than a chat box. It is a complete browser-agent interface that can understand and use tools deliberately exposed by a website.

Highlights include:

• One chat experience across React, Vue, Preact, and plain JavaScript
• A clean session boundary supporting Pi and custom agents
• Cloud, anonymous, and on-device models
• Dynamic WebMCP discovery with approval and trust controls
• A Chrome side panel that follows the active tab
• Local GGUF models inside an MV3 extension
• Encrypted browser storage for provider keys
• History, retry, forks, usage tracking, and generated titles
• Lazy provider and catalog loading
• No required Agentak backend

I am especially proud that the extension and embedded widget share the same core instead of using separate implementations.

What i learned

Browser-native agents need more than model access. The difficult parts are capability discovery, trust, lifecycle management, storage, approvals, and clearly presenting each action to the user.

Tool metadata is part of the security model. Fields such as “read only” and “untrusted content” must affect behavior, not merely serve as documentation.

On-device AI also requires designing around resource limits. Model size, download time, memory, context windows, Worker restrictions, and mobile hardware determine whether a local model is genuinely useful.

Most importantly, a small, stable interface between the UI and runtime creates flexibility. Because ChatSession is independent of Pi, Agentak can evolve with new agents, providers, and browser standards without rebuilding the entire chat experience.

What’s next

We plan to:

• Validate the experience across more browsers and provider accounts
• Test WebMCP with more live implementations as the specification evolves
• Publish the side panel in the Chrome Web Store
• Add conversation compaction for long-running chats
• Improve local-model downloads, caching, and device guidance
• Expand browser automation beyond reading the active tab
• Strengthen accessibility and mobile-browser testing
• Add more custom-agent and WebMCP examples
• Improve key protection and device-lock flows
• Build a community library of interoperable page tools

The long-term goal is to make AI a native capability of the web: portable across frameworks and models, able to use structured page actions, and always understandable and controllable by the user.

Built With

• md4x
• pi
• preact
• rangi
• typebox
• typescript
• vite