# AIContainerSidebar

interface

The configuration of the AI user interface container in the sidebar mode. Provide an existing DOM element to use as the container the AI user interface will automatically render into that element.

Additionally, the [tab buttons](module_ai_aitabs_aitabs-AITabs.md) can be positioned on the preferred side of the container.

```typescript
ClassicEditor
	.create( {
		attachTo: document.querySelector( '#editor' ),
		// ... Other configuration options ...
		ai: {
			container: {
				type: 'sidebar',

				// Existing DOM element to use as the container for the AI user interface.
				element: document.querySelector( '#ai-sidebar-container' ),

				// (Optional) The preferred side of the element to position the tab buttons.
				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-element">

### `element: HTMLElement`

<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: 'sidebar'`

<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)