Inspiration
The web was designed primarily for humans: pages, buttons, forms, filters and menus. AI agents can use these interfaces, but they often have to interpret the DOM, locate the correct controls and simulate human interaction.
ProcureMesh explores a different model for the open web: websites exposing structured, trustworthy capabilities directly to agents while humans remain informed and in control.
Procurement is a strong example because buying decisions involve structured requirements, supplier qualification, commercial comparison, compliance rules and actions that should not happen without appropriate human oversight.
What it does
ProcureMesh is an agent-native procurement marketplace built around WebMCP.
A buyer defines a procurement mission such as:
- required service
- maximum budget
- delivery deadline
- minimum technical score
- minimum HSE score
- local-content requirements
- desired shortlist size
Instead of forcing an AI agent to navigate the website by interpreting buttons and supplier cards, ProcureMesh exposes structured WebMCP tools that the agent can discover and use directly.
The application supports capabilities including:
search_suppliers— find and qualify suppliers against the buying missioninspect_supplier— inspect a supplier's commercial, technical and compliance informationcompare_suppliers— compare qualified suppliers using deterministic procurement rulescreate_shortlist— create a supplier shortlistdraft_rfq— prepare a structured request for quotationsubmit_rfq— request simulated RFQ issuance with human approvalget_audit_log— inspect the human and agent action history
The same application state is visible to both the human and the agent, so users can see what the agent is doing rather than treating automation as a black box.
Why WebMCP
WebMCP is not an add-on to ProcureMesh; it is the core interaction model.
A conventional browser agent may need to:
- understand the layout of a marketplace
- locate filters
- click supplier cards
- interpret tables
- fill forms
- track changing page state
ProcureMesh instead exposes explicit capabilities with structured inputs and outputs.
The interaction becomes:
Human defines intent → Agent discovers WebMCP tools → Application validates business rules → UI reflects the action → Human approves consequential actions
This creates a more reliable and transparent interface between websites and AI agents.
Human + Agent Collaboration
ProcureMesh demonstrates a division of work where each participant does what they are best suited to do.
The human defines the procurement strategy, mandatory constraints and approval boundaries.
The agent can rapidly search, inspect, compare and prepare actions.
The application independently validates mandatory procurement rules.
For example, a supplier cannot become acceptable simply because it has a strong overall score if it fails a mandatory HSE, budget, delivery or local-content requirement.
For consequential actions such as issuing an RFQ, human approval remains part of the workflow.
Our design principle is:
The model proposes. Business rules validate. Humans approve consequential actions.
How we built it
ProcureMesh is implemented as a lightweight web application using React and TypeScript.
The WebMCP integration uses the browser's document.modelContext.registerTool() interface to expose procurement capabilities with defined names, descriptions, input schemas and execution handlers.
Both the normal human interface and WebMCP tools use the same underlying procurement business logic. This avoids maintaining separate rules for humans and agents.
Supplier qualification is deterministic rather than generated by an LLM.
Mandatory criteria include:
- budget
- delivery
- technical threshold
- HSE threshold
- local-content requirements
Eligible suppliers can then be ranked using commercial, technical, HSE and delivery criteria.
The demonstration uses fictional supplier data so that the complete workflow can be tested safely and consistently without exposing real supplier information.
Agent Action Ledger
One of the key features is the Agent Action Ledger.
When an agent searches suppliers, inspects a company, performs a comparison, creates a shortlist or prepares an RFQ, the activity becomes visible in the application.
This creates an auditable human-agent workspace instead of invisible browser automation.
The ledger distinguishes between human and agent activity and records important workflow events such as approval requests, rejections and simulated RFQ issuance.
Safety and Trust
ProcureMesh follows a human-in-the-loop approach.
Read-only research actions are separated from actions that change procurement state.
Supplier-provided content is treated as untrusted data rather than executable instructions.
Tool inputs are validated against explicit schemas and procurement rules.
Consequential operations require additional controls rather than allowing an agent to perform them silently.
All supplier names, pricing, scores, certifications and qualification information in the demonstration are fictional.
Challenges
One of the main design challenges was deciding what an agent should be allowed to do autonomously and what should remain under explicit human control.
Another challenge was making WebMCP fundamental to the application instead of simply adding one demonstration tool to an otherwise traditional web app.
We addressed this by designing the entire procurement workflow around reusable business capabilities that can be invoked by either the human interface or WebMCP.
What we learned
Building ProcureMesh changed the way we think about web interfaces.
The future agent-accessible web may not be about teaching increasingly sophisticated models how to click every possible interface.
A complementary approach is for websites themselves to expose useful, well-described and safely constrained capabilities.
WebMCP creates an opportunity to make websites understandable to both humans and agents without removing human oversight.
What's next
ProcureMesh currently focuses on a controlled procurement demonstration.
The broader vision is an open procurement ecosystem where supplier websites, marketplaces and enterprise platforms can expose standardized agent-accessible capabilities for:
- supplier discovery
- qualification
- RFQs
- commercial clarification
- catalogue queries
- availability
- compliance evidence
- tender participation
- order status
ProcureMesh is an experiment in what procurement could look like when the open web becomes natively usable by both people and their agents.
Built With
- css3
- github
- html5
- javascript
- localstorage
- react
- typescript
- verceltailwind
- vite
- vitest
- webmcp
Log in or sign up for Devpost to join the conversation.