!AI SDK Devtools

AI SDK Devtools

A powerful debugging and monitoring tool for AI SDKs that provides real-time insights into AI streaming events, tool calls, and performance metrics.

What it does

AI SDK Devtools helps you debug and monitor AI applications by:

- Real-time event monitoring - Track all AI streaming events as they happen
- Tool call debugging - See tool calls, parameters, results, and execution times
- Performance metrics - Monitor streaming speed (tokens/second, characters/second)
- Event filtering - Filter events by type, tool name, or search queries
- Context insights - Visualize token usage and context window utilization
- Stream interception - Automatically capture events from AI SDK streams

Installation

``bash
npm install ai-sdk-devtools
`

Quick Start

$3

`tsx
import { AIDevtools } from 'ai-sdk-devtools';

function App() {
return (


`tsx
import type { Metadata } from 'next';
import { AIDevtools } from 'ai-sdk-devtools';

export default function Layout({ children }: { children: React.ReactNode }) {
return (


{children}
{process.env.NODE_ENV === 'development' && (

)}


);
}
`

$3

`tsx
import { useChat } from 'ai/react';
import { AIDevtools } from 'ai-sdk-devtools';

function ChatComponent() {
const { messages, input, handleInputChange, handleSubmit } = useChat({
api: '/api/chat',
...
});

return (


`tsx
enabled={true}
maxEvents={1000}
modelId="gpt-4o" // For context insights
config={{
position: "bottom", // or "right", "overlay"
height: 400,
streamCapture: {
enabled: true,
endpoint: "/api/chat",
autoConnect: true
},
throttle: {
enabled: true,
interval: 100, // ms
includeTypes: ["text-delta"] // Only throttle high-frequency events
}
}}
debug={false} // Enable debug logging
/>
`

Advanced Usage

$3

`tsx
import { useAIDevtools } from 'ai-sdk-devtools';

function MyComponent() {
const {
events,
clearEvents,
toggleCapturing
} = useAIDevtools({
maxEvents: 500,
onEvent: (event) => {
console.log('New event:', event);
}
});

return (


`tsx
const { filterEvents, getUniqueToolNames, getEventStats } = useAIDevtools();

// Filter events
const toolCallEvents = filterEvents(['tool-call-start', 'tool-call-result']);
const errorEvents = filterEvents(['error']);
const searchResults = filterEvents(undefined, 'search query');

// Get statistics
const stats = getEventStats();
const toolNames = getUniqueToolNames();
`

Event Types

The devtools capture these event types:

- tool-call-start - Tool call initiated
- tool-call-result - Tool call completed successfully
- tool-call-error - Tool call failed
- message-start - Message streaming started
- message-chunk - Message chunk received
- message-complete - Message completed
- text-start - Text streaming started
- text-delta - Text delta received
- text-end - Text streaming ended
- finish - Stream finished
- error - Error occurred

Development

$3

Enable debug logging to see detailed event information:

`tsx

`

Or enable globally:

`javascript
window.__AI_DEVTOOLS_DEBUG = true;
``

Requirements

- React 16.8+
- AI SDK React package
- Modern browser with fetch API support

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.