# AIContainerCustom

interface

The configuration of the AI user interface container in the custom mode.

In this mode, integrator is responsible for rendering the AI user interface in the web page.

* Use [`view`](module_ai_aitabs_aitabs-AITabs.md#member-view) to access the view of the AI user interface,
* Use [`getTabIds`](module_ai_aitabs_tabs_aitabsview-AITabsView.md#function-getTabIds) to read available IDs of individual tabs in the AI user interface,
* Use [`getTab`](module_ai_aitabs_tabs_aitabsview-AITabsView.md#function-getTab) to access individual tab views in the AI user interface,
* Use [`addTab`](module_ai_aitabs_tabs_aitabsview-AITabsView.md#function-addTab) to add a new tab to the AI user interface,
* Use [`activateTab`](module_ai_aitabs_tabs_aitabsview-AITabsView.md#function-activateTab) to switch between tabs from the code.

For example, to integrate the AI user interface with custom containers on the web page, use the following code:

```typescript
const tabsPlugin = editor.plugins.get( 'AITabs' );

	for ( const id of tabsPlugin.view.getTabIds() ) {
		const tab = tabsPlugin.view.getTab( id );

		// Display tab button and panel in a custom container.
		myButtonsContainer.appendChild( tab.button.element );
		myPanelContainer.appendChild( tab.panel.element );
	}
```

<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-type">

### `type: 'custom'`

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