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={import.meta.env.VITE_POLPO_API_URL}
    apiKey={import.meta.env.VITE_POLPO_API_KEY}
  >
    <App />
  </PolpoProvider>
);

import { useState, useCallback } from "react";
import { usePolpo } from "@polpo-ai/react";

export function Chat() {
  const { client } = usePolpo();
  const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
  const [input, setInput] = useState("");
  const [streaming, setStreaming] = useState(false);

  const send = useCallback(async () => {
    if (!input.trim()) return;
    const userMsg = { role: "user", content: input };
    setMessages(prev => [...prev, userMsg]);
    setInput("");
    setStreaming(true);

    let assistantContent = "";
    setMessages(prev => [...prev, { role: "assistant", content: "" }]);

    const stream = client.chatCompletionsStream({
      agent: "assistant",
      messages: [...messages, userMsg],
    });

    for await (const chunk of stream) {
      const delta = chunk.choices[0]?.delta?.content ?? "";
      assistantContent += delta;
      setMessages(prev => [
        ...prev.slice(0, -1),
        { role: "assistant", content: assistantContent },
      ]);
    }

    setStreaming(false);
  }, [client, messages, input]);

  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={streaming}>Send</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>
  );
}

# .env
VITE_POLPO_API_URL=https://api.polpo.sh
VITE_POLPO_API_KEY=pk_live_...