-
-
BayShift
Inspiration
Container yards look orderly from a distance, but every retrieval is a live coordination problem. The container needed next may be buried under other cargo, destinations may become unavailable, and an operator can change the physical plan while an agent is still reasoning. A stale instruction is not just inconvenient in this setting; it can be unsafe.
We built BayShift to explore what an agent-native operational website should feel like when a person and an AI must share control without silently overwriting each other.
What it does
BayShift is a live container-yard relocation workbench. A human operator and a browser agent act on the same five-stack yard through one deterministic logistics engine.
The operator can select targets, move containers, lock stacks, trigger disruptions, inspect the action trail, and rewind work. Through WebMCP, the agent can:
- inspect the live yard and priority target
- locate containers and analyze physical blockers
- validate a proposed move against yard rules
- simulate ranked minimum-move relocation plans without mutation
- execute one authoritative relocation
- retrieve an exposed target
- inspect everything that changed after a known version
- rewind a real yard action
Every action is reflected on the same visual canvas and recorded as HUMAN, AGENT, or SYSTEM provenance.
Why this is a strong fit for WebMCP
Ordinary browser automation sees pixels and clicks controls. BayShift exposes the meaning of the operation: blockers, constraints, legal destinations, versions, dry runs, mutations, and recovery.
The key mechanism is optimistic concurrency for human-agent collaboration. Every destructive tool requires the exact expectedStateVersion the agent inspected before planning. If the operator changes the yard first, BayShift rejects the old command with STALE_STATE, returns the expected and current versions, and asks the agent to inspect and replan. Nothing partially mutates.
This makes the website better for both sides. The person keeps visible control of the physical operation; the agent gets precise capabilities rather than guessing from the interface; and conflicts become explicit, recoverable events instead of hidden mistakes.
What people and agents can do together
A person can introduce real operational judgment while an agent handles structured inspection and constrained planning. In the demo, the agent inspects a buried priority container, identifies its blockers, simulates legal moves, and begins execution. The shared state changes during the workflow, so the agent re-inspects and continues from the current yard rather than blindly following an obsolete plan.
The result is not “AI controlling a dashboard.” It is a shared workspace where both participants can act, observe each other, recover from conflict, and leave one auditable history.
How we built it
BayShift is a client-side React and TypeScript application deployed on Vercel. Native tools are registered through document.modelContext.registerTool with strict JSON schemas and read/write annotations.
Both the human interface and all nine WebMCP tools call the same domain functions. The engine enforces LIFO movement, maximum stack height, stack and container locks, crane-lane outages, weight ordering, reserved-destination compatibility, urgency metadata, and exposed-target retrieval. Planning is deterministic and non-mutating. Accepted mutations increment stateVersion; rejected commands never partially change state.
The UI includes a responsive 2.5D yard, a priority queue, plan previews, agent tool traces, metrics, disruptions, and a before/after action ledger. Vitest covers the domain and WebMCP contracts with 18 tests, including stale-state rejection, identical human/agent transitions, retrieval, and rewind.
Challenges
The hardest part was not exposing buttons as tools. It was designing a semantic tool surface that gives an agent enough operational context while keeping every mutation bounded, versioned, and visible to the person. We also had to ensure the visual yard, tool results, and audit history were projections of one state rather than loosely synchronized copies.
Accomplishments
- Nine native WebMCP tools with deliberate read and write boundaries
- One authoritative engine for human and agent actions
- Structured stale-state rejection and recovery
- Deterministic, non-mutating relocation simulation
- Actor-attributed audit history and physical rewind
- A complete deployed experience rather than a tool-only proof of concept
- 18 automated domain and contract tests
What we learned
WebMCP is most valuable when a website exposes domain intent, not DOM mechanics. The strongest agent experience came from designing conflict, reversibility, and provenance as first-class product behavior. We also learned that sharing a state safely is more important than giving an agent broad autonomy.
What's next
A production version would connect the same tool contracts to a persistent yard event store, authenticated operator roles, live crane and truck telemetry, and approval policies for higher-risk moves. The challenge build intentionally keeps state local and the planner bounded so judges can inspect the complete interaction reliably.
Built With
- react
- typescript
- vercel
- vite
- vitest
- webmcp