> ## Documentation Index
> Fetch the complete documentation index at: https://docs.plazbot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# PlazbotProvider

> Provider que conecta tu aplicacion React con el SDK de Plazbot.

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

```tsx theme={null}
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

| Prop       | Tipo                                         | Requerido | Default   | Descripcion                                          |
| ---------- | -------------------------------------------- | --------- | --------- | ---------------------------------------------------- |
| `sdk`      | `Plazbot`                                    | Si        | —         | Instancia del SDK inicializada con credenciales.     |
| `agentId`  | `string`                                     | Si        | —         | 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. |
| `iconMode` | `IconMode`                                   | No        | `'svg'`   | Modo de iconos para las cards de acciones.           |
| `children` | `ReactNode`                                  | Si        | —         | Componentes hijos que tendran acceso al contexto.    |

## Tema

Puedes pasar un tema predefinido o un objeto parcial para personalizar colores:

```tsx theme={null}
// 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](/sdk/react/theming).

## Modo de Iconos

Controla como se renderizan los iconos en las cards de acciones del agente:

```tsx theme={null}
// 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:**

| Clave          | Uso                  |
| -------------- | -------------------- |
| `contact`      | Tarjeta de contacto  |
| `mail`         | Email                |
| `phone`        | Telefono             |
| `calendar`     | Evento de calendario |
| `clock`        | Hora                 |
| `availability` | Disponibilidad       |
| `tag`          | Etiqueta             |
| `assign`       | Asignacion           |
| `stage`        | Etapa                |
| `segmentation` | Segmentacion         |
| `solved`       | Resuelto             |
| `transfer`     | Transferencia        |
| `globe`        | Web                  |
| `gear`         | Configuracion        |
| `file`         | Archivo              |
| `source`       | Fuente               |
| `check`        | Confirmacion         |
| `attach`       | Adjunto              |
| `send`         | Enviar               |

## Multiples Providers

Puedes tener multiples providers para conectar diferentes agentes en la misma pagina:

```tsx theme={null}
<PlazbotProvider sdk={sdk} agentId="ag_ventas" theme="light">
  <Chat />
</PlazbotProvider>

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