Command Component

Type and execute commands with loading states

← Back to Examples

Default (Multi-line)

Try: "Show me the tasks you completed today"

Compact (Single-line)

How it works:

  • • Mock Mode: Toggle between simulated and real API responses
  • • Enable Streaming: Stream response word-by-word (works with both variants)
  • • Plan Mode: Agent proposes execution plan before running command
  • • Enable File Upload: Show/hide the file upload button
  • • Widget Support: Commands can return interactive widgets (mock mode only)
  • • Default: Multi-line textarea for longer commands
  • • Compact: Single-line input for quick commands
  • • Shows loading state with optional progress indicator
  • • After completion, you can run another command
  • • Try: "Show me the tasks you completed today" (returns task list widget)
  • • Try: "Analyze sales data" or "Show customer metrics" (returns data widgets)

Configuration

The agent to send commands to

Passed as 'system' parameter to the API

Text shown during execution

Display progress indicator

Agent proposes plan before executing

Stream response word-by-word

Show/hide file upload button

Key Props

agentIdstring
contextstring
variantdefault | compact
useMockboolean
planModeboolean
enableStreamingboolean
enableFileUploadboolean
showProgressboolean
onCompletefunction
onActionfunction