Skip to main content
Agents te permite crear agentes de IA conversacionales con un prompt personalizado, probarlos en tiempo real y publicarlos como un widget de chat embebible en cualquier sitio web.

​
Interfaz

La pantalla está dividida en dos columnas redimensionables:
Screenshot 2026 06 03 At 3 51 45 PM
  • Izquierda — Chat para probar el agente con la configuración actual (no necesitas guardar primero).
  • Derecha — Donde defines identidad, instrucciones y modelo.
Arrastra el divisor entre columnas para ajustar el espacio (mínimo 200px, máximo 600px).

​
Crear un agente

1

Abre Agents

Desde el panel de Componentes de un proyecto → + Nuevo → Agent.
2

Nombra el agente

En el campo de la parte superior. Es obligatorio para guardar.
3

Agrega una descripción (opcional)

Una nota breve sobre para qué sirve el agente.
4

Define las instrucciones

Elige modo Inteligente o Manual (ver siguiente sección).
5

Selecciona el modelo

Default recomendado para la mayoría de casos.
6

Click en Crear agente

El agente queda guardado y listo para publicar como widget.
El nombre del agente es obligatorio. Si intentas guardar sin él, el campo se resaltará en rojo.

​
Instrucciones — Modo Inteligente

Divide el prompt en 6 campos estructurados para evitar prompts monolíticos difíciles de mantener:
CampoPara qué sirveEjemplo
Rol del AgenteQuién es el agente, perfil y estilo”Eres un asistente de ventas experto en SaaS”
Tarea u ObjetivoQué debe lograr en cada interacción”Tu tarea es calificar leads y agendar demos”
Contexto y EntornoInfo de fondo: empresa, producto, audiencia”Trabajas para Puente OS, plataforma de automatización”
Guías y Buenas PrácticasTono, estilo, estructura”Sé conciso. Usa listas cuando sea apropiado”
Restricciones y ProhibicionesLo que NO debe hacer”No inventes precios. No hagas promesas sin confirmar”
Formato de SalidaCómo estructurar respuestas”Siempre termina con una pregunta de seguimiento”

​
Editar un campo

Click en el icono de lápiz a la derecha del campo. Se despliega un textarea. Click en el icono de colapsar para cerrarlo.
Cada campo muestra una preview truncada del contenido cuando está colapsado.

​
Instrucciones — Modo Manual

Textarea libre donde escribes el prompt completo. Útil cuando ya tienes un prompt afinado que quieres pegar directo.

​
Transiciones entre modos

DirecciónQué pasa
Inteligente → ManualLos 6 campos se compilan en un prompt con etiquetas [ROLE], [TASK], etc. y se cargan en el textarea
Manual → InteligenteEl sistema intenta parsear las etiquetas [TAG] y distribuirlas. Si no hay etiquetas, todo va al campo Contexto
Cambiar de modo no borra tu trabajo. Siempre hay una conversión automática.

​
Chat de prueba

La columna izquierda incluye un chat que envía mensajes al modelo con el prompt actual — incluso si no guardaste.

​
Cómo usarlo

1

Escribe tu mensaje

En el campo de texto inferior.
2

Envía

Presiona Enter o el botón de enviar.
3

Itera

Modifica el prompt en la columna derecha y prueba inmediatamente sin guardar.

​
Controles

  • Botón de reiniciar en el header del chat: borra toda la conversación y empieza de cero
  • El historial se incluye en cada petición, manteniendo contexto
El chat de prueba usa el prompt actual del editor. El widget publicado usa el prompt guardado. Guarda antes de publicar para que ambos coincidan.

​
Seleccionar el modelo

En la sección Modelo de la columna derecha eliges qué modelo de IA usa el agente:
ModeloCuándo usarlo
Llama 3.3 Nemotron Super 49BAlta capacidad, recomendado para tareas complejas
GPT OSS 120BModelo grande de OpenAI
Gemini 3 FlashRápido y eficiente para respuestas ágiles
Default recomendado para la mayoría de casos. Escribe a soporte si necesitas un modelo específico que no aparece en el selector.

​
Publicar como widget

Una vez guardado el agente, puedes publicarlo como widget de chat embebible en cualquier sitio web (Webflow, Framer, WordPress, custom HTML, etc.).

​
Abrir la configuración del widget

