MCP State Bridge

州桥mcp

MCP服务器+客户端桥接SDK 状态 通过WebSocket存储。允许任何支持MCP的AI检查和操纵您的应用程序的实时状态。

运作原理

┌─────────────┐   WebSocket   ┌──────────────┐   stdio   ┌──────────┐
│  Your App   │──────────────▶│  MCP Server  │◀─────────▶│  Claude  │
│  (client)   │◀──────────────│  (server)    │           │          │
└─────────────┘               └──────────────┘           └──────────┘

这 服务器 作为MCP服务器运行（由Claude、Cursor等启动），并打开WebSocket端口 应用 以客户端身份连接并公开其Zustand商店。然后，AI可以列出存储、读取状态、写入状态和调用操作。

安装

npm install state-bridge-mcp

服务器安装程序

添加到您的 .mcp.json （或等效的MCP配置）：

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

自定义端口

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

或者通过环境变量： STATE_BRIDGE_PORT=9000

默认端口： 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();

React Native（安卓模拟器）

对于Android模拟器，请使用 10.0.2.2 要访问主机：

const bridge = createStateBridge({
  stores: { session: useSessionStore, app: useAppStore },
  url: 'ws://10.0.2.2:8098',
});

客户配置

MCP工具

一旦连接，AI就可以访问这些工具：

商店兼容性

任何物体 getState() 和 setState() 作品。Zustand商店满足了这一点：

type StoreEntry = {
  getState: () => Record;
  setState: (partial: Record) => void;
};

许可证

麻省理工学院