DEV Community: Toan Nhu

WebMCP: Give Browser Agents Tools Instead of Buttons

Toan Nhu — Sun, 30 Aug 2026 17:12:23 +0000

AI agents can already browse a site, find a form, type into it, and click Submit.

That works—until the button moves, the label is ambiguous, the form changes state, or the workflow spans six screens.

WebMCP proposes a better contract: let the page tell the agent which actions are available, what inputs they accept, and how to call them.

Instead of making an agent reverse-engineer the UI, a web app can expose tools such as:

search_emails
get_email
start_compose
reply_to_email
move_email

The human interface stays. WebMCP adds a structured interface for the agent working alongside the human.

The problem with simulated clicks

Most browser agents rely on actuation: they inspect a page and simulate human actions such as clicking, typing, and scrolling.

Every step adds uncertainty:

Does “Continue” submit the form or open another step?
Is the visible search box global or scoped to the current mailbox?
Is a disabled field unavailable, or does another field need to be completed first?
Did navigation make the agent's previous understanding stale?

A redesign that is harmless to a person can break automation. The agent is trying to infer an application's behavior from an interface that was designed for eyes and hands.

WebMCP moves that interaction from inference toward an explicit contract.

What a WebMCP tool looks like

A page can register a tool with a name, description, input schema, and execution function.

Here is a simplified example:

await document.modelContext.registerTool({
  name: "search_emails",
  description: "Search email metadata in the active mailbox.",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string" }
    },
    required: ["query"]
  },
  execute: async ({ query }) => {
    return searchMailbox(query);
  }
});

The application still owns searchMailbox(). Its existing authorization, validation, business rules, rate limits, and audit behavior still apply.

The difference is that the agent can call a defined capability with validated arguments instead of reconstructing the workflow from the DOM.

The three-part interaction model

1. The page registers tools

The application exposes only the capabilities that make sense in the current context.

A public product page might register get_pricing. An authenticated workspace might expose list_mailboxes. A mailbox view could add search_emails and remove it when the user navigates away.

This is important: the tool surface follows the page lifecycle. The agent does not receive permanent access to everything the product can do.

2. The browser discovers them

A WebMCP-aware browser collects tools registered by the active page and presents them to a compatible agent.

The schema tells the agent what input is valid. The page state tells it which tools are currently available.

3. The agent calls a tool

The agent selects the capability that matches the user's request and supplies structured arguments. The application validates them, executes the operation, updates the visible UI, and returns a structured result.

The action still happens inside the application. WebMCP does not create a side door around the product.

Declarative vs. imperative WebMCP

WebMCP provides two ways to expose tools.

The declarative API annotates standard HTML forms. It is useful when the workflow already maps cleanly to a form and needs only a machine-readable name and description.

The imperative API registers tools with JavaScript. It fits dynamic applications, navigation, stateful workflows, and actions that need custom validation or execution logic.

If your product has a multi-step state machine, permission-dependent actions, or consequential operations, the imperative API will usually give you the control you need.

WebMCP is not MCP in the browser

The similar names can be misleading.

MCP connects an AI application to services, backend systems, data sources, and workflows. It can work without a visible browser session.
WebMCP exposes capabilities from the website currently open in the browser. Actions execute in the page's context.

They solve different layers and can complement each other. A product might provide MCP for direct service integration and WebMCP for browser-native collaboration with the user.

Why security has to be part of the tool design

Structured tools improve reliability, but a well-shaped schema is not a security boundary.

Treat every call as untrusted input and design for the consequence of the action.

Validate at execution time

The schema helps an agent construct a valid request. The application must still validate types, identifiers, permissions, state, and business invariants when the tool runs.

Keep results bounded

Return the smallest projection needed for the task. A search tool should not dump an entire mailbox or customer database into the agent context.

Treat page content as untrusted

An email, support ticket, document, or product description may contain instructions aimed at an agent. Content inside the application does not gain authority merely because an agent can read it.

Require visible confirmation

Sending a message, making a purchase, deleting data, or changing permissions should not happen silently. The application should show the intended action and let the user approve or cancel it.

Bind tools to context and lifecycle

Register a tool only while its required context exists. Cancel pending operations and remove obsolete registrations when navigation or application state changes.

A practical rollout strategy

WebMCP is still experimental, so treat it as a progressive enhancement.

Start with read-only tools.
Feature-detect the API and preserve the normal experience for unsupported browsers.
Add bounded, low-risk operations before consequential ones.
Put visible confirmation in front of outbound or destructive actions.
Measure registration failures, validation errors, cancellations, and execution outcomes without logging sensitive payloads.
Test whether agents select the right tool—not only whether the tool succeeds when called directly.

