Inspiration

Prescription shopping is a good example of a workflow where ordinary browser automation quickly becomes fragile.

A user may need to search for a medication, identify the correct strength and form, compare fulfillment options, understand medication information, choose delivery, manage a cart, and move through checkout.

An agent trying to accomplish that by visually reading a page has to continually reconstruct the application's state from text and pixels.

I wanted to explore a different model:

What if the website explicitly told the agent what it can do?

That is what WebMCP enables.

ClearDose turns the underlying actions of a prescription-shopping experience into structured tools that an agent can discover and call directly.

What I built

ClearDose is a local-first prescription reference and simulated commerce application.

Users can:

  • Search medications by generic or brand name
  • Inspect structured medication information
  • Choose exact form, strength, and quantity configurations
  • Compare fictional pharmacy and delivery options
  • Compare public medication reference information
  • Create a prescription request summary
  • Add and remove items from a cart
  • Compare current cart savings
  • Select delivery options
  • Complete a simulated checkout
  • Inspect simulated order status

The same application capabilities are also exposed to WebMCP agents.

For example, a user can ask:

Find available sleep medications, compare the best options, add the selected option to my cart, and prepare checkout.

The agent can translate that request into a sequence of structured application operations instead of visually navigating the interface.

Why WebMCP

ClearDose is a strong fit for WebMCP because medication and fulfillment comparisons depend on exact structured state.

A meaningful comparison can depend on:

  • medication
  • active ingredient
  • dosage form
  • strength
  • quantity
  • fulfillment option
  • delivery method

WebMCP lets ClearDose expose those values through explicit JSON schemas rather than asking an agent to infer them from the rendered interface.

ClearDose exposes tools for medication search, medication details, exact fulfillment comparison, selecting offers, cart management, delivery changes, simulated checkout, order status, medication comparison, and Drug Explorer workflows.

The result is an application contract for agents instead of a collection of buttons they have to reverse-engineer.

Human + Agent Collaboration

One of the most important parts of the project is that there is not a separate "AI version" of the application.

The normal Vue interface and the WebMCP tools operate on the same underlying Pinia state and application services.

If the agent adds an item to the cart, the user sees it.

If the user changes the selection manually, the agent works with that new state.

That allows control to move naturally between the human and the agent.

The agent handles repetitive navigation and information gathering while the human remains responsible for decisions.

ClearDose deliberately does not turn medication similarity into autonomous treatment recommendations.

Public medication information is also kept separate from the fictional commerce layer used by the demo.

How I Built It

ClearDose is built with Vue 3, Vite, Pinia, browser-local storage, and WebMCP.

I created a shared application action layer used by both normal UI components and WebMCP handlers.

For example, the visible Add to Cart button and the add_to_cart WebMCP tool ultimately call the same underlying cart behavior.

Medication information is normalized through a data layer that can work with sources including:

  • RxNorm
  • openFDA
  • NADAC

The application keeps public medication facts, cached data, fallback data, and fictional commerce information explicitly labeled.

WebMCP tools use strict schemas, bounded results, runtime validation, state checks, and clear read/write behavior.

I also built a WebMCP documentation and Agent Lab experience so the application's tool catalog, schemas, prompts, workflows, and recent tool calls can be inspected directly.

Challenges I Faced

One major challenge was handling a domain where two medications that look similar in a search result are not automatically interchangeable.

That made exact state and provenance important throughout the application.

Another challenge was keeping the WebMCP layer from becoming a second implementation of the product.

I wanted the agent and the UI to share business logic instead of slowly diverging.

Designing useful tool schemas was also more difficult than simply exposing JavaScript functions. Tool names, argument limits, outputs, recovery instructions, destructive actions, and context all affect how reliably an agent can use an application.

What I Learned

The biggest thing I learned is that making software "agent-ready" is much more than adding an AI chat box.

Applications already contain useful domain operations.

WebMCP provides a way to expose those operations explicitly.

I also found that small composable tools work better than giant automation commands because an agent can inspect the result of each operation and decide what should happen next.

What's Next

ClearDose could be extended with additional verified public healthcare datasets and, where appropriate permissions and regulatory controls exist, real fulfillment integrations.

More broadly, the same design applies to any complex commerce system where product configuration, provenance, comparisons, and human review matter.

Built With

Share this project:

Updates

Submission history