React Hooks

npm install @reponseai/react

import { ReponseProvider } from "@reponseai/react";

export default function App({ children }) {
  return (
    <ReponseProvider apiKey="rp_live_..." baseUrl="https://api.reponse.ai">
      {children}
    </ReponseProvider>
  );
}

import { useProducts } from "@reponseai/react";

function ProductGrid() {
  const { data, error, isLoading, mutate } = useProducts({
    limit: 20,
    offset: 0,
    query: "sneaker",
  });

  if (isLoading) return <p>Loading…</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((product) => (
        <li key={product.id}>{product.title} — ${product.variants[0]?.price}</li>
      ))}
    </ul>
  );
}

import { useProduct } from "@reponseai/react";

function ProductDetail({ productId }: { productId: string }) {
  const { data: product, error, isLoading } = useProduct(productId);

  if (isLoading) return <p>Loading…</p>;
  if (error) return <p>Product not found</p>;

  return (
    <div>
      <h1>{product.title}</h1>
      <p>{product.description}</p>
    </div>
  );
}

import { useChat } from "@reponseai/react";

function ChatPanel({ campaignId }: { campaignId: string }) {
  const { messages, sendMessage, isStreaming, error } = useChat({
    campaignId,
  });

  const handleSend = (text: string) => {
    sendMessage(text);
  };

  return (
    <div>
      {messages.map((msg, i) => (
        <p key={i} className={msg.role}>
          {msg.content}
        </p>
      ))}
      {isStreaming && <p>Typing…</p>}
    </div>
  );
}

import { useCart } from "@reponseai/react";

function CartButton({ variantId }: { variantId: string }) {
  const { addItem, cart, isUpdating } = useCart();

  return (
    <button onClick={() => addItem(variantId, 1)} disabled={isUpdating}>
      Add to cart ({cart?.items.length ?? 0})
    </button>
  );
}