Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@state-bridge-mcp List all stores and their state."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP server + client SDK for bridging Zustand stores over WebSocket. Lets any MCP-capable AI inspect and manipulate your app's live state.
┌─────────────┐ WebSocket ┌──────────────┐ stdio ┌──────────┐
│ Your App │──────────────▶│ MCP Server │◀─────────▶│ Claude │
│ (client) │◀──────────────│ (server) │ │ │
└─────────────┘ └──────────────┘ └──────────┘The server runs as an MCP server (launched by Claude, Cursor, etc.) and opens a WebSocket port. Your app connects as a client and exposes its Zustand stores. The AI can then list stores, read state, write state, and call actions.
Related MCP server: redux-mcp
npm install state-bridge-mcpAdd to your .mcp.json (or equivalent MCP config):
{
"mcpServers": {
"app-state": {
"command": "npx",
"args": ["state-bridge-mcp"]
}
}
}{
"mcpServers": {
"app-state": {
"command": "npx",
"args": ["state-bridge-mcp", "--port", "9000"]
}
}
}Or via environment variable: STATE_BRIDGE_PORT=9000
Default port: 8098
import { createStateBridge } from 'state-bridge-mcp/client';
import { useSessionStore, useAppStore } from './store';
const bridge = createStateBridge({
stores: {
session: useSessionStore,
app: useAppStore,
},
url: 'ws://localhost:8098',
});
// Later, to tear down:
bridge.stop();For Android emulator, use 10.0.2.2 to reach the host machine:
const bridge = createStateBridge({
stores: { session: useSessionStore, app: useAppStore },
url: 'ws://10.0.2.2:8098',
});Option | Type | Default | Description |
|
| required | Named map of Zustand stores |
|
|
| WebSocket URL of the MCP server |
|
|
| Auto-reconnect interval in ms. |
|
| — | Called when WebSocket opens |
|
| — | Called when WebSocket closes |
Once connected, the AI has access to these tools:
Tool | Description |
| Check if a client app is connected |
| List all stores and their top-level state keys |
| Read state from a store (supports dot-paths like |
| Write a value at a dot-path (supports arbitrary depth) |
| Invoke a store action function by name |
Any object with getState() and setState() works. Zustand stores satisfy this out of the box:
type StoreEntry = {
getState: () => Record<string, unknown>;
setState: (partial: Record<string, unknown>) => void;
};MIT
Invoke a store action function by name (e.g. "clearHistory", "setActiveTab")
Inputs: store (required), action (required), args.
Check if a client app is connected via WebSocket
Inputs: no named parameters.
Read state from a Zustand store. Optionally provide a dot-path to read a specific slice.
Inputs: store (required), path.
List all Zustand stores and their top-level state keys
Inputs: no named parameters.
Write a value to a Zustand store at the given path
Inputs: path (required), store (required), value.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 5 tools
Each tool addresses a distinct concern: actions, connections, reading state, listing stores, and writing state. No overlap or ambiguity between tools.
All tool names follow a consistent verb_noun pattern in snake_case (e.g., get_state, list_stores), making them predictable and easy to understand.
With 5 tools, the set is well-scoped for a state management bridge, covering all essential operations without unnecessary bloat.
The tools cover core state operations (list, get, set, actions) and a connection check. Missing subscription or store creation, but these are minor gaps for the intended purpose.
Public chat and shared memory for AI agents. Open reads, free write keys. MCP + A2A + WebSocket.
JW3.ai remote MCP server for market reads and confirm-gated trading execution.
Governed personal world model and memory for your AI agent. Pair once, connect over MCP.
Remote MCP server exposing your Node Command fleet (files, shell, processes, browser) to AI hosts.
