Skip to content

Conversation

whallysson
Copy link

🎯 Overview

This PR adds AI Export functionality to Log Viewer, allowing users to quickly send error logs to AI assistants (ChatGPT and Claude) for analysis and debugging assistance.

✨ Features

  • Ask AI Button: New dropdown button in log entries to export logs to AI providers
  • Multiple Providers: Support for ChatGPT and Claude with extensible provider interface
  • Copy as Markdown: Dedicated option to copy log entries as formatted markdown
  • Smart Formatting: Automatically formats logs with context, stack traces, and metadata
  • Security: Sanitizes sensitive data (passwords, tokens, API keys) before export
  • Rate Limiting: Prevents abuse with configurable rate limits (10 requests/minute by default)
  • Configurable: Can be enabled/disabled via configuration

πŸ”§ Configuration

// config/log-viewer.php
'ai_export' => [
    'enabled' => env('LOG_VIEWER_AI_EXPORT_ENABLED', true),
    'providers' => [
        'chatgpt' => [
            'enabled' => true,
            'url' => 'https://chat.openai.com/',
            'max_characters' => 6950,
        ],
        'claude' => [
            'enabled' => true,
            'url' => 'https://claude.ai/new',
            'max_characters' => 10000,
        ],
    ],
    'max_context_lines' => 50,
    'sanitize_patterns' => [
            // Add custom patterns here
            // '/custom_pattern/i' => 'replacement',
        ],
],

πŸ“Έ Screenshots

Ask AI Button in Log Entry

Ask AI Button

The new "Ask AI" button appears on each log entry

AI Provider Dropdown

Provider Dropdown

Users can choose between ChatGPT, Claude, or copy as markdown

prompt pre-populated with the log formatted in ChatGPT.

Markdown Copied

Visual feedback when markdown is copied to clipboard

How it Works

  1. Users see an "Ask AI" button on each log entry
  2. Clicking opens a dropdown with available AI providers
  3. Selecting a provider formats the log and opens the AI interface with the pre-filled prompt
  4. Users can also copy the log as markdown for manual sharing

βœ… Testing

β€’ Added comprehensive test coverage for all new functionality
β€’ Feature tests for API endpoints with rate limiting
β€’ Unit tests for services and providers
β€’ All tests passing
βœ“ AI Export Providers Endpoint β†’ returns list of available providers
βœ“ AI Export Providers Endpoint β†’ returns 403 when feature is disabled
βœ“ AI Export Endpoint β†’ validates required fields
βœ“ AI Export Endpoint β†’ rejects invalid provider
βœ“ AI Export Endpoint β†’ enforces rate limiting
βœ“ AI Export Endpoint β†’ returns 404 when log not found
βœ“ AI Export Endpoint β†’ returns 403 when feature is disabled
βœ“ AI Export Endpoint β†’ returns correct response structure when successful
βœ“ Copy as Markdown Endpoint β†’ validates required fields
βœ“ Copy as Markdown Endpoint β†’ returns 404 when log not found
βœ“ Copy as Markdown Endpoint β†’ returns markdown when successful
βœ“ Copy as Markdown Endpoint β†’ returns 403 when feature is disabled

πŸ“ Implementation Details

Backend
β€’ New Controller: AiExportController with three endpoints
β€’ GET /api/ai/providers - Lists available AI providers
β€’ POST /api/ai/export - Exports log to selected AI provider
β€’ POST /api/ai/copy-markdown - Returns formatted markdown
β€’ Service Layer: AiExportService handles formatting and sanitization
β€’ Provider Interface: Extensible design for adding new AI providers
β€’ Security: Automatic sanitization of sensitive patterns including:
β€’ Passwords and API keys
β€’ JWT tokens
β€’ Database credentials
β€’ Email addresses (optionally)

Frontend
β€’ Vue Component: AskAiButton.vue with dropdown UI
β€’ Pinia Store: State management for AI providers
β€’ Integration: Seamlessly integrated into BaseLogTable.vue
β€’ User Feedback: Toast notifications for success/error states

πŸš€ How to Use

  1. Enable the feature in your .env:
LOG_VIEWER_AI_EXPORT_ENABLED=true
  1. Click the "Ask AI" button on any log entry
  2. Select your preferred AI provider (ChatGPT or Claude)
  3. The log will be formatted and open in a new tab with the AI interface

πŸ” Code Quality

β€’ βœ… Laravel Pint formatting applied
β€’ βœ… Follows existing code patterns and conventions
β€’ βœ… No breaking changes
β€’ βœ… Backward compatible
β€’ βœ… Feature can be completely disabled if not needed

🎨 UI/UX Considerations

β€’ Non-intrusive button placement
β€’ Clear visual feedback
β€’ Responsive design
β€’ Keyboard accessible
β€’ Follows existing Log Viewer design patterns

πŸ“Š Performance Impact

β€’ Minimal - feature is lazy loaded
β€’ No impact when disabled
β€’ Efficient markdown generation
β€’ Rate limiting prevents abuse

πŸ” Privacy & Security

β€’ All processing happens client-side
β€’ No data is sent to any servers (only formatted for AI providers)
β€’ Sensitive data is sanitized before export
β€’ Users maintain full control over what gets sent to AI

πŸ“š Documentation

The feature is self-documenting through:
β€’ Clear configuration options in config/log-viewer.php
β€’ Inline code comments
β€’ Comprehensive test suite showing usage patterns

This feature enhances the debugging experience by leveraging AI assistants to help developers quickly understand and resolve errors in their Laravel applications.

- Add Ask AI button to export logs to ChatGPT and Claude
- Add Copy as Markdown functionality for log entries
- Create AiExportService with provider abstraction
- Implement ChatGPT and Claude providers with URL generation
- Add configuration options for enabling/disabling the feature
- Add rate limiting to prevent abuse (10 requests per minute)
- Add comprehensive test coverage for all new functionality
- Update frontend with Vue component for AI interactions
@whallysson
Copy link
Author

Hi @arukompas !

This PR adds AI Export functionality to help developers quickly analyze errors using AI assistants.

The feature is fully configurable and can be disabled if not needed. It includes comprehensive tests and follows the existing code patterns.

I'd love to hear your feedback and I'm happy to make any adjustments needed!

Thanks for creating this amazing tool!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant