tanstack-devtools

Integrate TanStack DevTools for centralized state inspection in React applications.

18|4|Updated Apr 5, 2026

Search Tags:#debugging #monitoring #state management #react #tanstack #devtools

Ready to run

npx skills add https://github.com/louisbrulenaudet/monorepo-template --skill tanstack-devtools-louisbrulenaudet

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-devtools
Source: https://github.com/louisbrulenaudet/monorepo-template/tree/main/.agents/skills/tanstack-devtools
Command: npx skills add https://github.com/louisbrulenaudet/monorepo-template --skill tanstack-devtools-louisbrulenaudet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the fragmentation of debugging tools in complex web applications by providing a centralized, extensible panel for monitoring TanStack Query, Router, and AI workflows.

Core Features & Use Cases

Unified Debugging: Consolidates state inspection for Query, Router, and AI into one interface.
Plugin Architecture: Allows developers to build and register custom panels for domain-specific state inspection.
Use Case: When building a complex dashboard, use this tool to monitor real-time API cache states, router navigation history, and AI streaming chunks simultaneously.

Quick Start

Integrate the TanStackDevtools component into your root provider to enable real-time debugging of your application state.

Frequently Asked Questions about tanstack-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I debug TanStack Query and Router state simultaneously in React?▼

You can debug TanStack Query and Router state simultaneously by installing @tanstack/react-devtools and configuring a single devtools panel within your application provider tree to inspect real-time state.

What is the best way to inspect real-time API cache states and router navigation history in a React dashboard?▼

The best way to inspect API cache states and navigation history is using a unified debugging interface that consolidates TanStack Query, Router, and AI module monitoring into one centralized panel.

Can I build custom panels to inspect domain-specific state with TanStack devtools?▼

Yes, you can build custom panels because the TanStack devtools feature a plugin architecture that allows developers to register domain-specific state inspection panels for their React-based web applications.

Does unified TanStack debugging work with AI streaming chunks?▼

Unified TanStack debugging works with AI streaming chunks by providing a centralized interface to monitor AI workflows alongside Query and Router state within your React application.

Do I need to install dependencies to enable TanStack state inspection in my web application?▼

You need to install @tanstack/react-devtools and configure the devtools panel within your application provider tree to enable real-time state inspection for TanStack libraries.