Astryx Chat Tool Calls

AI chats

About

ChatToolCalls displays tool or function call invocations from an LLM response. Pass an array of calls and the component handles the rest: a single call renders inline, while multiple calls collapse into a summary with the latest call visible at the surface. Use it anywhere an AI agent shows what actions it took.

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

Code

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

Usage.tsx

'use client';

import {ChatToolCalls} from '@/components/ui/astryx-chat-tool-calls';
import {CodeBlock} from '@astryxdesign/core/CodeBlock';

const editDiff = `--- a/src/utils/formatDate.ts
+++ b/src/utils/formatDate.ts
@@ -8,7 +8,11 @@
-export function formatDate(date: Date): string {
-  return date.toLocaleDateString();
-}
+export function formatDate(
+  date: Date,
+  locale = 'en-US',
+  options?: Intl.DateTimeFormatOptions,
+): string {
+  return new Intl.DateTimeFormat(locale, options).format(date);
+}`;

const testOutput = `$ yarn test
 PASS  src/utils/formatDate.test.ts
 PASS  src/components/DatePicker.test.tsx

Test Suites: 2 passed, 2 total
Tests:       14 passed, 14 total
Time:        1.8s`;

function ChatToolCallsInteractiveToolCalls() {
  return (
    <ChatToolCalls
      defaultIsExpanded
      calls={[
        {
          name: 'edit',
          target: 'src/utils/formatDate.ts',
          status: 'complete',
          duration: '85ms',
          node: 'cli:remote-server',
          additions: 6,
          deletions: 3,
          resultDetail: (
            <CodeBlock code={editDiff} language="typescript" maxHeight="50vh" />
          ),
        },
        {
          name: 'bash',
          target: 'yarn test',
          status: 'complete',
          duration: '1.8s',
          node: 'cli:remote-server',
          resultDetail: (
            <CodeBlock code={testOutput} language="bash" maxHeight="50vh" />
          ),
        },
        {
          name: 'web_search',
          target: 'Intl.DateTimeFormat locale options',
          status: 'complete',
          duration: '1.2s',
        },
      ]}
    />
  );
}

export default function ChatToolCallsInteractiveToolCallsDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <ChatToolCallsInteractiveToolCalls />
    </div>
  );
}