Chatbots inteligentes en PHP con KumbiaPHP

¿Qué es un chatbot inteligente?

Un chatbot con PHP es un asistente virtual que usa inteligencia artificial para simular una conversación natural con usuarios, realizando tareas como responder preguntas, agendar citas, brindar soporte técnico y más. Implementar un chatbot inteligente utilizando PHP puede potenciar significativamente tu aplicación web.

Veremos paso a paso cómo configurar las dependencias, conectar con el modelo GPT-4 y construir una interfaz simple que permita interactuar con el asistente directamente desde tu aplicación web.

Herramientas recomendadas para crear chatbots con PHP

OpenAI API: Facilita el acceso a modelos avanzados como GPT-4 para procesamiento de lenguaje natural y es ideal para construir un chatbot con PHP.
Dialogflow: Servicio gestionado de Google que simplifica la creación de interfaces conversacionales y puede integrarse fácilmente como chatbot con PHP.
Rasa: Alternativa open source para chatbots personalizados y con mayor control, perfecta para crear un chatbot con PHP.

Creando un chatbot con PHP y KumbiaPHP usando la API de OpenAI

Paso 1: Instalar dependencias

Usa Composer para instalar la librería oficial de OpenAI para tu chatbot con PHP (Packagist de
OpenAI PHP):

composer require openai-php/client

Paso 2: Configuración específica para OpenAI

Crea un archivo específico para la configuración en config/openai.php para tu chatbot con PHP:

<?php

return [
    'api_key' => 'TU_API_KEY',
    'model' => 'gpt-4-turbo',
    'systemPrompt' => 
        'Eres un asistente útil. Te llamas Kumbita y amas Kumbiaphp',
];

Paso 3: Crear modelo para lógica de OpenAI

Crea el archivo app/models/open_ai_model.php, esencial para desarrollar un chatbot con PHP:

<?php

use \OpenAI\Client;

/**
 * OpenAI Service Model
 */
class OpenAiModel
{
    /**
     * @var OpenAiModel|null Instancia única de la clase
     */
    private static ?OpenAiModel $instance;

    /**
     * @var Client El cliente OpenAI
     */
    private Client $client;

    /**
     * @var array Configuración de OpenAI
     */
    private array $config;

    /**
     * Constructor para otras config
     *
     * @param array Configuración (opcional)
     */
    public function __construct(?array $config = null)
    {
        $this->config = $config ?? Config::read('openai');
        $this->client = OpenAI::client($this->config['api_key']);
    }

    /**
     * Obtiene la instancia única del servicio
     *
     * @param array Configuración (opcional)
     * @return OpenAiModel
     */
    public static function getInstance(?array $config = null): self
    {
        return self::$instance ??= new self($config);
    }

    /**
     * Obtiene el cliente OpenAI
     * 
     * @return Client
     */
    public function getClient(): Client
    {
        return $this->client;
    }

    /**
     * Envía un mensaje a OpenAI y recibe la respuesta
     * 
     * @param string $message El mensaje del usuario
     * @param string $systemPrompt El prompt del sistema (opcional)
     *
     * @return string La respuesta del modelo
     */
    public function sendMessage(string $message, ?string $systemPrompt = null): string
    {
        $response = $this->client->chat()->create([
            'model' => $this->config['model'],
            'messages' => [
                [
                  'role' => 'system',
                  'content' => $systemPrompt ?? $this->config['systemPrompt']
                ],
                [
                  'role' => 'user',
                  'content' => $message
                ],
            ],
        ]);

        return $response->choices[0]->message->content;
    }
}

Paso 4: Crear controlador Chatbot en KumbiaPHP

<?php

class ChatbotController extends AppController
{
    /**
     * Muestra el chatbot
     */
    public function index()
    {
    }

    /**
     * Endpoint para manejar mensajes del chatbot
     */
    public function message()
    {
        View::select(null, 'json');

        $message = Input::post('message');

        $this->data = match ($message) {
            null, '' => [],
            default =>  ['reply' => OpenAiModel::getInstance()->sendMessage($message)],
        };
    }
}

Paso 5: Crear la vista del chatbot en KumbiaPHP

Crea la vista index.phtml en app/views/chatbot/ para interactuar fácilmente con tu chatbot con PHP:

<section id="aibot">
    <h1>Chatbot Inteligente con PHP y KumbiaPHP</h1>

    <div id="chatResponse">
        <p>
            <b>Kumbita:</b> Hola, me llamo Kumbita. ¿Qué quieres saber hoy?
        </p>
    </div>

    <?= Form::open('', 'POST', 'id="chatbot"') ?>
    <?= Form::text('message', 'placeholder="Escribe tu pregunta" autofocus') ?>
    <?= Form::submit('Enviar', 'class="btn btn-primary"') ?>
    <?= Form::close() ?>
