Skip to main content
Plazbot incluye un set de componentes React que te permiten integrar un chat de IA directamente en tu aplicacion web. Desde un chat completo hasta un widget flotante, todo funciona con un solo <PlazbotProvider>. 
npm install plazbot
Los componentes React se importan desde plazbot/react. El SDK incluye tanto la parte de backend (agentes, mensajes, contactos) como los componentes de frontend en un solo paquete.

​
Inicio Rapido

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

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

export default function App() {
  return (
    <PlazbotProvider sdk={sdk} agentId="YOUR_AGENT_ID">
      <Chat showHeader showPoweredBy />
    </PlazbotProvider>
  )
}
Eso es todo. Con esas lineas tienes un chat funcional que se conecta a tu agente de IA.

​
Arquitectura

Todos los componentes deben estar dentro de un <PlazbotProvider>. El provider se encarga de:
  • Conectar con el SDK y tu agente
  • Gestionar el estado de la conversacion
  • Inyectar el tema visual
  • Proveer los hooks (useChat, useAgent, useSession)
<PlazbotProvider>
  ├── <Chat />            # Chat completo con header, mensajes e input
  ├── <ChatWidget />      # Boton flotante con chat embebido
  ├── useChat()           # Hook para construir UI custom
  ├── useAgent()          # Hook para obtener datos del agente
  └── useSession()        # Hook para gestionar la sesion
</PlazbotProvider>

​
Componentes Disponibles

PlazbotProvider

Provider que envuelve tu app y conecta con el SDK.

Chat

Chat completo con header, mensajes, input y sugerencias.

ChatWidget

Boton flotante que abre un chat embebido.

Hooks

useChat, useAgent y useSession para UIs custom.

Theming

Temas light, dark o personalizado con PlazbotTheme.

Cards Personalizadas

Renderiza cards custom cuando el agente ejecuta acciones.

​
Requisitos

DependenciaVersion
react>= 18.0.0
react-dom>= 18.0.0
plazbot>= 2.1.3

​
Recursos

GitHub Examples

Ejemplos funcionales con Vite + React.

Playground

Prueba los componentes en vivo.