Tool

Collapsible tool call display showing name, JSON input, output, and running/done/error status.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

ToolCollapsible tool call display showing name, JSON input, output, and running/done/error status.

"use client";
import { useState } from "react";

type ToolProps = {
  name: string;
  input: Record<string, unknown>;
  output?: string;
  status: "running" | "done" | "error";
};

export function Tool({ name, input, output, status }: ToolProps) {
  const [open, setOpen] = useState(false);

  return (
    <div className="pk-tool">
      <button className="pk-tool-header" onClick={() => setOpen(!open)}>
        <span className="pk-tool-chevron">{open ? "▾" : "▸"}</span>
        <span className="pk-tool-name">{name}</span>
        <span className={`pk-tool-status pk-tool-status--${status}`}>
          {status === "running" ? "Running…" : status === "done" ? "Done" : "Error"}
        </span>
      </button>
      {open && (
        <div className="pk-tool-body">
          <div className="pk-tool-section-label">Input</div>
          <pre className="pk-tool-json">{JSON.stringify(input, null, 2)}</pre>
          {output && (
            <>
              <div className="pk-tool-section-label" style={{ marginTop: "10px" }}>Output</div>
              <div className="pk-tool-output">{output}</div>
            </>
          )}
        </div>
      )}
    </div>
  );
}

Props

Prop	Type	Default	Description
`name`*	`string`	—	Tool function name
`input`*	`Record<string, unknown>`	—	Tool input parameters as an object
`output`	`string`	—	Tool result text
`status`*	`"running" \| "done" \| "error"`	—	Current execution state