状态桥接工具

一个通过WebSocket桥接Zustand状态库的工具,允许AI实时检查和操作应用状态。

  • by jonjoe
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 jonjoe/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',
});

客户配置

选项 类型 默认值 描述
stores Record<string, StoreEntry> 必需的 Zustand商店的命名地图
url string ws://localhost:8098 MCP服务器的WebSocket URL
reconnectInterval number 3000 自动重新连接间隔(毫秒)。 0 禁用。
onConnect () => void -- 当WebSocket打开时调用
onDisconnect () => void -- 当WebSocket关闭时调用

MCP工具

一旦连接,AI就可以访问这些工具:

工具 说明
connection_status 检查客户端应用程序是否已连接
list_stores 列出所有商店及其顶级状态密钥
get_state 从存储中读取状态(支持点路径,如 settings.theme)
set_state 在点路径处写入值(支持任意深度)
call_action 按名称调用存储操作函数

商店兼容性

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

type StoreEntry = {
  getState: () => Record<string, unknown>;
  setState: (partial: Record<string, unknown>) => void;
};

许可证

麻省理工学院