README

Filament ChatGPT Agent is a Filament plugin that allows you to easily integrate ChatGPT into your Filament project, enabling ChatGPT to access context information from your project by creating GPT functions.

Preview:

Dark Mode: Select a text to quickly insert it: Light Mode: ChatGPT can read the page content for extra context:

Features

I asked ChatGPT to generate a full list of the plugin features:

Seamless ChatGPT Integration: Easily integrates OpenAI’s ChatGPT into your Filament project.
Customizable Chat Interface: Modify bot name, button text, panel width, and more.
Select To Insert: Select some text on the page and insert that with one click.
Supports Laravel GPT Functions: Define and register custom GPT functions to enhance AI capabilities.
Page Watcher: Sends the page content and URL to ChatGPT for better contextual responses.
Configurable OpenAI Model: Choose different models like gpt-4o or gpt-4o-mini and control temperature and token usage.
Custom System Message: Define how the AI should behave using a system instruction.
Full Screen Mode: The more space the better.
Dark Mode Support: Specially tailored to night owls.

Screenshots

Installation

You need to have Laravel GPT from Malkuhr installed to use this package. If you haven't done so, follow the installation instructions:

You can install the package via composer:

composer require maltekuhr/laravel-gpt

Next you need to configure your OpenAI API Key and Organization ID. You can find both in the OpenAI Dashboard.

OPENAI_ORGANIZATION=YOUR_ORGANIZATION_ID
OPENAI_API_KEY=YOUR_API_KEY

Now install this package:

composer require likeabas/filament-chatgpt-agent

Views

Optionally, you can publish the views:

php artisan vendor:publish --tag="chatgpt-agent-views"

Translations

Optionally, you can publish translations:

php artisan vendor:publish --tag="chatgpt-agent-translations"

Usage

1. Adding the Plugin to Filament Panel

Modify your Filament Panel Configuration to include the plugin:

use LikeABas\FilamentChatgptAgent\ChatgptAgentPlugin;

    public function panel(Panel $panel): Panel
    {
        return $panel
            ...
            ->plugin(
                ChatgptAgentPlugin::make()
            )
            ...
    }

2. You can customize the plugin using the available options:

Also see all available options below.

use App\GPT\Functions\YourCustomGPTFunction;
use LikeABas\FilamentChatgptAgent\ChatgptAgentPlugin;

...

    public function panel(Panel $panel): Panel
    {
        return $panel
            ...
            ->plugin(
                ChatgptAgentPlugin::make()
                    ->defaultPanelWidth('400px') // default 350px
                    ->botName('GPT Assistant')
                    ->model('gpt-4o')
                    ->buttonText('Ask ChatGPT')
                    ->buttonIcon('heroicon-m-sparkles')
                    // System instructions for the GPT
                    ->systemMessage('Act nice and help') 
                    // Array of GPTFunctions the GPT can use
                    ->functions([ 
                        new YourCustomGPTFunction(),
                    ])
                    // Default start message, set to false to not show a message
                    ->startMessage('Hello sir! How can I help you today?') 
                    ->pageWatcherEnabled(true)

            )
            ...
    }

Other language strings can be altered in the translations file. Just publish the translations.

See the full list of available options

3. Blade Component Usage

You can embed the ChatGPT agent in any Blade file:

<body>  
    @livewire('filament-chatgpt-agent')  
</body>

This works for all Livewire pages in any Laravel project, not just Filament. Ensure Tailwind CSS, Filament, and Livewire are properly imported.

<body>

    ...

    @livewire('filament-chatgpt-agent')
</body>

Available Options

Using Laravel GPT Functions

Laravel GPT allows you to define custom GPTFunctions that ChatGPT can call to execute tasks within your application. This is useful for integrating dynamic data retrieval, calculations, or external API calls into the ChatGPT responses.

Refer to the Laravel GPT documentation for more details.

Page Watcher

The Page Watcher feature allows the ChatGPT agent to receive additional context about the current page by including the .innerText of a specified page element (default: .fi-page, the Filament page container) along with the page URL in each message sent to ChatGPT. This helps provide better contextual responses based on the page content.

Privacy Considerations

Use this feature with caution. Since the entire page content (or the selected element's content) is sent to ChatGPT, users should be informed of this behavior. The pageWatcherEnabled option supports a closure, allowing you to provide an opt-in mechanism for users.

Enabling Page Watcher

To enable the Page Watcher feature, set the pageWatcherEnabled option to true and define a selector for the element to monitor:

public function panel(Panel $panel): Panel  
{
    return $panel
        ->plugin(
            ChatgptAgentPlugin::make()
                ->pageWatcherEnabled(true) // Enable page watcher
                ->pageWatcherSelector('.custom-content') // Specify the selector
                ->pageWatcherMessage(
                    "This is the plain text the user can see on the page, use it as additional context for the previous message:\n\n"
                ) // Optional custom message for ChatGPT
        );
}

Alternatively, you can use a closure to enable the feature conditionally, such as requiring users to opt-in:

public function panel(Panel $panel): Panel  
{
    return $panel
        ->plugin(
            ChatgptAgentPlugin::make()
                ->pageWatcherEnabled(fn () => auth()->user()->settings['enable_page_watcher'] ?? false) // User opt-in
                ->pageWatcherSelector('.fi-page')
        );
}

Changelog

Please see CHANGELOG for more information on what has changed recently.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

Package created by Bas Schleijpen.
The view and livewire component structure was inspired by Martin Hwang.
All Contributors

likeabas / filament-chatgpt-agent

Maintainers

Details