A component for displaying AI tool/function calls with status, arguments, and results.

npx slipstream-ui@latest add tool-call
Playground
search_databaseCompleted
tool-123
Arguments
{
  "query": "React components",
  "limit": 10
}
Result
{
  "results": [
    "Component A",
    "Component B",
    "Component C"
  ]
}
Statuses
searchCompleted
1
Arguments
{
  "query": "React"
}
Result
{
  "results": [
    "Component A",
    "Component B"
  ]
}
calculateRunning
2
Arguments
{
  "expression": "2 + 2"
}
api_requestFailed
3
Arguments
{
  "endpoint": "/users"
}
Result
{
  "error": "Timeout"
}

Props

PropTypeDefaultDescription
toolCallToolCallrequiredTool call object with name, arguments, status
showResultbooleantrueWhether to display the result

Accessibility

  • Status shown with both color and text label
  • Arguments and results displayed in formatted code blocks
  • Tool information organized in clear sections
  • Status colors have sufficient contrast