Chat Tool

AI chats 10

About

A chat component that displays an AI tool call, its input and output, inside a collapsible accordion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chat Tool to your project and fits it to your theme.

Code

How Chat Tool is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ChatTool from "@/components/ui/chat-tool";
import type { ToolUIPart } from "ai";

const toolPart = {
  type: "tool-getWeather",
  toolCallId: "call_1",
  state: "output-available",
  input: { city: "San Francisco", unit: "celsius" },
  output: { temperature: 18, condition: "Partly cloudy" },
} as ToolUIPart;

export default function ChatToolDemo() {
  return (
    <div className="w-full max-w-md mx-auto p-6">
      <ChatTool toolMessagePart={toolPart} />
    </div>
  );
}