[**@gram-ai/elements v1.33.0**](../README.md)

***

[@gram-ai/elements](../globals.md) / ToolsConfig

# Interface: ToolsConfig

ToolsConfig is used to configure tool support in the Elements library.
At the moment, you can override the default React components used by
individual tool results.

## Example

```ts
const config: ElementsConfig = {
  tools: {
    components: {
      "get_current_weather": WeatherComponent,
    },
  },
}
```

## Properties

### expandToolGroupsByDefault?

> `optional` **expandToolGroupsByDefault**: `boolean`

Whether individual tool calls within a group should be expanded by default.

#### Default

```ts
false
```

***

### components?

> `optional` **components**: `Record`\<`string`, `ToolCallMessagePartComponent` \| `undefined`\>

`components` can be used to override the default components used by the
Elements library for a given tool result.

Please ensure that the tool name directly matches the tool name in your Gram toolset.

#### Example

```ts
const config: ElementsConfig = {
  tools: {
    components: {
      "get_current_weather": WeatherComponent,
    },
  },
}
```

***

### frontendTools?

> `optional` **frontendTools**: `FrontendTools`

The frontend tools to use for the Elements library.

#### Examples

```ts
import { defineFrontendTool } from '@gram-ai/elements'

const FetchTool = defineFrontendTool<{ url: string }, string>(
  {
    description: 'Fetch a URL (supports CORS-enabled URLs like httpbin.org)',
    parameters: z.object({
      url: z.string().describe('URL to fetch (must support CORS)'),
    }),
    execute: async ({ url }) => {
      const response = await fetch(url as string)
      const text = await response.text()
      return text
    },
  },
  'fetchUrl'
)
const config: ElementsConfig = {
  tools: {
    frontendTools: {
      fetchUrl: FetchTool,
    },
  },
}
```

You can also override the default components used by the
Elements library for a given tool result.

```ts
import { FetchToolComponent } from './components/FetchToolComponent'

const config: ElementsConfig = {
  tools: {
    frontendTools: {
      fetchUrl: FetchTool,
    },
    components: {
      'fetchUrl': FetchToolComponent, // will override the default component used by the Elements library for the 'fetchUrl' tool
    },
  },
}
```

***

### toolsRequiringApproval?

> `optional` **toolsRequiringApproval**: [`ToolsFilter`](../type-aliases/ToolsFilter.md)

List of tool names that require confirmation from the end user before
being executed. A function can also be provided to dynamically determine if a tool requires approval.
The user can choose to approve once or approve for the
entire session via the UI.

#### Examples

```ts
tools: {
  toolsRequiringApproval: ['delete_file', 'send_email'],
}
```

```ts
tools: {
  toolsRequiringApproval: (toolName) => {
    return toolName.startsWith('protected_')
  },
}
```

***

### toolsToInclude?

> `optional` **toolsToInclude**: [`ToolsFilter`](../type-aliases/ToolsFilter.md)

List of MCP tool names to expose to the chat.
Only tool names listed here that match a tool in the MCP will be exposed to the chat.

#### Example

```ts
tools: {
  toolsToInclude: ['get_current_weather', 'get_current_time'],
}

***

### maxOutputBytes?

> `optional` **maxOutputBytes**: `number`

Maximum UTF-8 byte size for any single tool call's result. Results larger
than this are truncated with a head+tail preserving strategy and a notice
suffix before being added to the conversation. Prevents one greedy tool
call (e.g. a wide log search) from filling the model's context window.

Omit or set to 0 to disable.

#### Example

```ts
tools: {
  maxOutputBytes: 50_000, // ~12.5K tokens per tool call
}
```
