# AI Wrapper Core

> What a store expects of an AI wrapper, in one folder: a versioned consent gate with withdraw, paywall rules without the screen, report, block and filter hooks, share card, delete account, published contact, photo deletion timer, self-photo attestation, an AI-generated label, privacy disclosure text and a client for the server proxy.

- Type: Component (screens)
- Access: Pro
- Page: https://goodui.dev/native/components/ai-core
- Markdown: https://goodui.dev/native/components/ai-core.md
- Registry item: https://goodui.dev/native/r/ai-core.json
- Dependencies: @react-native-async-storage/async-storage, expo-image-picker, expo-notifications, expo-sharing, react-native-view-shot
- Keywords: ai wrapper kit, app store 5.1.2 consent, app store 1.2 report block, delete account react native, ai generated label, credit ledger, server key proxy

## When to use

- Any app that sends a person's data to a third-party model.
- Any app that generates images or text a person can save or share.

## When not to use

- AI that runs fully on the device: there is no third party to disclose, though the label and report rules can still apply.

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add @goodui-native-pro/ai-core
npx expo install --fix
```

Pro: add `"@goodui-native-pro": { "url": "https://goodui.dev/native/r/pro/{name}.json", "headers": { "Authorization": "Bearer ${GOODUI_LICENSE_KEY}" } }` to the `registries` of components.json and put your license key in .env.local.

The component lands in `components/goodui-native/ai-core/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs ai-paywall-screen, ai-provider, bottom-sheet, button, checkbox, hold-to-confirm, locale.

