# AIContainerOverlay

interface

The configuration of the AI user interface container in the overlay mode. In this mode, the AI user interface is displayed on top of the web page on a preferred side. This mode is best suited for integrations with limited space.

```typescript
ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		// ... Other configuration options ...
		ai: {
			container: {
				type: 'overlay',
				side: 'right'
			},
		}
	} )
	.then( ... )
	.catch( ... );
```

<a id="properties">

## Properties

<a id="member-collapsible">

### `collapsible?: boolean` _(inherited)_

When `true`, clicking the active tab button collapses the panel and toggles the `ck-ai-tabs_collapsed` CSS class on the AI tabs DOM element. Clicking the tab again expands it back. When `false`, clicking the active tab button is a no-op.

Defaults to `false`.

<a id="member-showResizeButton">

### `showResizeButton?: boolean` _(inherited)_

This option is used to show or hide the resize button in the AI user interface.

Defaults to `true`.

<a id="member-side">

### `side?: AIContainerSide`

<a id="member-type">

### `type: 'overlay'`

<a id="member-visibleByDefault">

### `visibleByDefault?: boolean` _(inherited)_

Whether the AI interface should be visible when the editor is created.

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)