# AskAI



# Overview

Composable AI chat primitives with a simple preset and full control through composition. Combine [AskAI.Trigger](/docs/api-reference/client/ask-ai-trigger) with surfaces like [AskAI.Dialog](/docs/api-reference/client/ask-ai-dialog), [AskAI.Chat](/docs/api-reference/client/ask-ai-chat), or [AskAI.Sidepane](/docs/api-reference/client/ask-ai-sidepane), or render an [AskAI.Inline](/docs/api-reference/client/ask-ai-inline) layout.

## Type Definition

```ts
import type { ReactNode } from 'react';
import type { HttpChatTransport, UIMessage } from 'ai';

export interface AskAIProps {
  children?: ReactNode;
  className?: string;
  endpoint?: string;
  open?: boolean;
  defaultOpen?: boolean;
  chatTransport?: HttpChatTransport<UIMessage>;
  persistence?: boolean | { key?: string };
  reuseContext?: boolean;
}
```

## Usage

### Preset (Trigger + Dialog)

```tsx
import { AskAI } from 'peam/client';

export default function Page() {
  return <AskAI />;
}
```

### Sidepane Composition

```tsx
import { AskAI } from 'peam/client';

export default function Page() {
  return (
    <AskAI>
      <AskAI.Trigger />
      <AskAI.Sidepane />
    </AskAI>
  );
}
```

### Custom Trigger (asChild)

```tsx
import { AskAI } from 'peam/client';
import { Button } from '@/components/ui/button';

export default function Page() {
  return (
    <AskAI>
      <AskAI.Trigger asChild>
        <Button>Ask a Question</Button>
      </AskAI.Trigger>
      <AskAI.Dialog />
    </AskAI>
  );
}
```

### Inline Chat

```tsx
import { AskAI } from 'peam/client';

export default function Page() {
  return (
    <AskAI>
      <AskAI.Inline />
    </AskAI>
  );
}
```

## Props

### AskAI (Preset)

| Prop            | Type                           | Default       | Description                                 |
| --------------- | ------------------------------ | ------------- | ------------------------------------------- |
| `endpoint`      | `string`                       | `'/api/peam'` | API endpoint used by the chat transport     |
| `open`          | `boolean`                      | `undefined`   | Controlled open state                       |
| `defaultOpen`   | `boolean`                      | `false`       | Uncontrolled initial open state             |
| `chatTransport` | `HttpChatTransport<UIMessage>` | `undefined`   | Override the default chat transport         |
| `persistence`   | `boolean \| { key?: string }`  | `true`        | Configure chat persistence or disable it    |
| `reuseContext`  | `boolean`                      | `true`        | Reuse an existing `AskAIContext` if present |
| `className`     | `string`                       | `undefined`   | Root wrapper class name                     |

## Notes

* `AskAI` renders a preset: `AskAI.Trigger` + `AskAI.Dialog`.
* For other layouts, compose `AskAI` with the surface you want, or provide context manually with [AskAIProvider](/docs/api-reference/client/ask-ai-provider).
* Use [useAskAI](/docs/api-reference/client/use-ask-ai) for direct access to state and actions, and [BoundedChatTransport](/docs/api-reference/client/bounded-chat-transport) to override transport behavior.


## Sitemap
[Overview of all docs pages](/sitemap.md)