Make your app legible to AI agents

import { useXtralState, useXtralAction } from "@xtral/react";

function Checkout() {
  // Expose cart state to agents
  const [cart, setCart] = useXtralState("cart", []);

  // Declare actions agents can perform
  useXtralAction("placeOrder", {
    handler: async () => {
      await api.placeOrder(cart);
      return { outcome: "confirmed" };
    },
    outcomes: ["confirmed", "failed"]
  });

  return <CheckoutForm cart={cart} />;
}