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 클라이언트의 경우 pnpm mcp 대신 tsx를 직접 실행하세요. 패키지 관리자의 라이프사이클 배너가 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”
“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.”