Devtools

Powerful debugging and monitoring tool for AI applications. Real-time insights into tool calls, performance metrics, and streaming events with advanced filtering and search.

npm install @ai-sdk-tools/devtools

What it does

🔍 Tool Calls

Monitor all AI tool calls in real-time with detailed parameters, responses, and execution times.

📊 Performance

Track performance metrics, response times, and identify bottlenecks in your AI workflows.

🌊 Streaming

Visualize streaming events and monitor real-time data flow through your AI applications.

🔍 Search

Advanced filtering and search capabilities to quickly find specific events or patterns.

📱 Mobile

Responsive design that works perfectly on mobile devices for debugging on the go.

⚡ Real-time

Live updates as events happen, no need to refresh or restart your application.

Getting Started

1. Install the package

npm install @ai-sdk-tools/devtools

2. Add to your app

import { AIDevTools } from '@ai-sdk-tools/devtools'

function App() {
  return (
    <div>
      <AIDevTools />
      {/* Your app content */}
    </div>
  )
}

3. Start debugging

The DevTools will automatically start monitoring your AI application and display events in real-time.

Features

Event Monitoring

Monitor all AI-related events including tool calls, streaming events, and state changes:

// Events are automatically captured
const { messages, handleSubmit } = useChat({
  tools: {
    weather: {
      description: 'Get weather information',
      parameters: z.object({
        location: z.string(),
      }),
      execute: async ({ location }) => {
        // This will be monitored automatically
        return { weather: 'sunny' }
      },
    },
  },
})

Performance Metrics

Track performance metrics and identify bottlenecks:

// Performance data is automatically collected
- Tool call duration
- Response times
- Memory usage
- Error rates
- Success rates

Advanced Filtering

Filter events by type, tool, time range, and more:

// Filter options available
- Event type (tool_call, streaming, error)
- Tool name
- Time range
- Status (success, error, pending)
- Search by content

API Reference

AIDevTools

The main DevTools component:

<AIDevTools
  position="bottom-right" // Position on screen
  theme="dark" // Theme (dark/light)
  maxEvents={100} // Maximum events to keep
  showTimestamp={true} // Show timestamps
  showPerformance={true} // Show performance metrics
/>

useAIDevTools

Hook for programmatic access to DevTools:

const {
  events, // All captured events
  clearEvents, // Clear all events
  exportEvents, // Export events as JSON
  isVisible, // DevTools visibility state
  toggleVisibility, // Toggle DevTools visibility
} = useAIDevTools()

Examples

Live Demo

Try the DevTools in action with our interactive demo.

Try it out →

GitHub

View source code and more examples on GitHub.

View on GitHub →