Tool

Una tarjeta plegable para una llamada a herramienta, con el estado, lo que entró y lo que volvió.

Input

{
  "locale": "en",
  "limit": 3
}

Output

[
  {
    "slug": "nachui",
    "title": "NachUI",
    "stars": 128
  },
  {
    "slug": "portfolio",
    "title": "ignaciofigueroa.dev",
    "stars": 41
  },
  {
    "slug": "links",
    "title": "links.ignaciofigueroa.dev",
    "stars": 9
  }
]

1'use client';
2
3import { Tool } from '@/components/ui/tool';
4
5const input = { locale: 'en', limit: 3 };
6
7const output = [
8  { slug: 'nachui', title: 'NachUI', stars: 128 },
9  { slug: 'portfolio', title: 'ignaciofigueroa.dev', stars: 41 },
10  { slug: 'links', title: 'links.ignaciofigueroa.dev', stars: 9 },
11];
12
13export function Default() {
14  return (
15    <div className="w-full max-w-md">
16      <Tool status="complete" defaultOpen>
17        <Tool.Header name="get_projects" description="Lists the public projects" />
18        <Tool.Content>
19          <Tool.Input value={input} />
20          <Tool.Output value={output} />
21        </Tool.Content>
22      </Tool>
23    </div>
24  );
25}

Instalación

pnpm dlx nachui add tool

Anatomía

1import { Tool } from '@/components/ui/tool';

1<Tool status="complete">
2  <Tool.Header name="get_projects" description="Lista los proyectos públicos" />
3  <Tool.Content>
4    <Tool.Input value={{ locale: 'es', limit: 3 }} />
5    <Tool.Output value={projects} />
6  </Tool.Content>
7</Tool>

Una llamada arranca cerrada. El nombre y el estado son lo que se lee de un vistazo; los payloads quedan para quien quiera revisarlos. Pasá defaultOpen a las llamadas que valga la pena mostrar, como una que falló.

Tool.Input y Tool.Output aceptan cualquier value: un string se imprime tal cual, cualquier otra cosa se formatea como JSON. Pasale children a Tool.Output cuando el resultado merece markup de verdad.

Composición

Usá la siguiente composición para construir un Tool:

Tool
├── Tool.Header
└── Tool.Content
    ├── Tool.Input
    └── Tool.Output

Estados

status va en la raíz y define el indicador del header: pending espera con un punto, running gira, complete tilda y error marca el problema. Combiná error con <Tool.Output error /> para que el payload se lea como la falla que es.

Input

{
  "to": "contact@ignaciofigueroa.dev",
  "subject": "Hi"
}

Output

422 Unprocessable Entity: recipient domain is not verified

1'use client';
2
3import { Tool } from '@/components/ui/tool';
4
5export function Statuses() {
6  return (
7    <div className="flex w-full max-w-md flex-col gap-3">
8      <Tool status="pending">
9        <Tool.Header name="analyze_job_description" description="Waiting for the previous call" />
10        <Tool.Content>
11          <Tool.Input value={{ body: 'Senior frontend engineer, remote, React and Next.js' }} />
12        </Tool.Content>
13      </Tool>
14      <Tool status="running">
15        <Tool.Header name="get_experience" description="Reading the work history" />
16        <Tool.Content>
17          <Tool.Input value={{ locale: 'en' }} />
18        </Tool.Content>
19      </Tool>
20      <Tool status="complete">
21        <Tool.Header name="get_projects" description="3 projects returned" />
22        <Tool.Content>
23          <Tool.Input value={{ locale: 'en', limit: 3 }} />
24          <Tool.Output value={['nachui', 'portfolio', 'links']} />
25        </Tool.Content>
26      </Tool>
27      <Tool status="error" defaultOpen>
28        <Tool.Header name="send_contact_email" description="The mail provider rejected it" />
29        <Tool.Content>
30          <Tool.Input value={{ to: 'contact@ignaciofigueroa.dev', subject: 'Hi' }} />
31          <Tool.Output error value="422 Unprocessable Entity: recipient domain is not verified" />
32        </Tool.Content>
33      </Tool>
34    </div>
35  );
36}

Referencia de API

Tool

Prop	Type	Default	Description
`status`	`'pending' \| 'running' \| 'complete' \| 'error'`	`'complete'`	Estado de la llamada
`defaultOpen`	`boolean`	`false`	Estado abierto cuando no se controla
`open`	`boolean`	-	Estado abierto controlado
`onOpenChange`	`(open: boolean) => void`	-	Se llama al cambiar el estado
`className`	`string`	-	Clases CSS adicionales

Tool.Header

Prop	Type	Default	Description
`name`	`string`	-	Nombre de la herramienta
`description`	`string`	-	Una línea debajo del nombre
`statusLabels`	`Partial<Record<Status, string>>`	-	Etiquetas de lector de pantalla por estado
`className`	`string`	-	Clases CSS adicionales

Tool.Content

Prop	Type	Default	Description
`className`	`string`	-	Clases CSS adicionales

Tool.Input

Prop	Type	Default	Description
`label`	`string`	`'Input'`	Etiqueta sobre el bloque
`value`	`unknown`	-	Se imprime tal cual si es string, como JSON si no
`children`	`ReactNode`	-	Reemplaza `value` si se pasa
`className`	`string`	-	Clases CSS adicionales

Tool.Output

Prop	Type	Default	Description
`label`	`string`	`'Output'`	Etiqueta sobre el bloque
`value`	`unknown`	-	Se imprime tal cual si es string, como JSON si no
`error`	`boolean`	`false`	Tonos destructivos para una llamada fallida
`children`	`ReactNode`	-	Reemplaza `value` si se pasa
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorTask