Console Logs Tool

Let the AI read browser console logs to help debug issues.

Overview

When users report errors, AI can read the console to understand what went wrong:

User: "My app keeps crashing"
AI: [Requests console access]
User: [Approves]
AI: "I see a TypeError in your console: 'Cannot read property 'map'
     of undefined' at ProductList.js:42. This means..."

Setup

import { builtinTools } from '@yourgpt/copilot-sdk-core';
import { useTools } from '@yourgpt/copilot-sdk-react';

function ConsoleLogTool() {
  useTools({
    capture_console: builtinTools.capture_console,
  });

  return null;
}

What Gets Captured

Type	Captured	Example
`console.log()`	Yes	Debug messages
`console.warn()`	Yes	Warnings
`console.error()`	Yes	Errors with stack traces
`console.info()`	Yes	Info messages
`console.debug()`	Yes	Debug output

Only logs from the current browser session are captured. Historical browser logs are not accessible.

Console logs may contain sensitive data. The tool:

Always requires user approval before capturing
Only captures current session logs
Does not persist logs anywhere
Lets users review what's being shared

// The tool automatically prompts for consent
useTools({
  capture_console: {
    ...builtinTools.capture_console,
    requiresApproval: true,  // Default - always ask
  },
});

How It Works

Tool intercepts console.* calls when activated
Stores recent logs in memory (limited buffer)
When AI requests logs, user sees approval prompt
On approval, logs are sent to AI for analysis
AI can identify errors, warnings, and patterns

Use Cases

Bug Reports

User: "Something's not working right"
AI: "Let me check the console for any errors..."
    [Requests console access]
    [User approves]
AI: "I found the issue! There's a CORS error when fetching
     from api.example.com. Your server needs to add the
     Access-Control-Allow-Origin header."

Performance Issues

User: "The app feels slow"
AI: "I'll check for any warnings or performance issues..."
    [Analyzes console]
AI: "I see repeated 'Warning: Each child in a list should
     have a unique key prop' messages. This is causing
     unnecessary re-renders. Let me explain how to fix it..."

Understanding Errors

User: "I'm getting a weird error"
AI: [Reads console]
AI: "The error 'ReferenceError: userData is not defined'
     at line 156 means the userData variable doesn't exist
     when the function runs. This usually happens when..."

Configuration

Limit Log Count

useTools({
  capture_console: {
    ...builtinTools.capture_console,
    maxLogs: 50,  // Keep last 50 logs
  },
});

Filter Log Types

useTools({
  capture_console: {
    ...builtinTools.capture_console,
    logTypes: ['error', 'warn'],  // Only errors and warnings
  },
});

Custom Implementation

Build your own console capture:

useTools({
  get_console_logs: {
    description: 'Get recent console logs for debugging',
    parameters: z.object({
      types: z.array(z.enum(['log', 'warn', 'error'])).optional(),
      limit: z.number().optional(),
    }),
    requiresApproval: true,
    handler: async ({ types = ['error', 'warn'], limit = 20 }) => {
      // Your console capture implementation
      const logs = getStoredConsoleLogs()
        .filter(log => types.includes(log.type))
        .slice(-limit);

      return {
        success: true,
        data: {
          logs,
          count: logs.length,
        },
        _aiContext: `Captured ${logs.length} console ${types.join('/')} entries`,
      };
    },
  },
});

Best Practices

Always require approval - Console may contain sensitive data
Limit buffer size - Don't store unlimited logs
Filter by type - Often only errors/warnings matter
Clear after use - Don't persist logs unnecessarily
Inform users - Explain what will be shared

Example: Debug Helper

function DebugTools() {
  useTools({
    capture_console: {
      ...builtinTools.capture_console,
      maxLogs: 30,
      requiresApproval: true,
    },

    // Companion tool for more context
    get_error_context: {
      description: 'Get additional context about recent errors',
      parameters: z.object({}),
      requiresApproval: true,
      handler: async () => {
        return {
          success: true,
          data: {
            url: window.location.href,
            userAgent: navigator.userAgent,
            timestamp: new Date().toISOString(),
            localStorage: Object.keys(localStorage).length + ' items',
          },
        };
      },
    },
  });

  return null;
}

Next Steps

Screenshot Tool - Capture visual context
Tool Approval - Approval flow details
Custom Tools - Build more debugging tools

Console Logs

On this page