React Native

npm install @polpo-ai/sdk

npm install react-native-sse

// lib/polpo.ts
import { PolpoClient } from "@polpo-ai/sdk";

export const client = new PolpoClient({
  baseUrl: "https://api.your-app.example/polpo",
});

import { useState, useCallback } from "react";
import { View, TextInput, FlatList, Text, TouchableOpacity } from "react-native";
import { client } from "../lib/polpo";

interface Message {
  role: "user" | "assistant";
  content: string;
}

export function ChatScreen() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [streaming, setStreaming] = useState(false);

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

    try {
      const stream = client.chatCompletionsStream({
        agent: "assistant",
        messages: updated,
      });

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

      for await (const chunk of stream) {
        const delta = chunk.choices[0]?.delta?.content ?? "";
        content += delta;
        setMessages(prev => [
          ...prev.slice(0, -1),
          { role: "assistant", content },
        ]);
      }
    } catch (err) {
      setMessages(prev => [
        ...prev,
        { role: "assistant", content: "Error: " + (err as Error).message },
      ]);
    } finally {
      setStreaming(false);
    }
  }, [messages, input, streaming]);

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <FlatList
        data={messages}
        keyExtractor={(_, i) => String(i)}
        renderItem={({ item }) => (
          <View style={{ marginBottom: 12 }}>
            <Text style={{ fontWeight: "bold" }}>
              {item.role === "user" ? "You" : "Agent"}
            </Text>
            <Text>{item.content}</Text>
          </View>
        )}
      />
      <View style={{ flexDirection: "row", gap: 8 }}>
        <TextInput
          value={input}
          onChangeText={setInput}
          placeholder="Message..."
          style={{ flex: 1, borderWidth: 1, borderColor: "#ccc", padding: 8, borderRadius: 8 }}
          onSubmitEditing={send}
        />
        <TouchableOpacity onPress={send} disabled={streaming}>
          <Text>Send</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

import { useEffect, useState } from "react";
import { View, Text, FlatList, Image } from "react-native";
import { client } from "../lib/polpo";

export function AgentsScreen() {
  const [agents, setAgents] = useState([]);

  useEffect(() => {
    client.getAgents().then(setAgents);
  }, []);

  return (
    <FlatList
      data={agents}
      keyExtractor={(a) => a.name}
      renderItem={({ item }) => (
        <View style={{ flexDirection: "row", padding: 16, gap: 12 }}>
          {item.identity?.avatar && (
            <Image
              source={{ uri: item.identity.avatar }}
              style={{ width: 40, height: 40, borderRadius: 20 }}
            />
          )}
          <View>
            <Text style={{ fontWeight: "bold" }}>
              {item.identity?.displayName ?? item.name}
            </Text>
            <Text style={{ color: "#666" }}>{item.role}</Text>
          </View>
        </View>
      )}
    />
  );
}

import EventSource from "react-native-sse";

const url = "https://api.your-app.example/polpo/events?filter=task:,agent:";
const es = new EventSource(url, {
  headers: { Authorization: `Bearer ${appSessionToken}` },
});

es.addEventListener("task:transition", (event) => {
  const data = JSON.parse(event.data);
  console.log("Task moved to:", data.to);
});

// Cleanup
es.close();