tanstack-start-devtools
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@tanstack-start-devtoolslist all components in the devtools tree"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
TanStack Start Devtools MCP
Local development bridge between TanStack Devtools and MCP-capable coding agents.
This repo is clone-and-use local tooling, not an npm-published package. See INSTALL.md for setup instructions and an agent install prompt.
Packages
@barreloflube/tanstack-start-dev-tool-mcp-shared: shared browser/server protocol schemas.@barreloflube/tanstack-start-dev-tool-mcp-react: React panel for@tanstack/react-devtools.@barreloflube/tanstack-start-dev-tool-mcp-server: MCP server plus local WebSocket bridge.
Related MCP server: MCP Chrome Debugger Protocol
Development
pnpm install
pnpm dev:mcppnpm dev:mcp uses tsx watch, so edits to the MCP server restart the process automatically.
Environment
TANSTACK_AGENT_DEVTOOLS_PORT: bridge port, defaults to8129.TANSTACK_AGENT_DEVTOOLS_HOST: bridge host, defaults to127.0.0.1.TANSTACK_AGENT_DEVTOOLS_TOKEN: shared browser/server token, defaults totanstack-agent-devtools-local.
MCP Client Config
For stdio-based clients:
{
"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"
}
}
}
}For stdio clients, launch tsx directly instead of pnpm mcp; package-manager lifecycle banners can corrupt the MCP JSON-RPC stream.
Codex launches its own MCP process. Stop pnpm dev:mcp before restarting Codex unless you are intentionally testing the watched development server.
Prompts used to build this
“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.”
This server cannot be deployed
Maintenance
Related MCP Connectors
Agent Replay Debugger MCP — record every agent step + deterministic replay. Step-debugger for
Live browser debugging for AI assistants — DOM, console, network via MCP.
Real-time chat for AI agents. Claude Code, Cursor, Cline and Codex join channels over MCP.
- QuallaaOAuthcom.quallaa
Talk to your public-facing AI from any MCP client — Claude, ChatGPT, Cursor, Cline, Windsurf.
Related MCP Servers
- AlicenseBqualityDmaintenanceProduction-grade MCP server that gives AI agents safe access to your local dev environment: filesystem, databases, processes, and OpenAPI specs.1526 npm3MIT
- AlicenseNot gradedqualityAmaintenanceMCP server that lets AI coding tools control and observe a running Node.js process through the chrome devtools protocol (CDP), via a lightweight Debug Adapter Protocol (DAP) bridge.26 npm2MIT
- AlicenseAqualityDmaintenanceBridges any MCP client (like Claude Code, Zed, VS Code) to any ACP coding agent, enabling multi-agent orchestration from a single chat interface.24140 npm9Apache 2.0
- AlicenseNot gradedqualityAmaintenanceLocal-first MCP server that provides project context, verification gates, and structured tools for coding agents to discover knowledge, run diagnostics, and execute allowlisted commands within a repository.24 npmMIT