Chrome Extension

Chrome extension for debugging AI SDK applications directly in Chrome DevTools. Native integration with real-time monitoring, stream interception, and state management exploration.

chrome-extension

What it does

🔧 DevTools Integration

Native integration with Chrome DevTools for seamless debugging experience.

🌊 Stream Interception

Intercept and monitor AI streaming events in real-time directly in the browser.

📊 State Explorer

Explore and inspect AI application state with a visual state explorer.

🔍 Tool Call Monitor

Monitor all AI tool calls with detailed parameters, responses, and execution times.

⚡ Performance

Track performance metrics and identify bottlenecks in your AI workflows.

🎨 Customizable

Customize the DevTools panel with themes and layout options.

Installation

1. Download the Extension

Download the extension from the Chrome Web Store or build from source:

# Clone the repository
git clone https://github.com/midday-ai/ai-sdk-tools.git

# Navigate to chrome-extension directory
cd ai-sdk-tools/packages/chrome-extension

# Install dependencies
npm install

# Build the extension
npm run build

2. Load in Chrome

Load the extension in Chrome Developer Mode:

1. Open Chrome and go to chrome://extensions/
2. Enable "Developer mode" in the top right
3. Click "Load unpacked" and select the dist folder
4. The extension will appear in your extensions list

3. Open DevTools

Open Chrome DevTools and look for the "AI SDK Tools" tab:

1. Open your AI application in Chrome
2. Press F12 or right-click → Inspect
3. Look for "AI SDK Tools" tab in DevTools
4. Click to open the debugging panel

Features

Real-time Monitoring

Monitor AI events in real-time as they happen in your application:

// 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 in DevTools
        return { weather: 'sunny' }
      },
    },
  },
})

State Explorer

Explore and inspect your AI application state:

// State is automatically tracked
- Messages array
- Input state
- Loading states
- Error states
- Tool call history
- Performance metrics

Stream Interception

Intercept and monitor streaming events:

// Streaming events are captured
- Message chunks
- Tool call progress
- Error events
- Completion events
- Performance metrics

API Reference

Extension API

The extension provides several APIs for debugging:

// Extension APIs
window.AISDKTools = {
  getState: () => state, // Get current state
  getEvents: () => events, // Get all events
  clearEvents: () => {}, // Clear events
  exportData: () => {}, // Export data
  toggleMonitoring: () => {}, // Toggle monitoring
}

DevTools Panel

The DevTools panel provides a visual interface for debugging:

// DevTools Panel Features
- Event timeline
- State explorer
- Performance metrics
- Tool call details
- Error logs
- Export/import data

Examples

Live Demo

Try the Chrome extension with our interactive demo.

Try it out →

GitHub

View source code and more examples on GitHub.

View on GitHub →