Tool Components

Overview

Tool components are predefined display formats that can be used to render tool results directly in the chat interface. When configuring a tool in Settings → Tools, you can choose to use component display instead of the default text response.

See Tools Configuration for information on how to configure tools to use these components.

Response Types

Default (Text Response)

When a tool uses the default text response type:

Tool results are sent back to the AI model
The AI interprets the results and crafts a natural language response
Use when results need AI interpretation or don't fit predefined component formats

Component Display

When a tool uses component display:

Tool results are rendered directly using a predefined display component
No AI interpretation is needed
Use when you want structured visualizations (tables, charts, KPIs)
Your FileMaker script must return data in the exact format expected by the selected component

Available Components

Data Table (`data-table`)

Simple column/row table format with sortable columns.

Expected Format:

{
  "columns": ["Name", "Age", "City"],
  "rows": [
    ["John Doe", 30, "New York"],
    ["Jane Smith", 25, "London"]
  ]
}

Use Case: Displaying simple tabular data with uniform structure.

Data Table - DAPI Format (`data-table-filemaker`)

Displays FileMaker Data API response format with automatic field extraction and metadata display.

Expected Format:

{
  "response": {
    "data": [
      {
        "recordId": "1",
        "modId": "0",
        "fieldData": {
          "Name": "John Doe",
          "Age": 30
        }
      }
    ],
    "dataInfo": {
      "database": "MyDatabase",
      "layout": "Contacts",
      "table": "Contacts",
      "totalRecordCount": 100,
      "foundCount": 1,
      "returnedCount": 1
    }
  },
  "messages": [{"code": "0", "message": "OK"}]
}

Use Case: Displaying FileMaker Data API query results directly without transformation.

Data Table - Pipe Separated (`data-table-psv`)

Pipe-separated values format with automatic type detection.

Expected Format:

{
  "content": "Name|Age|City\nJohn Doe|30|New York\nJane Smith|25|London",
  "delimiter": "|"
}

Use Case: Displaying data already formatted as pipe-separated values (PSV format).

Key-Value Display (`key-value-display`)

Shows key-value pairs in a clean format with optional descriptions.

Expected Format:

{
  "items": [
    {"key": "Status", "value": "Active"},
    {"key": "User Count", "value": 1250},
    {
      "key": "Premium",
      "value": true,
      "description": "Premium features enabled"
    }
  ]
}

Use Case: Displaying metadata, status information, or configuration data as key-value pairs.

Markdown Viewer (`markdown-viewer`)

Renders formatted markdown content with optional syntax highlighting.

Expected Format:

{
  "content": "# Analysis Results\n\nThe system processed **500 records** successfully.",
  "enableSyntaxHighlighting": true
}

Use Case: Displaying formatted reports, documentation, or analysis results with rich text formatting.

FileMaker Record (`filemaker-record`)

Displays record information with a navigation button to open the record in FileMaker.

Expected Format:

{
  "tableName": "Contacts",
  "recordId": "123",
  "message": "Contact John Doe has been successfully updated."
}

Use Case: Displaying confirmation messages after record operations with direct navigation to the record.

KPI Display (`kpi-display`)

Shows key performance indicators with trends, progress bars, and comparison data.

Expected Format:

{
  "items": [
    {
      "label": "Total Sales",
      "value": 125000,
      "format": "currency",
      "previousValue": 110000,
      "change": 13.6,
      "changeType": "percentage",
      "trend": "up",
      "unit": "$",
      "description": "Monthly sales revenue"
    }
  ],
  "layout": "grid",
  "columns": "auto"
}

Use Case: Displaying business metrics, performance indicators, or dashboard-style data with trends and comparisons.

Additional Features:

Progress bars and rings
Sparkline charts
Multiple layout options (grid, list, compact)
Configurable sizing (sm, md, lg, xl)

Data Visualization (`data-visualization`)

Interactive data visualization with multiple view options (table, bar chart, line chart, list).

Expected Format:

{
  "args": {
    "usersQuestion": "Show me all customers from California",
    "displayFormat": "table"
  },
  "result": {
    "data": "Name|City|State|Total Orders\r\nAcme Corp|San Francisco|CA|42",
    "displayFormat": "table",
    "tableName": "Customers",
    "sql": "SELECT Name, City, State FROM Customers WHERE State = 'CA'",
    "complete": true,
    "chartConfig": {
      "xKey": "Name",
      "yKey": "Total Orders"
    }
  }
}

Use Case: Displaying query results with interactive charting capabilities. Users can switch between table, bar chart, line chart, and list views.

Additional Features:

Multiple chart types (bar, line, table, list)
Interactive switching between views
Export to CSV
SQL query display
FileMaker record navigation

Using Components in Tool Configuration

When configuring a tool in Settings → Tools:

In the Output tab, select "Component Display" instead of "Default (Text Response)"
Choose the appropriate component from the dropdown
The modal will display the expected data format with a copy button
Copy the format and ensure your FileMaker script returns data in that exact structure
Save the tool configuration

For detailed instructions on configuring tools, see Tools Configuration.

Legacy Components

The following components are documented separately but may be superseded by newer runtime components:

KPI Card - Legacy KPI component
Table - Legacy table component

Tools Configuration - How to configure tools to use these components
Tools are Scripts - Understanding how tools work

Tool Components

On this page