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

# React

> Build agent-powered UIs with React and the Polpo SDK.

## Install

```bash theme={null}
npm install @polpo-ai/sdk @polpo-ai/react
```

## Setup

```tsx theme={null}
import { PolpoProvider } from "@polpo-ai/react";

const root = createRoot(document.getElementById("root")!);

root.render(
  <PolpoProvider
    baseUrl="/api/polpo"
    autoConnect={false}
  >
    <App />
  </PolpoProvider>
);
```

## Chat with an agent

The `useChat` hook handles streaming, session management, tool call tracking, and abort in a single hook:

```tsx theme={null}
import { useState } from "react";
import { useChat } from "@polpo-ai/react";

export function Chat() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, isStreaming, abort, newSession } = useChat({
    agent: "assistant",
  });

  const send = () => {
    if (!input.trim()) return;
    sendMessage(input);
    setInput("");
  };

  return (
    <div>
      {messages.map((m, i) => (
        <div key={i} className={m.role}>{m.content}</div>
      ))}
      <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === "Enter" && send()} />
      <button onClick={send} disabled={isStreaming}>Send</button>
      <button onClick={abort} disabled={!isStreaming}>Stop</button>
      <button onClick={newSession}>New chat</button>
    </div>
  );
}
```

## Live task dashboard

```tsx theme={null}
import { useTasks, useStats } from "@polpo-ai/react";

export function Dashboard() {
  const { tasks, isLoading } = useTasks();
  const { stats } = useStats();

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <div>
        <span>{stats?.pending ?? 0} pending</span>
        <span>{stats?.inProgress ?? 0} running</span>
        <span>{stats?.done ?? 0} done</span>
      </div>
      <ul>
        {tasks.map(t => (
          <li key={t.id}>{t.title} — {t.status}</li>
        ))}
      </ul>
    </div>
  );
}
```

<Warning>
  Keep project API keys on your backend. The `/api/polpo` proxy must authenticate your application user and inject the Cloud key. Keep `autoConnect` disabled until the proxy also forwards SSE with an authorization header.
</Warning>

## Templates

Get started faster with pre-built templates. Browse all available templates at [ui.polpo.sh/examples](https://ui.polpo.sh/examples) — these are also available in the `polpo create` wizard.