tanstack-start-devtools
Local development bridge between TanStack Devtools and MCP-capable coding agents.
README
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.
Development
pnpm install
pnpm dev:mcp
pnpm 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.”
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.