Skip to main content

​
MCP Components

React components designed for seamless integration with MCP tools. Each component provides built-in loading states, error handling, and host theming support.

​
ToolButton

Button that executes an MCP tool on click with optional confirmation, loading states, and result display.

​
Basic Usage

<ToolButton tool="refresh-data">
  Refresh
</ToolButton>

​
With Result Display

<ToolButton 
  tool="create-order" 
  args={{ product: 'shoes' }}
  resultDisplay="toast"
  successMessage="Order created!"
  onToolSuccess={(order) => console.log('Created:', order.id)}
>
  Place Order
</ToolButton>

​
With Confirmation Dialog

<ToolButton 
  tool="delete-item" 
  args={{ id: item.id }}
  confirm={{ 
    title: 'Delete Item?',
    description: 'This action cannot be undone.' 
  }}
  variant="destructive"
>
  Delete
</ToolButton>

​
Props Reference

PropTypeDescription
toolstring | ToolBindingTool name or binding config
argsRecord<string, unknown>Arguments to pass to the tool
resultDisplay'inline' | 'toast' | 'modal' | 'none'How to display results
confirmboolean | ConfirmConfigShow confirmation before executing
variant'default' | 'destructive' | 'outline' | 'ghost'Button style variant
loadingTextstringText to show while loading
onToolSuccess(result) => voidCalled on successful execution
onToolError(error) => voidCalled on error

​
ToolDataGrid

Data grid with server-side pagination, sorting, and row actions - all powered by MCP tools.

​
Basic Usage

<ToolDataGrid
  dataTool="list-users"
  columns={[
    { key: 'name', header: 'Name', sortable: true },
    { key: 'email', header: 'Email' },
    { key: 'status', header: 'Status' }
  ]}
  transformData={(result) => ({
    rows: result.users,
    total: result.total
  })}
/>

​
With Row Actions

<ToolDataGrid
  dataTool="list-orders"
  columns={columns}
  rowActions={[
    { 
      label: 'Edit', 
      tool: 'edit-order',
      getArgs: (row) => ({ id: row.id })
    },
    { 
      label: 'Delete', 
      tool: 'delete-order',
      variant: 'destructive',
      confirm: true
    }
  ]}
  pagination
  defaultPageSize={25}
/>

​
Props Reference

PropTypeDescription
dataToolstring | ToolBindingTool to fetch data from
columnsToolDataGridColumn[]Column definitions
transformData(result) => { rows, total }Transform tool result to grid data
rowActionsToolDataGridRowAction[]Actions for each row
paginationbooleanEnable pagination (default: true)
defaultPageSizenumberInitial page size
refreshIntervalnumberAuto-refresh interval in ms
onRowClick(row, index) => voidRow click handler

​
Column Definition

interface ToolDataGridColumn {
  key: string;           // Field key (dot notation supported)
  header: string;        // Column header text
  sortable?: boolean;    // Enable sorting
  render?: (value, row, index) => ReactNode;  // Custom renderer
  width?: string;        // CSS width
  align?: 'left' | 'center' | 'right';
}

​
ToolForm

Form component that submits data to an MCP tool with built-in field types and validation.

​
Basic Usage

<ToolForm
  toolName="create-user"
  fields={[
    { name: 'name', label: 'Name', required: true },
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'role', label: 'Role', type: 'select', 
      options: [
        { value: 'admin', label: 'Admin' },
        { value: 'user', label: 'User' }
      ] 
    },
    { name: 'notify', label: 'Send welcome email', type: 'switch' }
  ]}
  submitText="Create User"
  showSuccessToast
  onSuccess={(user) => console.log('Created:', user)}
/>

​
Field Types

TypeDescription
textStandard text input (default)
numberNumeric input with min/max
emailEmail input with validation
passwordPassword input
textareaMulti-line text
selectDropdown selection
checkboxBoolean checkbox
switchToggle switch
sliderRange slider

​
Props Reference

PropTypeDescription
toolNamestringTool to call on submit
fieldsToolFormField[]Field definitions
submitTextstringSubmit button text
showSuccessToastbooleanShow toast on success
resetOnSuccessbooleanReset form after success
onSuccess(result) => voidSuccess callback
onError(error) => voidError callback
layout'vertical' | 'horizontal'Form layout

​
ToolSelect

Select component that can fetch options from a tool and/or trigger a tool on selection.

​
Fetch Options from Tool

<ToolSelect
  optionsTool="list-categories"
  transformOptions={(result) => result.categories.map(c => ({
    value: c.id,
    label: c.name
  }))}
  placeholder="Select category"
/>

​
Call Tool on Selection

<ToolSelect
  options={[
    { value: 'asc', label: 'Ascending' },
    { value: 'desc', label: 'Descending' }
  ]}
  onSelectTool="set-sort-order"
  argName="order"
/>

​
Props Reference

PropTypeDescription
optionsToolstring | ToolBindingTool to fetch options from
transformOptions(result) => Option[]Transform result to options
onSelectToolstring | ToolBindingTool to call on selection
argNamestringArgument name for selected value
optionsToolSelectOption[]Static options
valuestringControlled value
onValueChange(value) => voidChange handler

​
ToolInput

Text input with debounced tool calls for search/autocomplete scenarios. 
<ToolInput
  searchTool="search-items"
  argName="query"
  debounceMs={300}
  placeholder="Search items..."
  onResults={(items) => setSearchResults(items)}
/>

​
ResourceView

Display an MCP resource with auto-refresh support. 
<ResourceView
  uri="config://settings"
  refreshInterval={30000}
  render={(data) => (
    <pre>{JSON.stringify(data, null, 2)}</pre>
  )}
/>

​
Utility Components

​
RequireConnection

Guard wrapper that shows loading/error states until MCP connection is established. 
<AppProvider appInfo={{ name: 'MyApp', version: '1.0.0' }}>
  <RequireConnection 
    loadingContent={<Spinner />}
    errorContent={(error) => <Alert>{error.message}</Alert>}
  >
    <MyMCPContent />
  </RequireConnection>
</AppProvider>

​
ToolErrorBoundary

Error boundary with retry functionality for tool-related errors. 
<ToolErrorBoundary onRetry={() => refetch()}>
  <ToolDataGrid dataTool="list-items" columns={columns} />
</ToolErrorBoundary>

​
StreamingContent

Render streaming/partial tool data as it arrives. 
<StreamingContent
  render={(partial) => <MarkdownPreview content={partial.text} />}
/>