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ブリッジ。

Related MCP server: MCP Chrome Debugger Protocol

開発

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クライアントの場合は、pnpm mcp ではなく tsx を直接起動してください。パッケージマネージャーのライフサイクルバナーがMCP JSON-RPCストリームを破損させる可能性があります。

Codexは独自のMCPプロセスを起動します。監視付き開発サーバーを意図的にテストしている場合を除き、Codexを再起動する前に pnpm dev:mcp を停止してください。

これを構築するために使用されたプロンプト

1. “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”

2. “i want a sep personal repo for this.”

3. “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.”