TanStack Start Devtools MCP

TanStack Devtools 与支持 MCP 的编码代理之间的本地开发桥梁。

此仓库为“克隆即用”的本地工具，而非 npm 发布包。请参阅 INSTALL.md 获取设置说明和代理安装提示。

软件包

@barreloflube/tanstack-start-dev-tool-mcp-shared：共享的浏览器/服务器协议模式。
@barreloflube/tanstack-start-dev-tool-mcp-react：用于 @tanstack/react-devtools 的 React 面板。
@barreloflube/tanstack-start-dev-tool-mcp-server：MCP 服务器及本地 WebSocket 桥接。

开发

pnpm install
pnpm dev:mcp

pnpm dev:mcp 使用 tsx watch，因此对 MCP 服务器的编辑会自动重启进程。

环境

TANSTACK_AGENT_DEVTOOLS_PORT：桥接端口，默认为 8129。
TANSTACK_AGENT_DEVTOOLS_HOST：桥接主机，默认为 127.0.0.1。
TANSTACK_AGENT_DEVTOOLS_TOKEN：共享的浏览器/服务器令牌，默认为 tanstack-agent-devtools-local。

MCP 客户端配置

对于基于 stdio 的客户端：

{
  "mcpServers": {
    "tanstack-start-devtools": {
      "command": "/Users/barreloflube/Desktop/tanstack-start-dev-tool-mcp/node_modules/.bin/tsx",
      "args": [
        "/Users/barreloflube/Desktop/tanstack-start-dev-tool-mcp/packages/mcp-server/src/cli.ts"
      ],
      "env": {
        "TANSTACK_AGENT_DEVTOOLS_TOKEN": "tanstack-agent-devtools-local"
      }
    }
  }
}

对于 stdio 客户端，请直接启动 tsx 而不是 pnpm mcp；包管理器的生命周期横幅可能会破坏 MCP JSON-RPC 流。

Codex 会启动自己的 MCP 进程。除非您有意测试监视模式下的开发服务器，否则请在重启 Codex 前停止 pnpm dev:mcp。

构建此项目所用的提示词

“i want to make a mcp server that allows the tanstack start dev tool's access to the agent. how should we go around making it”（我想制作一个 MCP 服务器，允许 TanStack Start Dev Tool 访问代理。我们应该如何着手制作？）
“i want a sep personal repo for this.”（我想要一个单独的个人仓库来存放这个。）
“you can make the sep repo in the Desktop/tanstack-start-dev-tool-mcp folder and work in there, import it here and start the mcp server test it, dont stop until it works, also support hmr for the mcp server so you can itereate quickly.”（你可以在 Desktop/tanstack-start-dev-tool-mcp 文件夹中创建单独的仓库并在其中工作，将其导入此处并启动 MCP 服务器进行测试，直到它能正常工作为止，同时为 MCP 服务器支持 HMR，以便你可以快速迭代。）