使用说明
州桥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;
};
许可证
麻省理工学院