Chrome's documentation currently describes an origin trial and a local-development flag. The proposal remains under active discussion, so APIs and browser support may change.

What web developers should do now

You do not need to rebuild your product around agents.

Pick one workflow that browser automation handles poorly today. Define the smallest safe capability that would make it deterministic. Give it a precise name, a narrow schema, strict runtime validation, bounded output, and an explicit confirmation step when consequences extend beyond the current page.

The useful question is no longer only, “Can an agent click through this interface?”

It is: What contract should this application offer an agent acting for its user?

That shift—from interpreting pixels and DOM structure to invoking explicit, contextual tools—is why WebMCP deserves every web developer's attention.

References

From Data Engineer to Solving a Retention Problem Most Small Teams Still Struggle With

Toan Nhu — Thu, 16 Apr 2026 03:24:44 +0000

After years building data systems, I started noticing that the real growth problem for many small teams was not acquisition, but the messy and manual work of turning customer insight into retention campaigns that feel personal, well-timed, and effective.

For years, I worked as a Data Engineer, building large-scale data systems and marketing infrastructure for one of the biggest e-commerce companies in Vietnam. My work touched attribution systems, performance dashboards, CDPs, and affiliate platforms. Like many people working close to growth teams, I spent a lot of time around metrics such as CAC, ROAS, funnel conversion, and campaign performance.

But over time, one thing became more obvious to me.

Modern businesses have become very good at measuring acquisition. They can track ad spend, campaign performance, and user behavior with impressive precision. Yet when it comes to retention, many teams still operate with messy workflows, generic messaging, and disconnected tools. The data exists. The intent exists. The execution often does not.

That gap is what led me to build Nudgen.

Nudgen is an AI-powered retention email automation platform built for shop owners and growing SMEs. The goal is simple: help businesses run personalized, on-brand email campaigns without getting buried under complex workflow builders or manual follow-up. Instead of pushing teams to create giant automation trees, Nudgen focuses on behavior-driven journeys, AI-assisted drafting, and follow-up that automatically stops once customers engage.

The overlooked revenue lever

When most businesses want to grow, they usually lean on one of two paths.

The first is acquisition. Run ads, bring in traffic, optimize landing pages, and keep feeding the funnel. That can work, but it is expensive and increasingly hard to control. Customer acquisition costs move unpredictably, attribution gets more complicated, and profitable growth becomes harder to sustain over time.

The second path is re-engagement. This is the quieter opportunity, and often the more overlooked one.

Most businesses already have first-party data. They have customer history, browsing behavior, purchases, churn signals, and a rough idea of who should come back. In theory, retention should be one of the clearest growth opportunities available. In practice, it is often underused because teams lack the time, systems, or tooling to turn insight into action.

That is the real retention problem.

It is not that businesses do not know retention matters. It is that too many retention programs are still slow to set up, hard to personalize, difficult to measure, and too easy to over-send.

Why retention campaigns often fail

A lot of businesses want to launch win-back flows, welcome sequences, abandoned cart reminders, or post-purchase follow-ups. But their current tools and workflows get in the way.

Some send mass emails that feel generic and disconnected from actual customer behavior. Others try to personalize, but the copy still sounds robotic. Some teams build automation flows that look powerful on paper, then become too painful to maintain in real life. And many businesses still struggle to answer basic questions like:

Which message worked? Which audience converted? When should the sequence stop?

This matters because bad retention is not neutral. It creates real costs.

Poorly timed emails annoy customers. Repetitive messages train people to ignore your brand. Weak targeting wastes send volume. And when campaigns continue after a user has already clicked, purchased, or re-engaged, the automation starts working against the customer experience instead of improving it.

That is why I believe retention is not about sending more emails. It is about sending the right message, at the right time, to the right person, and knowing when to stop.

What I wanted to build differently

Nudgen was built around a simple belief: retention should feel more like a smart execution layer than a complicated marketing control panel.

Instead of asking users to architect giant branches and flows from scratch, Nudgen starts from the customer moment. You choose the audience, define the goal, review the AI-generated draft, and launch. From there, the platform handles the follow-up while keeping everything aligned with your brand voice and stopping future nudges when the customer has already taken action.

That approach is shaped by both data engineering and practical marketing reality.

From the engineering side, I care deeply about systems that are measurable, event-driven, and reliable. From the business side, I know most smaller teams do not want to become lifecycle marketing specialists just to launch a useful campaign.

