Development tools for debugging AI applications.

Extends Vercel AI SDK with development-only debugging tools that integrate directly into your app. Just like react-query-devtools, it provides real-time insights into your AI workflows during local development.

npm install @ai-sdk-tools/devtools

Used by

◇ AI SDK Devtools

Monitoring for tool calls...

└ Real-time debugging interface for AI SDK applications

Real-time Monitoring

Track AI tool calls and responses in real-time with detailed insights into performance and behavior patterns.

State Inspection

Inspect and debug your application state with powerful tools for understanding data flow and component interactions.

Performance Metrics

Monitor response times, token usage, and resource consumption with comprehensive performance analytics.

Error Tracking

Catch and analyze errors in your AI workflows with detailed stack traces and debugging information.

Development Only

Integrates into your development environment like react-query-devtools. Automatically detects development mode for seamless debugging.

Zero Production Impact

Tree-shaken out of production builds automatically. No bundle size increase or performance impact on your deployed applications.

Implementation

◇ Basic Setup

// App.tsx - Add devtools to your app
import { AIDevtools } from '@ai-sdk-tools/devtools'

function App() {
  return (
    <div>
      <Chat />
      
      {/* Only in development */}
      {process.env.NODE_ENV === 'development' && (
        <AIDevtools />
      )}
    </div>
  )
}

// Automatically tracks:
// - All AI tool calls
// - State changes
// - Performance metrics
// - Error handling
// - Token usage

◇ Advanced Configuration

// Custom configuration
import { AIDevtools } from '@ai-sdk-tools/devtools'

function App() {
  return (
    <div>
      <Chat />
      
      <AIDevtools
        position="bottom-right"
        theme="dark"
        showMetrics={true}
        enableNetworkTab={true}
        maxHistorySize={1000}
        filters={{
          hideSystemMessages: false,
          showOnlyErrors: false
        }}
      />
    </div>
  )
}

git: (main)$ npm i @ai-sdk-tools/devtools

Development debugging tool - integrates like react-query-devtools.