> ## 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.

# React SDK

> Componentes React listos para integrar un chat de IA en tu aplicacion.

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>`.

```bash theme={null}
npm install plazbot
```

<Info>
  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.
</Info>

## Inicio Rapido

```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',
})

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

<CardGroup cols={2}>
  <Card title="PlazbotProvider" icon="box" href="/sdk/react/provider">
    Provider que envuelve tu app y conecta con el SDK.
  </Card>

  <Card title="Chat" icon="message-bot" href="/sdk/react/chat">
    Chat completo con header, mensajes, input y sugerencias.
  </Card>

  <Card title="ChatWidget" icon="comment" href="/sdk/react/widget">
    Boton flotante que abre un chat embebido.
  </Card>

  <Card title="Hooks" icon="code" href="/sdk/react/hooks">
    useChat, useAgent y useSession para UIs custom.
  </Card>

  <Card title="Theming" icon="palette" href="/sdk/react/theming">
    Temas light, dark o personalizado con PlazbotTheme.
  </Card>

  <Card title="Cards Personalizadas" icon="cards-blank" href="/sdk/react/cards">
    Renderiza cards custom cuando el agente ejecuta acciones.
  </Card>
</CardGroup>

## Requisitos

| Dependencia | Version   |
| ----------- | --------- |
| `react`     | >= 18.0.0 |
| `react-dom` | >= 18.0.0 |
| `plazbot`   | >= 2.1.3  |

## Recursos

<CardGroup cols={2}>
  <Card title="GitHub Examples" icon="github" href="https://github.com/plazbot/plazbot-react-examples">
    Ejemplos funcionales con Vite + React.
  </Card>

  <Card title="Playground" icon="play" href="https://plazbot.com/developers/react">
    Prueba los componentes en vivo.
  </Card>
</CardGroup>