Uranus Design System

Cartão compacto para invocações de ferramentas — nome, status, args e resultado expansíveis.

ToolCallCard mapeia diretamente um UranusToolCall (proveniente de ToolUIPart do AI SDK). Ele mostra o nome da ferramenta, um badge de estado (Preparando entrada, Executando, Concluído, Falhou), e expande para revelar args e result em JSON formatado por padrão.

Entrada

{
  "query": "tokens de cor"
}

Resultado

3 páginas relevantes encontradas em /docs/tokens.

'use client';

import { ToolCallCard } from '@uranus-workspace/ai';

export default function ToolCallCardDefault() {
  return (
    <div className="mx-auto w-full max-w-xl space-y-3">
      <ToolCallCard
        toolCall={{
          id: '1',
          name: 'search_docs',
          state: 'result',
          args: { query: 'tokens de cor' },
          result: '3 páginas relevantes encontradas em /docs/tokens.',
        }}
        defaultOpen
      />
      <ToolCallCard
        toolCall={{
          id: '2',
          name: 'run_query',
          state: 'call',
          args: { sql: 'select * from orders limit 5' },
        }}
      />
    </div>
  );
}

Uso

import { ToolCallCard } from '@uranus-workspace/ai';

{message.toolCalls?.map((call) => (
  <ToolCallCard key={call.id} toolCall={call} defaultOpen />
))}

API

toolCall — UranusToolCall com name, state, args?, result?, errorText?.
renderInput / renderResult — slots opcionais quando o JSON cru não dá conta (tabelas, charts, imagens).
defaultOpen — começa expandido; útil em demos e em ferramentas que retornam pouco volume.

ToolCallCard

Uso

API

On this page