{"id":12991,"date":"2024-08-08T15:31:18","date_gmt":"2024-08-08T13:31:18","guid":{"rendered":"https:\/\/www.palentino.es\/blog\/?p=12991"},"modified":"2024-08-08T15:45:39","modified_gmt":"2024-08-08T13:45:39","slug":"crear-un-chat-con-ia-en-wordpress-el-plugin-pal-chat-ia","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/crear-un-chat-con-ia-en-wordpress-el-plugin-pal-chat-ia\/","title":{"rendered":"Crear un chat con IA en WordPress: El plugin &#8220;Pal Chat IA&#8221;"},"content":{"rendered":"<p>El desarrollador web, siempre esta buscando maneras de integrar las \u00faltimas tecnolog\u00edas en sus proyectos de WordPress. Recientemente, decid\u00ed aventurarme en el fascinante mundo de la inteligencia artificial (IA) y crear un plugin que permita a cualquier sitio de <strong>WordPress<\/strong> tener su propio chat impulsado por IA. Hoy, os comparto el <strong>Pal Chat IA Plugin<\/strong>.<\/p>\n<h4><span style=\"color: #800080;\">\u00bfQu\u00e9 es el Pal Chat IA Plugin?<\/span><\/h4>\n<p>El <strong>Pal Chat IA Plugin<\/strong> es un plugin de WordPress dise\u00f1ado para integrar un chat de inteligencia artificial en cualquier sitio web de WordPress. Este plugin permite a los usuarios interactuar con una IA directamente desde su sitio, utilizando algunas de las APIs m\u00e1s avanzadas disponibles hoy en d\u00eda, incluyendo <strong>OpenAI (ChatGPT)<\/strong>, <strong>Cohere<\/strong>, y <strong>AI21 Labs<\/strong>.<\/p>\n<p>El objetivo del plugin es ofrecer una manera sencilla y eficaz de a\u00f1adir una funci\u00f3n de chat inteligente a cualquier sitio web, sin necesidad de conocimientos avanzados de programaci\u00f3n. Todo lo que se necesita es instalar y activar el plugin, configurar una clave API, y listo, \u00a1tendr\u00e1s un chat impulsado por IA funcionando en tu sitio!<\/p>\n<p><a href=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/chat-ia-plugin.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12992\" src=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/chat-ia-plugin.png\" alt=\"\" width=\"1068\" height=\"84\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/chat-ia-plugin.png 1068w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/chat-ia-plugin-300x24.png 300w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/chat-ia-plugin-1024x81.png 1024w\" sizes=\"auto, (max-width: 1068px) 100vw, 1068px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/Wordpress-plugin-ia.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12997\" src=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/Wordpress-plugin-ia.jpg\" alt=\"\" width=\"1131\" height=\"643\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/Wordpress-plugin-ia.jpg 1131w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/Wordpress-plugin-ia-300x171.jpg 300w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/Wordpress-plugin-ia-1024x582.jpg 1024w\" sizes=\"auto, (max-width: 1131px) 100vw, 1131px\" \/><\/a><\/p>\n<h4><\/h4>\n<p><!--more--><\/p>\n<h4>Funcionalidades Clave del Plugin<\/h4>\n<p>El <strong>Pal Chat IA Plugin<\/strong> incluye una serie de caracter\u00edsticas y opciones de personalizaci\u00f3n que lo hacen muy flexible y f\u00e1cil de usar:<\/p>\n<ul>\n<li><strong>Compatibilidad con M\u00faltiples APIs:<\/strong> Puedes elegir entre OpenAI, Cohere y AI21 Labs para gestionar las respuestas de la IA, lo que te permite seleccionar el servicio que mejor se adapte a tus necesidades.<\/li>\n<li><strong>Personalizaci\u00f3n del Chat:<\/strong> El plugin te permite personalizar el color del texto, el tama\u00f1o del texto, el texto del campo de entrada (placeholder), y las dimensiones del contenedor de chat. Esto asegura que el chat se integre perfectamente con el dise\u00f1o de tu sitio web.<\/li>\n<li><strong>Manejo de Solicitudes AJAX:<\/strong> Las solicitudes a las APIs se manejan de manera as\u00edncrona mediante AJAX, lo que significa que la experiencia del usuario es fluida y sin interrupciones.<\/li>\n<li><strong>Configuraci\u00f3n F\u00e1cil:<\/strong> Desde el panel de administraci\u00f3n de WordPress, puedes configurar r\u00e1pidamente tu clave API y seleccionar el servicio de IA, sin necesidad de tocar una l\u00ednea de c\u00f3digo.<\/li>\n<\/ul>\n<h4>Aspectos T\u00e9cnicos del Plugin<\/h4>\n<p>Desarrollar el <strong>Pal Chat IA Plugin<\/strong> fue un proyecto interesante que combin\u00f3 varias tecnolog\u00edas y mejores pr\u00e1cticas de desarrollo en WordPress. A continuaci\u00f3n, describo algunos de los aspectos t\u00e9cnicos m\u00e1s destacados:<\/p>\n<h5>1. <strong>Uso de wp_json_encode()<\/strong><\/h5>\n<p>Una de las recomendaciones de WordPress es utilizar wp_json_encode() en lugar de json_encode() para manejar mejor los problemas de codificaci\u00f3n de caracteres y asegurar la compatibilidad con las normas de WordPress. Durante el desarrollo del plugin, implement\u00e9 esta funci\u00f3n para asegurar que los datos enviados a las APIs fueran correctamente codificados y compatibles con los est\u00e1ndares de WordPress.<\/p>\n<h5>2. <strong>Manejo de Solicitudes AJAX<\/strong><\/h5>\n<p>El plugin utiliza AJAX para enviar y recibir mensajes de la IA sin recargar la p\u00e1gina. Esto se logra utilizando la funci\u00f3n wp_remote_post() en combinaci\u00f3n con wp_json_encode() para enviar datos en formato JSON a las APIs seleccionadas. La respuesta de la API se procesa y se muestra en tiempo real en la interfaz del chat.<\/p>\n<h5>3. <strong>Personalizaci\u00f3n Mediante el Panel de Administraci\u00f3n<\/strong><\/h5>\n<p>Para facilitar la configuraci\u00f3n, el plugin ofrece una p\u00e1gina en el panel de administraci\u00f3n de WordPress donde puedes ingresar tu clave API, seleccionar el servicio de IA y personalizar la apariencia del chat. Todos estos ajustes se almacenan utilizando la funci\u00f3n get_option() de WordPress, lo que garantiza que los cambios se apliquen de inmediato y se mantengan incluso despu\u00e9s de actualizar el plugin.<\/p>\n<p><a href=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/chat-ia-plugin-3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12994\" src=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/chat-ia-plugin-3.jpg\" alt=\"\" width=\"1021\" height=\"742\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/chat-ia-plugin-3.jpg 1021w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/chat-ia-plugin-3-300x218.jpg 300w\" sizes=\"auto, (max-width: 1021px) 100vw, 1021px\" \/><\/a><\/p>\n<h5>4. <strong>Seguridad y Sanitizaci\u00f3n de Datos<\/strong><\/h5>\n<p>En todo el desarrollo del plugin, se puso un gran \u00e9nfasis en la seguridad. Todas las entradas del usuario se sanitizan utilizando sanitize_text_field() para prevenir la inyecci\u00f3n de c\u00f3digo malicioso. Adem\u00e1s, se utiliza un nonce en las solicitudes AJAX para proteger contra ataques CSRF (Cross-Site Request Forgery).<\/p>\n<h4>Curiosidades del Desarrollo<\/h4>\n<p>El desarrollo del <strong>Pal Chat IA Plugin<\/strong> estuvo lleno de interesantes desaf\u00edos y aprendizajes. Una de las curiosidades m\u00e1s destacadas ocurri\u00f3 durante las pruebas de integraci\u00f3n con la API de Cohere. Para asegurarme de que la API funcionaba correctamente, realic\u00e9 una prueba manual desde la l\u00ednea de comandos en Windows usando curl. Aqu\u00ed est\u00e1 un ejemplo de la llamada que us\u00e9:<\/p>\n<pre>curl -X POST \"https:\/\/api.cohere.ai\/generate\" ^\r\n-H \"Authorization: Bearer TU_CLAVE_DE_API\" ^\r\n-H \"Content-Type: application\/json\" ^\r\n-d \"{\\\"model\\\": \\\"command-xlarge-nightly\\\", \\\"prompt\\\": \\\"Esto es una prueba de chat de Cohere\\\", \\\"max_tokens\\\": 300, \\\"temperature\\\": 0.7}\"<\/pre>\n<p>&nbsp;<\/p>\n<p>Esta simple prueba me ayud\u00f3 a confirmar que la API estaba respondiendo correctamente antes de integrar la funcionalidad en el plugin. Adem\u00e1s, me permiti\u00f3 verificar los par\u00e1metros y la estructura de la solicitud que eventualmente se implementar\u00eda en el c\u00f3digo. Ojo que he realizado las pruebas desde Windows y en GNU\/Linux los par\u00e1metros varian.<\/p>\n<p>Otro aspecto interesante fue el manejo de la validaci\u00f3n de las respuestas <strong>JSON<\/strong>. Inicialmente, encontr\u00e9 problemas al usar json_encode(), pero al adoptar wp_json_encode(), pero se superaron los desaf\u00edos relacionados con la codificaci\u00f3n de caracteres, garantizando as\u00ed que el plugin cumpliera con los est\u00e1ndares de WordPress.<\/p>\n<h4>C\u00f3mo Usar el Plugin<\/h4>\n<p>Usar el <strong>Chat IA Plugin<\/strong> es incre\u00edblemente sencillo. Aqu\u00ed te dejo un breve tutorial para empezar:<\/p>\n<ol>\n<li><strong>Instalaci\u00f3n y Activaci\u00f3n:<\/strong> Descarga el plugin desde el <a href=\"#\" rel=\"noreferrer\">enlace de descarga inferior<\/a>\u00a0(Nota: El plugin a\u00fan est\u00e1 pendiente de aprobaci\u00f3n en el repositorio oficial de WordPress, por lo que este enlace proporcionar\u00e1 acceso directo mientras tanto). Luego, act\u00edvalo desde la p\u00e1gina de plugins de tu panel de WordPress.<\/li>\n<li><strong>Configuraci\u00f3n:<\/strong> Ve a Ajustes &gt; Chat IA Plugin. Aqu\u00ed puedes ingresar tu clave API, seleccionar el servicio de IA (OpenAI, Cohere, AI21), y personalizar el chat seg\u00fan tus preferencias.<\/li>\n<li><strong>Agregar el Chat a tu Sitio:<\/strong> Inserta el shortcode <strong>[*chat_ia*] <\/strong>(pongo * porque saldria el chat aqu\u00ed)\u00a0en cualquier p\u00e1gina o entrada donde desees que aparezca el chat. Guarda la p\u00e1gina o entrada, y el chat deber\u00eda estar listo para interactuar con los visitantes.<\/li>\n<li><strong>Prueba y Ajustes:<\/strong> Despu\u00e9s de agregar el chat, visita la p\u00e1gina y prueba su funcionamiento. Si es necesario, regresa al panel de configuraci\u00f3n para ajustar las opciones hasta que el chat est\u00e9 perfectamente integrado en tu sitio.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong>Demo de funcionamiento:<\/strong><\/p>\n    <!-- Contenedor principal del chat con estilos en l\u00ednea para ancho personalizado -->\r\n    <div id=\"chat-ia-container\" style=\"width: ;\">\r\n        <!-- \u00c1rea donde se mostrar\u00e1n los mensajes -->\r\n        <div id=\"chat-ia-messages\" style=\"height: 200px;\"><\/div>\r\n        <!-- Campo de entrada de texto -->\r\n        <textarea id=\"chat-ia-input\" placeholder=\"Escribe tu pregunta r\u00e1pida sobre el articulo\"><\/textarea>\r\n        <!-- Bot\u00f3n de env\u00edo -->\r\n        <button id=\"chat-ia-send\">Enviar<\/button>\r\n    <\/div>\r\n    \n<p>&nbsp;<\/p>\n<p><strong>Enlace de descarga (haz clic en la imagen)<\/strong><\/p>\n<p>Hasta que WordPress apruebe el plugin que ya he enviado, ya que debe pasar por una serie de pruebas antes de ser incluido en el repositorio oficial de plugins, os dejo disponible la descarga del plugin en formato ZIP. El plugin ya ha superado las pruebas del sistema de validaci\u00f3n de plugins de WordPress:<\/p>\n<p>[Plugin Check](<a href=\"https:\/\/wordpress.org\/plugins\/plugin-check\/\" target=\"_blank\" rel=\"noopener\">https:\/\/wordpress.org\/plugins\/plugin-check\/<\/a>).<\/p>\n<div id=\"attachment_4681\" style=\"width: 160px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.palentino.es\/software\/chat-ia-plugin.zip\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-4681\" class=\"wp-image-4681 size-full\" src=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/05\/CMS-wordpress.png\" alt=\"Experto en wordpress\" width=\"150\" height=\"150\" \/><\/a><p id=\"caption-attachment-4681\" class=\"wp-caption-text\">Haz clic para descargar el zip<\/p><\/div>\n<h4>Reflexiones Finales<\/h4>\n<p>El <strong>Chat IA Plugin<\/strong> es una herramienta poderosa que abre nuevas posibilidades para la interacci\u00f3n en sitios web de WordPress. Ya sea que quieras ofrecer soporte automatizado, entretenimiento interactivo o simplemente explorar las capacidades de la inteligencia artificial, este plugin te proporciona una soluci\u00f3n completa y f\u00e1cil de usar.<\/p>\n<p>Estoy esperando de ver c\u00f3mo este plugin puede ser utilizado por la comunidad de WordPress y espero recibir comentarios y sugerencias para futuras mejoras. Si tienes alguna pregunta o necesitas ayuda con la configuraci\u00f3n, no dudes en contactarme.<\/p>\n<p>\u00a1Espero que disfrutes usando el <strong>Chat IA Plugin<\/strong> tanto como yo disfrut\u00e9 desarroll\u00e1ndolo!<\/p>\n<p>&nbsp;<\/p>\n<p>Anexo \ud83d\ude42<\/p>\n<p><a href=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/Plugin-prueba.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13010\" src=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/Plugin-prueba.png\" alt=\"\" width=\"641\" height=\"403\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/Plugin-prueba.png 641w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2024\/08\/Plugin-prueba-300x189.png 300w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El desarrollador web, siempre esta buscando maneras de integrar las \u00faltimas tecnolog\u00edas en sus proyectos de WordPress. Recientemente, decid\u00ed aventurarme en el fascinante mundo de la inteligencia artificial (IA) y crear un plugin que permita a cualquier sitio de WordPress tener su propio chat impulsado por IA. Hoy, os comparto el Pal Chat IA Plugin. \u00bfQu\u00e9 es el Pal Chat IA Plugin? El Pal Chat IA Plugin es un plugin de WordPress dise\u00f1ado para integrar un chat de inteligencia artificial en cualquier sitio web de WordPress. Este plugin permite a los usuarios interactuar con una IA directamente desde su sitio, utilizando algunas de las APIs m\u00e1s avanzadas disponibles hoy en d\u00eda, incluyendo OpenAI (ChatGPT), Cohere, y AI21 Labs. El objetivo del plugin es ofrecer una manera sencilla y eficaz de a\u00f1adir una funci\u00f3n de chat inteligente a cualquier sitio web, sin necesidad de conocimientos avanzados de programaci\u00f3n. Todo lo que se necesita es instalar y activar el plugin, configurar una clave API, y listo, \u00a1tendr\u00e1s un chat impulsado por IA funcionando en tu sitio!<\/p>\n","protected":false},"author":1,"featured_media":4122,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[122,664],"class_list":["post-12991","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-plugin","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/12991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=12991"}],"version-history":[{"count":15,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/12991\/revisions"}],"predecessor-version":[{"id":13011,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/12991\/revisions\/13011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/4122"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=12991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=12991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=12991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}