# AskAI.Header



# Overview

Header bar that shows the AskAI title and actions (clear conversation, close). Typically used with [AskAI.Messages](/docs/api-reference/client/ask-ai-messages) and [AskAI.Input](/docs/api-reference/client/ask-ai-input).

## Usage

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

export default function Page() {
  return (
    <AskAI>
      <AskAI.Dialog>
        <AskAI.Header />
        <AskAI.Messages />
        <AskAI.Input />
      </AskAI.Dialog>
    </AskAI>
  );
}
```

## Props

```ts
import type { ComponentPropsWithoutRef, ReactNode } from 'react';

export interface AskAIHeaderProps extends ComponentPropsWithoutRef<'div'> {
  heading?: ReactNode;
  closeLabel?: string;
}
```

## Notes

* Uses `closeLabel` for the close button aria-label.
* The delete button only shows when there are messages and the chat is idle.


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