# Adaptive Batch Card

Adaptive Batch Card [#adaptive-batch-card]

The **Adaptive Batch Card** surfaces `useAdaptiveBatchSize` output: a prominent computed optimal batch number, a hardware summary (cores / RAM / GPU), the detection source (detected / estimated / override), and a collapsible reasoning string. A compact `AdaptiveBatchBadge` variant (e.g. "Batch: 32") offers a click-to-expand device-profile popover. Use it to explain why your `embedMany` / `ingest` batch size is what it is on this device.

Preview [#preview]

```tsx
'use client';

import { useAdaptiveBatchSize } from '@localmode/react';

import { AdaptiveBatchBadge, AdaptiveBatchCard } from '@/components/adaptive-batch-card';

/**
 * Demo for AdaptiveBatchCard / AdaptiveBatchBadge. Uses the device's real
 * useAdaptiveBatchSize output for an embedding task — the batch number reflects
 * this machine's cores / RAM / GPU.
 */
export default function AdaptiveBatchCardDemo() {
  const result = useAdaptiveBatchSize({ taskType: 'embedding', modelDimensions: 384 });
  return (
    <div className="flex w-full max-w-md flex-col items-start gap-4">
      <AdaptiveBatchBadge result={result} />
      <AdaptiveBatchCard result={result} />
    </div>
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/local-first/adaptive-batch-card
```

Data source & dependencies [#data-source--dependencies]

**Data source:** renders the batch-size result you pass — works with any backend. Recommended producer: `useAdaptiveBatchSize` (backed by `computeOptimalBatchSize`) from `@localmode/react` (on-device, optional).

* `lucide-react` — icons
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `adaptive-batch-card.tsx` — `AdaptiveBatchCard` + `AdaptiveBatchBadge`
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**AdaptiveBatchCard**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `result` | `object` | — | **Required.** The adaptive batch result (from `useAdaptiveBatchSize`). |

**AdaptiveBatchResult**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `batchSize` | `number` | — | **Required.** The computed optimal batch size. |
| `reasoning` | `string` | — | **Required.** Human-readable explanation of how the batch size was computed. |
| `deviceProfile` | `object` | — | **Required.** Hardware values + their origin. |

Examples [#examples]

Bound to the hook [#bound-to-the-hook]

```tsx
const result = useAdaptiveBatchSize({ taskType: 'embedding', modelDimensions: 384 });
<AdaptiveBatchCard result={result} />
<AdaptiveBatchBadge result={result} />
```

Customization [#customization]

The `result` shape is exactly `useAdaptiveBatchSize`'s return (`{ batchSize, reasoning, deviceProfile }`), so you can pass it straight through. The badge popover summarizes the device profile. Styled entirely with shadcn/ui CSS-variable utilities so it inherits your theme — because you own the copied file, every class and threshold is yours to change.