tanstack-start-devtools

tanstack-start-devtools

Local development bridge between TanStack Devtools and MCP-capable coding agents.

Category
Visit Server

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 to 8129.
  • TANSTACK_AGENT_DEVTOOLS_HOST: bridge host, defaults to 127.0.0.1.
  • TANSTACK_AGENT_DEVTOOLS_TOKEN: shared browser/server token, defaults to tanstack-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

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

Recommended Servers

playwright-mcp

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.

Official
Featured
TypeScript
Magic Component Platform (MCP)

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.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

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.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

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.

Official
Featured
TypeScript
Kagi MCP Server

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.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured
Exa Search

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.

Official
Featured