> ## Documentation Index
> Fetch the complete documentation index at: https://docs.activeviam.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure the tool panel

> How to add and remove tools in the Atoti UI tool panel by modifying configuration.tools in the activate function, using built-in exports such as toolQueryEditor, toolStateEditor, and toolQueryContextEditor from @activeviam/atoti-ui-sdk.

The tools are located on the left of the application, when the user is viewing a dashboard.

By default, they include:

* **Fields**
* **Filters**
* **Style**

<Note>
  `@activeviam/atoti-ui-sdk` exports additional tools which can be plugged into Atoti UI:

  * [**Query**](../../../reference/variables#toolqueryeditor)
  * [**State**](../../../reference/variables#toolstateeditor)
  * [**Context Values**](../../../reference/variables#toolquerycontexteditor)

  To learn how to make these tools available in your application, see [activate the state tab](./activate-the-state-tab).
</Note>

## Add a tool

To add a tab (for example the **Query** tab), go to your `index.ts` and make the following change:

```typescript {1-1,5-5} theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
import { toolQueryEditor } from "@activeviam/atoti-ui-sdk";

const extension: ExtensionModule = {
  activate: async (configuration) => {
    configuration.tools.push(toolQueryEditor);
  },
};
```

## Remove a tool

Similarly, you can remove a tab like this:

```typescript {3-5} theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
const extension: ExtensionModule = {
  activate: async (configuration) => {
    configuration.tools = configuration.tools.filter(
      ({ key }) => key !== "filtersEditor",
    );
  },
};
```