Ai Tool Call

A collapsible tool invocation with a status badge that changes its appearance. The badge evolves from breathing to spinning, then shows a check or cross. It is used to display tool calls in a compact, interactive format.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/ai-tool-call

npx layro-cli add @educlopez/ai-tool-call

npx layro-cli add @educlopez/ai-tool-call

bunx layro-cli add @educlopez/ai-tool-call

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { ChevronRight } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type ReactNode, useState } from "react";

const SPRING_DEFAULT = {
  bounce: 0.1,
  duration: 0.25,
  type: "spring" as const,
};
const EASE_OUT = [0.23, 1, 0.32, 1] as const;
const BADGE_VIEWBOX = 24;