Resources & Documentation

import { AutonomProvider } from '@autonom/sdk';

export default function App() {
  return (
    <AutonomProvider apiKey="ak_live_..." tenantId="your-tenant">
      <YourApp />
    </AutonomProvider>
  );
}

import { useConfigurator, usePricing } from '@autonom/sdk';

function ProductPage({ productId }: { productId: string }) {
  const { structure, updateAttribute } = useConfigurator(productId);
  const { summary } = usePricing();

  return (
    <div>
      <h1>{structure?.name}</h1>
      {structure?.attributes.map((attr) => (
        <select
          key={attr.id}
          value={attr.value ?? ''}
          onChange={(e) => updateAttribute(attr.id, e.target.value)}
        >
          {attr.options.map((opt) => (
            <option key={opt.value} value={opt.value}>{opt.displayValue}</option>
          ))}
        </select>
      ))}
      <p className="text-xl font-bold">{summary?.totalFormatted}</p>
    </div>
  );
}