They want something that works.

How Nudgen approaches retention

At its core, Nudgen combines a few ideas that matter more than flashy automation diagrams.

The first is AI-assisted drafting. Nudgen helps generate campaign drafts based on the goal and brand voice, so businesses can get to a usable first version faster. The message can still be reviewed, edited, previewed, and tested before anything is sent.

The second is personalized, on-brand messaging. Instead of treating every contact the same, the system is designed to support messaging that feels more relevant to the person receiving it while staying consistent with the business’s tone.

The third is behavior-driven automation. Nudgen is built around real customer actions, not just static schedules. That matters because retention should follow context, not just a timer.

The fourth, and arguably the most important, is auto-stop logic. If a customer clicks, buys, unsubscribes, or otherwise re-engages, future nudges can stop automatically. This keeps campaigns helpful instead of repetitive and protects the customer experience.

There is also an operational layer behind the scenes. Delivery reliability, unsubscribe and bounce handling, and contact data protection are not flashy, but they matter a lot in real campaign execution.

Who Nudgen is really for

Many email products are built for dedicated marketers. Nudgen is intentionally aimed at a different type of user: shop owners and growing SMEs that want to improve customer lifetime value without learning heavyweight enterprise email software.

That positioning matters.

A lot of smaller teams do not need a giant system with endless branching logic. They need a way to launch useful campaigns quickly, trust what is being sent, and avoid turning follow-up into another full-time job.

This is where the product direction becomes interesting. Nudgen is not trying to win by offering the most complicated automation suite. It is trying to win by reducing friction between business intent and campaign execution.

The bigger vision: from AI-powered campaigns to auto marketing

What excites me most is not just email automation by itself. It is the larger direction behind it.

The long-term vision is auto marketing: a world where AI Agents can run major parts of the marketing workflow for users.

Today, Nudgen focuses on AI-powered campaigns and the operational foundation needed to automate them well. But the direction goes further than assisted drafting.

Nudgen already has an interactive CLI designed so users and AI Agents can operate the platform more directly:

CLI Introduction - Nudgen

Master the Nudgen marketing automation platform via its interactive Command Line Interface.

docs.nudgen.net

That may sound like a small technical detail, but I think it points to a much bigger shift.

In the traditional model, humans manually create segments, write sequences, define branching logic, test drafts, monitor engagement, and tweak flows forever.

In the future model, AI Agents should be able to do much more of that work: understand campaign goals, operate tooling, launch targeted outreach, and optimize execution while humans stay focused on strategy and brand direction.

That is the direction I believe marketing is heading.

Not more dashboards. Not more manual branching. More intelligent systems that can operate with context.

Nudgen’s current product reflects an early version of that future: personalized campaigns, behavior-driven follow-up, reviewable AI drafts, and tooling that is increasingly friendly to automation by AI Agents.

Where this approach has real strengths

One of the strongest parts of the Nudgen story is that it begins from a real operational problem rather than a vague “AI for marketing” promise.

The focus on retention gives the product a sharper point of view. It is not trying to solve every possible marketing channel at once. It is trying to improve a part of the business that often gets less attention than acquisition, even though it can have a direct effect on repeat revenue and customer lifetime value.

Another strength is usability. The product consistently emphasizes simple setup, audience selection, preview and testing, and automation that does not keep sending after a customer has already engaged. That combination makes the value proposition easier to understand for smaller teams.

The AI-agent angle is also compelling. A lot of products talk about AI as a writing assistant. Fewer seem to think seriously about AI as an operator inside a marketing workflow. Nudgen’s CLI direction suggests a more agent-friendly future, which gives the product a more distinctive long-term narrative.

The honest pros and cons

No product is perfect, especially early-stage software, so it is worth being balanced.

Pros

Clear positioning

Nudgen has a focused message: retention automation for shop owners and growing SMEs. That makes it easier to understand who the product is for.

Behavior-driven follow-up

The auto-stop logic is genuinely useful. A lot of email fatigue comes from automations that keep sending after the customer has already taken action. Nudgen addresses that directly.

AI with practical guardrails

The platform does not frame AI as “press one button and hope for the best.” It still emphasizes review, preview, testing, and brand consistency.

Good fit for lean teams

The product is designed for people who want useful campaigns live fast, not for teams that enjoy building giant flowcharts.

Strong long-term vision

The AI Agent and CLI direction gives the platform a broader future than just email drafting.

Cons

Narrower scope today

The focus on retention is a strength, but it also means businesses looking for an all-in-one marketing suite may still need other tools alongside it.