</section>

<script>
    document.getElementById("chatbot").addEventListener("submit",
        function(event) {
            event.preventDefault();
            sendMessage();
        });

    const messageEl = document.getElementById('message');
    const chatResponse = document.getElementById('chatResponse');
    const btnSubmit = document.querySelector('#chatbot [type="submit"]');
    const speech = 'speechSynthesis' in window ? new SpeechSynthesisUtterance() : null;
    const apiError = "Lo siento, parece que hay un error al conectar a la API";

    speak("Hola, me llamo Kumbita. ¿Qué quieres saber hoy?", "es");

    function sendMessage() {
        const message = messageEl.value;
        if(message.trim() === '') return;
        btnSubmit.disabled = true;
        messageEl.disabled = true;
        chatResponse.innerHTML += `<p><b>Tu:</b> ${message}</p><div id="loading"></div>`;
        chatResponse.scrollTop = chatResponse.scrollHeight;

        fetch('/chatbot/message', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Accept': 'application/json'
                },
                body: 'message=' + encodeURIComponent(message)
            })
            .then(response => response.json())
            .then(data => {
                response(data.reply ?? "");
            })
            .catch(error => {
                console.log(error);
                response(apiError);
            })
            .finally(() => {
                btnSubmit.disabled = false;
                messageEl.disabled = false;
                messageEl.value = '';
                messageEl.focus();
            });
    }

    function response(message) {
        speak(message);
        document.getElementById('loading').remove();
        chatResponse.innerHTML += `<p><b>Kumbita:</b> ${message}</p>`;
        chatResponse.scrollTop = chatResponse.scrollHeight;
    }

    function speak(text, lang = navigator.language) {
        if(!speech) return;
        speech.lang = lang
        speech.text = text
        window.speechSynthesis.speak(speech)
    }
</script>

<style>
    #aibot {
        max-width: 500px;
        margin: 0 auto;

        & h1 {
            text-align: center;
        }

        & #chatbot {
            display: flex;
            margin-top: 1em;
        }

        & #message {
            flex: 1;
            border-radius: 2rem 0 0 2rem;
            padding: 0.5em 1em;
            box-shadow: none;

            &:focus {
                outline: none;
            }
        }

        & [type="submit"] {
            flex: 0;
            border-radius: 0 2rem 2rem 0;
            box-shadow: none;
            
            &:disabled {
                opacity: 0.5;
            }
        }

        & #chatResponse {
            margin: 20px auto 0;
            min-height: 60px;
            max-height: 400px;
            background: #f5f5f5;
            border-radius: 6px;
            padding: 1em;
            box-shadow: 1px 1px 5px #eee;
            overflow-y: auto;
            display: flex;
            flex-direction: column;

            & p {
                color: #333;
            }
        }
    }
    #loading {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: block;
        margin:15px auto;
        position: relative;
        color: #9ab8ef;
        box-sizing: border-box;
        animation: animloader 1s linear infinite alternate;
    }

    @keyframes animloader {
        0% {box-shadow: -38px -6px, -14px 6px,  14px -6px;}
        33% {box-shadow: -38px 6px, -14px -6px,  14px 6px;}
        66% {box-shadow: -38px -6px, -14px 6px, 14px -6px;}
        100% {box-shadow: -38px 6px, -14px -6px, 14px 6px;}
    }
</style>

Ventajas de usar chatbots en aplicaciones PHP

Disponibilidad 24/7.
Respuestas inmediatas y personalizadas.
Optimización de recursos humanos y reducción de costos operativos.

Este ejemplo constituye una base sólida para comprender cómo integrar inteligencia artificial en tus proyectos PHP con KumbiaPHP. A partir de aquí, puedes ampliarlo añadiendo manejo de historial de conversación, personalización de prompts del sistema, validaciones adicionales de entrada, o incluso mecanismos de seguridad para evitar abusos en el endpoint.

Al finalizar esta guía, tendrás un chatbot completamente funcional listo para integrarse en cualquier proyecto desarrollado con KumbiaPHP. Anímate a probarlo, experimentar con sus respuestas y descubrir el potencial de combinar la sencillez de PHP con la potencia de la inteligencia artificial. Si te ha resultado útil, comparte este artículo o deja tus comentarios en el blog para seguir mejorando juntos.

Agradecimientos

Agradecemos especialmente a @joanhey por tomarse el tiempo de revisar y mejorar el código de ejemplo, aportando sugerencias valiosas que ayudaron a hacerlo más claro y funcional para la comunidad de desarrolladores de KumbiaPHP.

Relacionado

Tags: ejemplos

Web & app MVC PHP framework