Built-in strings follow `<GooduiLocaleProvider>` (one [language pack](https://goodui.dev/native/r/locale-tr.json) translates the whole kit); the `labels` prop overrides them for one instance.

## Usage

```tsx
import { useAiConsent } from "@/components/goodui-native/ai-core/consent";
import { ConsentRow } from "@/components/goodui-native/ai-core/consent-row";
import { deviceStorage } from "@/components/goodui-native/ai-core/device";

const consent = useAiConsent({ version: 2, provider: "OpenAI", storage: deviceStorage });
if (!consent.granted) router.push("/consent");

<ConsentRow consent={consent} provider="OpenAI" onReview={() => router.push("/consent")} />
```

## API reference

### AiLabel

`import { AiLabel } from "@/components/goodui-native/ai-core/consent";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `kind` | `"generated" \| "written"` | `"generated"` | – |
| `tone` | `"scrim" \| "plain"` | `"plain"` | `scrim` sits on a picture; `plain` sits on the page. |
| `labels` | `Partial<AiLabelLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

### PaywallLegal

`import { PaywallLegal } from "@/components/goodui-native/ai-core/consent";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `model` (required) | `PaywallModel` | – | – |
| `onRestore` (required) | `() => unknown` | – | – |
| `onTerms` (required) | `() => void` | – | – |
| `onPrivacy` (required) | `() => void` | – | – |
| `onNotNow` | `() => void` | – | Quiet way out. Leave the paywall from here; do not open a second offer. |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

### ConsentRow

`import { ConsentRow } from "@/components/goodui-native/ai-core/consent";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `consent` (required) | `AiConsent` | – | – |
| `provider` (required) | `string` | – | – |
| `onReview` (required) | `() => void` | – | Opens the consent screen again. |
| `labels` | `Partial<ConsentRowLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

### ContactRow

`import { ContactRow } from "@/components/goodui-native/ai-core/consent";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `email` (required) | `string` | – | Published on the row, where a reviewer can see it (App Store 1.2). |
| `subject` | `string` | – | – |
| `labels` | `Partial<ContactRowLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

### DeleteAccount

`import { DeleteAccount } from "@/components/goodui-native/ai-core/consent";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onDelete` (required) | `() => Promise<unknown>` | – | Calls the server, clears local data, then send the person back to the start. Reject to show the error line. |
| `labels` | `Partial<DeleteAccountLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

### PhotoRetention

`import { PhotoRetention } from "@/components/goodui-native/ai-core/consent";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `deleteAt` (required) | `number \| null` | – | When the server deletes the uploads, in ms. Null once they are gone. |
| `onDeleteNow` (required) | `() => void` | – | Deletes the uploads right away. |
| `labels` | `Partial<PhotoRetentionLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

### SelfAttestation

`import { SelfAttestation } from "@/components/goodui-native/ai-core/consent";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `minimumAge` | `number` | `18` | – |
| `onChange` (required) | `(attested: boolean) => void` | – | True once every box is ticked. Hold the upload until then. |
| `labels` | `Partial<SelfAttestationLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

### ShareCard

`import { ShareCard } from "@/components/goodui-native/ai-core/consent";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `cardRef` | `RefObject<ComponentRef<typeof View> \| null>` | – | Pass the same ref to `shareView`. |
| `children` (required) | `ReactNode` | – | The art. Pass the template's own card: this frame owns size and the mark, not the look. |
| `brand` (required) | `ReactNode` | – | Your app's name, drawn into the picture, so a shared card carries the source. |
| `aspectRatio` | `number` | `0.8` | Width over height. 4:5 suits feeds and Stories crops. |
| `width` | `number` | `360` | – |
| `background` (required) | `string` | – | – |
| `showAiLabel` | `boolean` | `true` | Leave the label on. Article 50 expects output to be marked. |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

## Accessibility

- Every row is a named button or link. Status changes on ConsentRow and PhotoRetention use a live region where the state is read out.

## Motion

- None of its own. Sheets and holds inherit the kit's motion.

## Haptics

- tap on rows, the hold-to-confirm haptics on delete.

## Performance

- PhotoRetention ticks once a second and only while mounted.

## Notes for AI

- Import device.ts directly. It is not in the kit index because it needs five native packages. Those packages are in each AI template.
- Check consent.granted before every send, not only at launch.
- The client filter is a convenience. Real moderation runs on the server.
- Bump the consent version when the provider or the data sent changes.
- A custom paywall must use usePaywallModel and PaywallLegal; check-kit reads template paywalls.
- Copy in PhotoRetention and ContactRow makes promises. Keep them true for your server and your support.

## Related

- [AI provider](https://goodui.dev/native/components/ai-provider.md): The logic layer behind the AI components, with no UI: a typed provider adapter with an offline mock, a credit ledger that keeps subscription and bought credits apart, and a generation queue that charges, refunds and retries.
- [AI consent screen](https://goodui.dev/native/components/ai-consent-screen.md): A consent screen shown before personal data reaches a third-party AI service: it names the provider, lists what is sent and what is not, has an optional age tick, and offers a visible way to decline.
- [AI paywall screen](https://goodui.dev/native/components/ai-paywall-screen.md): A paywall for AI apps with weekly and yearly plans that each carry a credit allowance. The billed amount is always the largest price, weekly math stays in small text, the auto-renew line sits next to the buy button, and Terms, Privacy and Restore are always shown. check-kit fails if a price variant breaks this.
- [Report sheet](https://goodui.dev/native/components/report-sheet.md): A bottom sheet for reporting generated content: six reasons, a switch to hide similar content, and a thank-you state. It gives AI apps an in-app way to report results, which app stores expect of generated content.
- [Credits meter](https://goodui.dev/native/components/credits-meter.md): A balance pill for an app bar whose digits roll when the balance changes and which turns warning colored when low, plus CreditsCost, a live price line that says what a job costs and what is left after it.
- [Generation queue](https://goodui.dev/native/components/generation-queue.md): Cards for long AI jobs: each one shows its status, a fill and a light sweep while running, a rolling percentage, and cancel, retry and open actions.

## Guidance for AI tools

AI Wrapper Core: What a store expects of an AI wrapper, in one folder: a versioned consent gate with withdraw, paywall rules without the screen, report, block and filter hooks, share card, delete account, published contact, photo deletion timer, self-photo attestation, an AI-generated label, privacy disclosure text and a client for the server proxy. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt