SameState - Redux_WebMCP

• 

  The developer workflow: an agent receives scoped context, discovers declared tools, and tests a real frontend flow by intent.

• 

  The customer-agent workflow: a customer agent reaches Breeze through a safe public WebMCP gateway.

• 

  Codex uses a declared WebMCP storefront action to add Quiet Lamp through the same Redux command path used by a person.

• 

  SameState makes an ecommerce frontend agent-native with structured tools, shared state, and observable progress.

• 

  Breeze keeps durable conversation context while private catalog capabilities remain protected behind the website backend.

• 

  Breeze returns a product recommendation backed by authorized catalog information and visible evidence.

• 

  A live human-and-agent workflow where Codex operates the real SameState storefront through WebMCP.

• 

  redux-webmcp gives an agent safe frontend context, typed actions, state inspection, and transition evidence.

• 

  A website-owned service agent can help a customer agent without exposing private backend tools directly.

• 

  Breeze provides concise, evidence-backed product advice in a shared consultation thread.

• 

  SameState introduces two WebMCP use cases: developer-facing state-aware frontend control and customer-to-service-agent collaboration.

Inspiration

AI agents can already click around websites, but visual interaction alone does not tell them whether the application behaved correctly behind the screen.

SameState was inspired by a simple question: what if a frontend could expose safe actions, useful context, and visible state transitions directly to an agent, while still keeping the human experience intact?

We also wanted to explore a second idea: a customer agent should be able to ask a website's specialist service agent for help without being given direct access to private backend tools.

What it does

SameState demonstrates two WebMCP use cases.

First, it helps developers let agents understand and test Redux-powered frontend flows. An agent can read application context, use declared safe actions, inspect Redux state, and see the transition created after every action.

Second, it demonstrates customer-agent to service-agent communication. A customer-facing agent can ask Breeze, the website's product consultant, for advice through a public WebMCP gateway. Breeze uses authorized server-side catalog capabilities and returns a grounded answer with evidence, while private tools remain protected.

The ecommerce app is a real shared interface. Humans can browse products, search, manage a cart, and ask Breeze for help. Agents can use structured WebMCP tools that perform the same meaningful actions and expose the resulting state changes.

How we built it

The frontend uses React, TypeScript, Redux Toolkit, and Vite.

I built redux-webmcp, a package that wraps a Redux store with a scoped WebMCP layer. Developers declare the safe actions, state reads, semantic contracts, and frontend context that an agent can access.

The package registers structured tools through document.modelContext.registerTool, validates inputs, dispatches through the same Redux path as the human UI, and records sanitized state transitions.

The consultation service uses a TypeScript backend, persistent consultation threads, and authorized private catalog capabilities. Breeze receives requests through a public gateway, gathers only the permitted evidence, and returns a concise recommendation.

Challenges we ran into

The hardest challenge was making human and agent behavior genuinely consistent. We solved this by routing both through the same Redux actions instead of creating a separate agent-only code path.

Another challenge was making agent activity understandable during a live demo. A background tool call can otherwise look like unexplained UI behavior. We added visible tool-call notifications, an Agent View for Redux state and transition history, and an explicit action that opens the Breeze conversation.

We also had to keep the public tool inventory focused. Rather than exposing every individual UI control, we combined overlapping capabilities into clearer semantic actions.

Accomplishments that we're proud of

• Built and published redux-webmcp as a reusable package for Redux applications.
• Made human actions and agent actions use the same Redux state-transition path.
• Created visible evidence for WebMCP activity instead of hiding tool calls in the background.
• Built a safe customer-agent to service-agent gateway that keeps private backend capabilities off the public frontend.
• Delivered a working, deployed ecommerce experience with WebMCP tools, Redux inspection, transition history, and evidence-backed product consultations.

What we learned

WebMCP is more than a way for agents to avoid clicking buttons. Its greater potential is helping websites describe intent, safe capabilities, and application state in a way agents can reliably understand.

We learned that useful agent tools need strong boundaries. They should be specific, validated, observable, and connected to the same business logic as the human interface.

We also learned that agent-to-agent communication is most useful when it is mediated. A website can offer an expert service agent through a controlled gateway without exposing its private tools or internal data directly.

What's next for SameState - Redux_WebMCP

Next, we want to expand redux-webmcp with richer developer diagnostics, test-run reporting, replayable workflows, and broader framework support.

For SameState itself, we want to improve the service-agent experience with more specialist workflows, richer evidence, and clearer approval boundaries for actions that should stay human-controlled.

The larger goal is to help developers build frontends where people and agents can safely use the same product, understand the same state, and collaborate through well-defined capabilities.

Built With

• agent
• ai
• fastify
• javascript
• management
• openrouter
• react
• redux
• state
• toolkit
• typescript
• vite
• webmcp