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


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


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


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

frontendTools?

optional frontendTools: FrontendTools

The frontend tools to use for the Elements library.

Examples


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.


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

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


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


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

toolsToInclude?

optional toolsToInclude: ToolsFilter

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


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

Last updated on January 15, 2026