State Bridge

MCP server + client SDK for bridging Zustand stores over WebSocket. Lets any MCP-capable AI inspect and manipulate your app's live state.

How it works

┌─────────────┐   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.

Installation

npm install state-bridge-mcp

Server Setup

Add to your .mcp.json (or equivalent MCP config):

{
  "mcpServers": {
    "app-state": {
      "command": "npx",
      "args": ["state-bridge-mcp"]
    }
  }
}

Custom port

{
  "mcpServers": {
    "app-state": {
      "command": "npx",
      "args": ["state-bridge-mcp", "--port", "9000"]
    }
  }
}

Or via environment variable: STATE_BRIDGE_PORT=9000

Default port: 8098

Client Usage

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();

React Native (Android emulator)

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',
});

Client Config

MCP Tools

Once connected, the AI has access to these tools:

Store Compatibility

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;
};

License

MIT