Sourcing Scenario Room

Inspiration

As a procurement director working with complex supplier decisions, I regularly see how difficult it is to combine structured sourcing data, judgment, negotiation constraints, and human accountability in one workflow.

AI can already help buyers analyze supplier offers, but it usually sits outside the sourcing application. That creates friction: users copy data into chat, interpret the answer, and then manually reconcile it back into their working system.

Sourcing Scenario Room came from the idea that this interaction should be different: the buyer and the AI agent should operate on the same visible sourcing state through WebMCP, while the human keeps decision authority.

What it does

The application starts from a fictional sourcing case with three supplier offers evaluated across five dimensions: price, delivery lead time, capacity, quality, and supply risk.

The buyer can express sourcing intent in natural language. Through WebMCP, the agent reads the current application state and updates the shared workspace directly.

A typical flow is:

1. The agent reads the current sourcing case.
2. The buyer makes delivery within 12 weeks mandatory, prioritizes supply continuity, and asks to keep two suppliers alive.
3. The agent updates the workspace and creates an AGENT PROPOSAL.
4. The agent generates a negotiation plan for the live shortlist.
5. The buyer revises the proposal directly in the application, for example by keeping Boreal in the shortlist while limiting the acceptable price premium to 3%.
6. The workspace becomes HUMAN-REVISED.
7. The agent reads that revision and adapts the negotiation plan accordingly.

The agent can propose and adapt, but it cannot award a supplier. Decision authority remains with the human buyer.

How we built it

Sourcing Scenario Room is a client-side React/Vite application using native WebMCP through document.modelContext.registerTool().

It exposes three WebMCP tools:

• get_sourcing_case
• update_sourcing_scenario
• draft_negotiation_plan

The human interface and the WebMCP tools operate on the same canonical React sourcing state through shared application actions.

There is no backend, database, authentication layer, OpenAI API integration, or external API dependency.

Challenges we ran into

The main challenge was designing a demo that made the human-agent interaction clear without hiding it behind unnecessary complexity.

I deliberately limited the case to five sourcing dimensions, three suppliers, and three WebMCP tools.

Another challenge was preserving human decision authority. The application therefore makes the state transitions explicit:

BASE CASE → AGENT PROPOSAL → HUMAN-REVISED

This makes it visible when the agent has proposed something, when the human has changed it, and when the agent is responding to the latest human decision.

Accomplishments that we're proud of

The most important result is that the agent is not simply generating advice beside the application.

The buyer and agent work through the same sourcing workspace. The agent can read the current state, modify the scenario, generate a negotiation artifact, observe a later human revision, and adapt to it.

That creates a genuine human-agent loop while keeping supplier selection authority with the buyer.

What we learned

The biggest insight was that WebMCP changes the interaction model.

The valuable part is not simply allowing an AI to call functions. It is enabling the human and the agent to collaborate through the same visible application state.

Human revisions become first-class inputs to the next agent action instead of context that must be manually reconstructed in chat.

What's next for Sourcing Scenario Room

The same pattern could extend to richer procurement workflows such as tender preparation, supplier risk, negotiation tracking, sourcing approvals, and contract review.

More broadly, the approach could apply to enterprise workflows where humans and agents need to collaborate on structured decisions while preserving explicit human authority.

Built With

• css
• html
• javascript
• react
• typescript
• vite
• webmcp