React

npm install @polpo-ai/sdk @polpo-ai/react

import { PolpoProvider } from "@polpo-ai/react";

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

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

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>
  );
}

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>
  );
}