Education is still required

Even with simpler workflows, smaller businesses may still need help understanding segmentation, timing, and what good retention strategy actually looks like.

The AI-agent future is promising but still unfolding

The vision for auto marketing is exciting, but for many businesses it will take time before AI Agents managing campaigns feels fully normal or trusted at scale.

Those are not deal-breakers. They are just the realities of building a focused product in a space full of broad platforms.

Why I believe this matters now

We are entering a period where acquisition is getting noisier, more expensive, and harder to measure cleanly. At the same time, businesses already have more first-party data than ever. The opportunity is there, but the tooling gap remains real.

That is why I think the next generation of marketing tools will not simply add more features. They will reduce operational drag. They will turn intent into execution faster. And increasingly, they will be designed so AI can participate as an operator, not just a copy helper.

That is the problem space I care about.

Nudgen is my attempt to build toward that future from a practical starting point: help businesses run better retention campaigns now, while laying the foundation for a world where AI Agents can handle more of the marketing execution layer.

Final thoughts

Building a product always starts with noticing a problem that feels too common to ignore.

For me, that problem was retention execution.

Businesses already know retention matters. They already know existing customers are valuable. They already know generic mass emails are weak. What they often lack is a simple, reliable system that helps them act on that knowledge without adding more complexity.

That is the gap Nudgen is trying to close.

It brings together a data-engineering mindset, AI-assisted campaign creation, behavior-driven automation, and a longer-term belief that marketing will increasingly be run with the help of AI Agents.

And honestly, that is the part I am most excited about.

Because the future is not just better email copy.

It is better marketing systems.

Explore Nudgen

If you want to see what that looks like in practice, you can explore Nudgen here: https://nudgen.net

If you want to learn more about the AI Agent / CLI direction, check the docs here: https://docs.nudgen.net/en/cli/introduction

And if you create content, have an audience, or want to promote a product aligned with AI-powered marketing automation, Nudgen also has an affiliate program. It offers 10% recurring commission and is a simple way for creators, communities, and partners to earn while sharing a product aligned with AI-powered marketing automation: https://nudgen.net/affiliate

Bug Hunter: I Turned Every Website Into A Debugging Horror Game

Toan Nhu — Thu, 02 Apr 2026 05:22:36 +0000

This is a submission for the DEV April Fools Challenge

What I Built

I built Bug Hunter, a Chrome extension that spawns crawling bugs on top of real websites so you can "debug" them by smashing them.

It solves absolutely nothing in real life, which makes it perfect for this challenge.

Open any page, start Bug Hunter, pick a tool, and hunt.

Smash bugs to lower your stress meter and boost score.

Miss too many and the page becomes a full-blown infestation.

Delightfully useless? Yes.

Strangely therapeutic? Also yes.

Demo

Code

Nudgen-Marketing / bug-hunter

Bug Hunter is a Chrome Extension game that overlays crawling bugs on real web pages. You pick a tool, squash bugs, reduce stress, and chase a high score.

Bug Hunter

Bug Hunter is a browser extension game that overlays crawling bugs on real web pages. You pick a tool, squash bugs, reduce stress, and chase a high score.

Features

Real-page bug crawling and interaction
Weapon/tool selection from popup UI
Stress meter game loop and score feedback
Local progression storage (best score + achievements)
Cross-browser Manifest V3 packaging for Chrome, Edge, and Firefox

Tech Stack

TypeScript
Preact (popup UI)
Esbuild
Browser Extension Manifest V3
Vitest

Project Structure

src/content/ : game runtime injected into web pages
src/popup/ : extension popup UI
src/background/ : service worker bridge for tab injection/actions
src/shared/ : progression and storage helpers
assets/ : icons and static assets
dist/<browser>/ : browser-specific build output
artifacts/ : packaged zip files for store uploads

Requirements

Node.js 18+
npm 9+
Chrome 120+, Edge 120+, or Firefox 128+

Local Development

Install dependencies
```
npm install
```
Build all browser targets:
```
npm run build
```
Load…

View on GitHub

How I Built It

Chrome Extension Manifest V3
and TypeScript that's it

Key features:

Bug crawling behavior over live page elements
Tool/weapon interactions and score feedback
Stress-meter game loop with win/lose states
Session-based overlay effects (no permanent page modifications)

Prize Category

Community Favorite

I built Bug Hunter to be immediately funny, fast to try, and fun enough to replay for a "higher score + lower stress" run.

Team Submissions: toannhu96

If this made you laugh, react/comment so more people can discover this beautifully unnecessary extension.