ChatTool

One tool call with status, input and output as data, nested calls and a retry, plus ChatMessageToolApproval for calls that wait on the person.

Chat@gaudi/design-system/chat/ChatToolView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import ChatTool from '@gaudi/design-system/chat/ChatTool';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/chat-tool-running-tools.json.

Usage

import { ChatMessageTool, ChatMessageToolApproval } from '@gaudi/design-system/chat';
<><ChatMessageTool name='schedule_newsletter' status={status} input={input} output={output} error={error} onRetry={retry} />
<ChatMessageToolApproval  name='publish_post'  description='Publish the draft to the blog'  input={{ slug: 'local-first-drafts' }}  allowAlways  onApprove={({ always }) => approve(always)}  onDeny={deny}/></>

Examples

Running tools

Storybook

API

16 props

Accessibility

The header is a disclosure naming the tool and status; errors are alerts. An approval is a labelled group; after a decision focus moves to its outcome, which is a status message.

Notes

See Agent run on Chat/ChatReasoning for an approval inside a full agent run, with approve and deny.

ChatThe chat frame: a shell for a full page or a sidebar assistant that composes the Chat parts: the thread, the composer, sessions, files, the plan and activity.4 examples ChatReasoningThe thinking trail before an answer: a shimmering Thinking… label while it streams, a chain of thought of detailed steps with search results and images, folding into Thought for Ns once the answer starts.ChatMessageOne turn in a conversation: avatar, sender and time, the content stack and a status footer.4 examples ChatAgentMarkThe assistant’s mark: a Gaudí-inspired motif glazed in a tile hue picked from a seed, or an icon, image or monogram on a token tile, with an optional activity badge.ChatMessageListThe conversation: a scroller that keeps the thread anchored and ChatMessageParts rendering each assistant turn from its parts.6 examples