Skip to main content
El <PlazbotProvider> es el componente raiz que conecta tu aplicacion con el SDK. Todos los demas componentes (<Chat />, <ChatWidget />) y hooks (useChat, useAgent, useSession) deben estar dentro de este provider.

​
Uso Basico

import { Plazbot } from 'plazbot'
import { PlazbotProvider, Chat } from 'plazbot/react'

const sdk = new Plazbot({
  workspaceId: 'YOUR_WORKSPACE_ID',
  apiKey: 'YOUR_API_KEY',
  zone: 'LA',
})

function App() {
  return (
    <PlazbotProvider sdk={sdk} agentId="YOUR_AGENT_ID">
      <Chat />
    </PlazbotProvider>
  )
}

​
Props

PropTipoRequeridoDefaultDescripcion
sdkPlazbotSi—Instancia del SDK inicializada con credenciales.
agentIdstringSi—ID del agente de IA al que se conecta el chat.
theme'light' | 'dark' | Partial<PlazbotTheme>No'light'Tema visual. Puede ser un preset o un objeto custom.
iconModeIconModeNo'svg'Modo de iconos para las cards de acciones.
childrenReactNodeSi—Componentes hijos que tendran acceso al contexto.

​
Tema

Puedes pasar un tema predefinido o un objeto parcial para personalizar colores: 
// Tema predefinido
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" theme="dark">

// Tema custom (override parcial)
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" theme={{
  primaryColor: '#7c3aed',
  backgroundColor: '#faf5ff',
  bubbleUserBg: '#7c3aed',
  bubbleUserText: '#ffffff',
}}>
Para la lista completa de propiedades del tema, consulta Theming.

​
Modo de Iconos

Controla como se renderizan los iconos en las cards de acciones del agente: 
// SVG vectoriales (default)
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" iconMode="svg">

// Emojis Unicode
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" iconMode="emoji">

// Sin iconos
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" iconMode="none">

// Iconos custom (mapa parcial)
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" iconMode={{
  contact: <MiIconoContacto />,
  calendar: <MiIconoCalendario />,
}}>
Claves de iconos disponibles:
ClaveUso
contactTarjeta de contacto
mailEmail
phoneTelefono
calendarEvento de calendario
clockHora
availabilityDisponibilidad
tagEtiqueta
assignAsignacion
stageEtapa
segmentationSegmentacion
solvedResuelto
transferTransferencia
globeWeb
gearConfiguracion
fileArchivo
sourceFuente
checkConfirmacion
attachAdjunto
sendEnviar

​
Multiples Providers

Puedes tener multiples providers para conectar diferentes agentes en la misma pagina: 
<PlazbotProvider sdk={sdk} agentId="ag_ventas" theme="light">
  <Chat />
</PlazbotProvider>

<PlazbotProvider sdk={sdk} agentId="ag_soporte" theme="dark">
  <ChatWidget />
</PlazbotProvider>