Next.js

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

# .env.local
POLPO_URL=https://{project}.polpo.cloud       # server-side only
POLPO_API_KEY=sk_live_...                      # server-side only

// app/api/chat/route.ts
import { PolpoClient } from "@polpo-ai/sdk";

const client = new PolpoClient({
  baseUrl: process.env.POLPO_URL!,
  apiKey: process.env.POLPO_API_KEY!,
});

export async function POST(req: Request) {
  const { messages, agent } = await req.json();

  const stream = client.chatCompletionsStream({ agent, messages });

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          controller.enqueue(
            new TextEncoder().encode(`data: ${JSON.stringify(chunk)}\n\n`)
          );
        }
        controller.enqueue(new TextEncoder().encode("data: [DONE]\n\n"));
        controller.close();
      },
    }),
    {
      headers: {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
      },
    }
  );
}

// app/agents/page.tsx
import { PolpoClient } from "@polpo-ai/sdk";

const client = new PolpoClient({
  baseUrl: process.env.POLPO_URL!,
  apiKey: process.env.POLPO_API_KEY!,
});

export default async function AgentsPage() {
  const agents = await client.getAgents();

  return (
    <div>
      <h1>Agents</h1>
      {agents.map(a => (
        <div key={a.name}>
          <h2>{a.name}</h2>
          <p>{a.role}</p>
        </div>
      ))}
    </div>
  );
}

// app/dashboard/layout.tsx (Server Component)
import { DashboardShell } from "./shell";

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return <DashboardShell>{children}</DashboardShell>;
}

// app/dashboard/shell.tsx (Client Component)
"use client";

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

export function DashboardShell({ children }: { children: React.ReactNode }) {
  return (
    <PolpoProvider baseUrl="/api/polpo" autoConnect={false}>
      {children}
    </PolpoProvider>
  );
}

// app/dashboard/page.tsx (Client Component)
"use client";

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

export default function DashboardPage() {
  const { tasks, isLoading } = useTasks();

  if (isLoading) return <p>Loading tasks...</p>;

  return (
    <ul>
      {tasks.map(t => <li key={t.id}>{t.title} — {t.status}</li>)}
    </ul>
  );
}

Browser (Client Component)
    │
    ├── POST /api/chat (your Next.js route)
    │       │
    │       └── PolpoClient.chatCompletionsStream()
    │               │ (POLPO_API_KEY injected server-side)
    │               │
    │               └── Polpo API
    │
    └── SSE /api/events (optional, for live task updates)