Help us improve
Share bugs, ideas, or general feedback.
From tanstack-devtools
Provides unified devtools panel for debugging TanStack Query, Router, and AI in React apps via extensible plugins. Useful for real-time state inspection.
npx claudepluginhub tanstack-skills/tanstack-skills --plugin tanstack-devtoolsHow this skill is triggered — by the user, by Claude, or both
Slash command
/tanstack-devtools:tanstack-devtoolsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
TanStack Devtools provides a unified debugging interface that consolidates devtools for TanStack Query, Router, and other libraries into a single panel. It features a framework-agnostic plugin architecture, real-time state inspection, and support for custom plugins. Built with Solid.js for lightweight performance.
Inspects cache state, query status, and network activity in the React Query DevTools panel. Debug refetches, verify mutation invalidation, and tune staleTime/gcTime.
Integrates TanStack AI SDK for provider-agnostic streaming, tool calling, Zod-structured outputs, multimodal support, and React/Solid hooks in JS/TS/Python/PHP apps.
Manages server state with automatic caching, background refetching, pagination, infinite scrolling, and optimistic updates for React, Vue, Svelte, Angular apps.
Share bugs, ideas, or general feedback.
TanStack Devtools provides a unified debugging interface that consolidates devtools for TanStack Query, Router, and other libraries into a single panel. It features a framework-agnostic plugin architecture, real-time state inspection, and support for custom plugins. Built with Solid.js for lightweight performance.
React: @tanstack/react-devtools
Core: @tanstack/devtools
Status: Alpha
npm install @tanstack/react-devtools
import { TanStackDevtools } from '@tanstack/react-devtools'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
function App() {
return (
<QueryClientProvider client={queryClient}>
<TanStackDevtools />
{/* Your app content */}
<MyApp />
</QueryClientProvider>
)
}
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
function App() {
return (
<QueryClientProvider client={queryClient}>
<TanStackDevtools
plugins={[
{
id: 'react-query',
name: 'React Query',
render: () => <ReactQueryDevtoolsPanel />,
},
]}
/>
<MyApp />
</QueryClientProvider>
)
}
import { TanStackDevtools } from '@tanstack/react-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
function App() {
return (
<TanStackDevtools
plugins={[
{
id: 'router',
name: 'Router',
render: () => <TanStackRouterDevtoolsPanel router={router} />,
},
]}
/>
)
}
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
function App() {
return (
<QueryClientProvider client={queryClient}>
<TanStackDevtools
plugins={[
{
id: 'react-query',
name: 'React Query',
render: () => <ReactQueryDevtoolsPanel />,
},
{
id: 'router',
name: 'Router',
render: () => <TanStackRouterDevtoolsPanel router={router} />,
},
]}
/>
<MyApp />
</QueryClientProvider>
)
}
For debugging TanStack AI workflows:
import { TanStackDevtools } from '@tanstack/react-devtools'
import { AIDevtoolsPanel } from '@tanstack/ai-react/devtools'
function App() {
return (
<TanStackDevtools
plugins={[
{
id: 'ai',
name: 'AI',
render: () => <AIDevtoolsPanel />,
},
]}
/>
)
}
AI Devtools features:
interface DevtoolsPlugin {
id: string // Unique identifier
name: string // Display name in the devtools panel
render: () => JSX.Element // React component to render
}
import { TanStackDevtools } from '@tanstack/react-devtools'
// Custom state inspector plugin
const stateInspectorPlugin = {
id: 'state-inspector',
name: 'State',
render: () => (
<div style={{ padding: '16px' }}>
<h3>Application State</h3>
<pre>{JSON.stringify(appState, null, 2)}</pre>
</div>
),
}
// Custom network logger plugin
const networkLoggerPlugin = {
id: 'network-logger',
name: 'Network',
render: () => <NetworkLoggerPanel />,
}
function App() {
return (
<TanStackDevtools
plugins={[
stateInspectorPlugin,
networkLoggerPlugin,
]}
/>
)
}
function App() {
const [plugins, setPlugins] = useState<DevtoolsPlugin[]>([])
useEffect(() => {
// Register plugins conditionally
const activePlugins: DevtoolsPlugin[] = []
if (process.env.NODE_ENV === 'development') {
activePlugins.push({
id: 'debug',
name: 'Debug',
render: () => <DebugPanel />,
})
}
setPlugins(activePlugins)
}, [])
return <TanStackDevtools plugins={plugins} />
}
// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackDevtools } from '@tanstack/devtools/vite'
export default defineConfig({
plugins: [
tanstackDevtools(),
],
})
// Only include devtools in development
function App() {
return (
<>
{process.env.NODE_ENV === 'development' && (
<TanStackDevtools plugins={plugins} />
)}
<MyApp />
</>
)
}
// Or use lazy loading
const TanStackDevtools = lazy(() =>
import('@tanstack/react-devtools').then((m) => ({ default: m.TanStackDevtools }))
)
| Framework | Package | Status |
|---|---|---|
| React | @tanstack/react-devtools | Alpha |
| Solid | @tanstack/solid-devtools | Planned |
| Vue | @tanstack/vue-devtools | Planned |
| Angular | @tanstack/angular-devtools | Planned |