Click en Configurar Widget en el footer de la columna de configuración. Se abre un modal con dos paneles: Configuración (izquierda) y Preview (derecha). La preview se actualiza en tiempo real con cada cambio.

​
Secciones de configuración

URL del agente en el backend, pre-llenada automáticamente. No necesitas editarla. Formato: https://backend.../chat/{public_id}.
Personaliza visualmente el widget:
  • Título — texto en la cabecera del chat
  • URL del Logo — imagen de tu marca
  • Ancho / Alto del Logo — en CSS (120px, 35px)
  • Texto de Bienvenida — título de la pantalla inicial
  • Tiempo de Respuesta — subtítulo (ej. “Respondemos siempre”)
  • Placeholder del Input — texto guía del campo de mensaje
  • Texto de botones — Enviar, Cargando, Error, Nueva Conversación
  • Mensaje Inicial — lo que el agente envía al abrir el chat por primera vez
  • Mensaje Proactivo — burbuja flotante antes de abrir el chat, posicionable arriba o al lado del botón
  • Posición del Widget — derecha o izquierda
  • Distancia desde el fondo — en CSS (ej. 20px)
  • Colores — primario, secundario, fondo, fuente (selector visual + hex)
Activa renderizado de Markdown en las respuestas del agente: negrita, listas, código, etc.
Botones de acceso rápido en el chat. Cada uno puede ser:
  • URL — abre un enlace externo
  • Chat — envía un mensaje predefinido al agente
Agrega con + Agregar Botón, elimina con el botón de eliminar.

​
Obtener el código

1

Ajusta la configuración

Hasta que la preview lateral se vea como quieres.
2

Copia el snippet

Click en Copiar Código.
3

Guarda la configuración

Click en Guardar para conservar los ajustes del widget.
4

Pega antes del </body>

En tu sitio web. El widget aparece como burbuja flotante.

​
Estructura del snippet

<script>
window.ChatWidgetConfig = {
  "webhook": { "url": "https://backend.../chat/{public_id}", ... },
  "branding": { "name": "Puente OS", ... },
  "style": { "primaryColor": "#0d0d0d", ... },
  "menu": { "buttons": [...] },
  "markdown": { "enabled": true }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.0/dist/purify.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/octaviofv/chat_widget_puente/script_puente.js"></script>
Pega este código antes del cierre del </body> en tu sitio web.

​
Editar un agente existente

Abrir un agente carga automáticamente su configuración. El botón de guardado cambia a Guardar cambios y solo se actualizan los campos que modificaste (título, descripción, prompt).

​
Estados del botón Guardar

EstadoTextoColor
Normal”Crear agente” / “Guardar cambios”Negro
Guardando”Guardando…”Gris oscuro
Éxito”Guardado”Verde (2.5 seg)
Si ocurre un error, se muestra el mensaje en rojo junto al botón.
Si la URL de la página incluye ?project=N, el agente recién creado se asocia automáticamente a ese proyecto.

​
Créditos

Los créditos se consumen al crear un agente y cada vez que un usuario interactúa con el widget publicado. Las pruebas en el chat interno y las ediciones del agente no consumen créditos, así que puedes iterar las instrucciones libremente.

​
Casos de uso comunes

Soporte automatizado

Embebe el widget en tu sitio para responder preguntas frecuentes 24/7.

Calificador de leads

Configura el agente para hacer preguntas que califiquen leads antes de agendar.

Asistente interno

Publica el widget en herramientas internas para que el equipo consulte procesos.

Onboarding de usuarios

Guía paso a paso a los usuarios nuevos en tu producto.

​
Preguntas frecuentes

El selector incluye Llama 3.3 Nemotron Super 49B, GPT OSS 120B y Gemini 3 Flash, según tu plan. Escribe a soporte si necesitas un modelo específico.
En esta versión el agente responde solo con el contexto del prompt. Para que use datos en vivo, configura un workflow que llame al agente con el contexto correcto y embebe el chat conectado a ese workflow.
El widget publicado usa el prompt guardado en el backend, no el del editor. Guarda siempre antes de publicar para que reflejen lo mismo.
El historial se mantiene durante la sesión del navegador del usuario. No se persiste entre sesiones a menos que configures el storage manualmente.
Sí. El widget es responsive por default. En pantallas pequeñas se abre en pantalla completa.
Todos los textos, colores y mensajes son configurables desde el modal. Para customizaciones más profundas (CSS custom, eventos JS), escribe a soporte.