> ## 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.

# Create a custom tool

> How to create a custom tool for the Atoti UI tool panel by implementing the Tool interface with a key, component accepting EditorProps, type, and icon, then registering it by pushing it to configuration.tools in the activate function.

You can create custom tools.

This can be done by creating a [Tool](../../../reference/types#tool) and adding it to `configuration.tools`.

Create a file named `myTool.tsx` with the following content:

```tsx theme={"languages":{"custom":["/engine/python-sdk/0.9/languages/pycon.tmLanguage.json"]}}
import React, { FC } from "react";

import { EditorProps, Tool } from "@activeviam/atoti-ui-sdk";
import { CheckOutlined } from "@activeviam/icons/antd";

const MyToolComponent: FC<EditorProps> = () => <div>Hello world</div>;
const MyToolIcon: FC = () => <CheckOutlined />;

export const myTool: Tool = {
  key: "my-tool",
  component: MyToolComponent,
  type: "single",
  icon: MyToolIcon,
};
```

<Info>
  `MyToolComponent` has access to the state of the dashboard and to those of the
  selected widget. It can also update these pieces of state. See
  [EditorProps](../../../reference/types#editorprops) for more information.
</Info>

Finally, 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 { myTool } from "./myTool";

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