useDefaultTool

import { useDefaultTool } from "@copilotkit/react-core";

useDefaultTool({
  render: ({ name, args, status, result }) => {
    return (
      <div className="p-4 border rounded my-2">
        <div className="flex items-center justify-between mb-2">
          <h4 className="font-semibold">{name}</h4>
          <span className="text-sm text-gray-500">
            {status === "inProgress" && "Running..."}
            {status === "executing" && "Executing..."}
            {status === "complete" && "Complete"}
          </span>
        </div>

        {Object.keys(args).length > 0 && (
          <div className="mb-2">
            <p className="text-sm font-medium text-gray-600">Parameters:</p>
            <pre className="text-xs bg-gray-100 p-2 rounded mt-1">
              {JSON.stringify(args, null, 2)}
            </pre>
          </div>
        )}

        {status === "complete" && result && (
          <div>
            <p className="text-sm font-medium text-gray-600">Result:</p>
            <pre className="text-xs bg-gray-100 p-2 rounded mt-1">
              {JSON.stringify(result, null, 2)}
            </pre>
          </div>
        )}
      </div>
    );
  },
});

import { useDefaultTool } from "@copilotkit/react-core";

// Render any MCP tool call with a custom UI
useDefaultTool({
  render: ({ name, args, status, result }) => {
    // Custom rendering for MCP tools
    if (name.startsWith("mcp_")) {
      return <MCPToolRenderer name={name} args={args} status={status} result={result} />;
    }

    // Default rendering for other tools
    return <DefaultToolRenderer name={name} args={args} status={status} result={result} />;
  },
});

  <div className="ml-8">
    <PropertyReference name="status" type="'inProgress' | 'executing' | 'complete'">
      - `"inProgress"`: Tool is being prepared or arguments are being streamed.
      - `"executing"`: Tool is actively running.
      - `"complete"`: Tool execution has finished.
    </PropertyReference>

    <PropertyReference name="args" type="Partial<T> | T | any">
      The arguments passed to the tool. Type-safe if parameters schema is provided.
      For catch-all renderers (`name: "*"`), this will be `any`.
    </PropertyReference>

    <PropertyReference name="result" type="any">
      The result returned by the tool. Only available when status is `"complete"`.
    </PropertyReference>

    <PropertyReference name="name" type="string">
      The actual name of the tool being executed. Particularly useful for
      catch-all renderers to know which tool is being rendered.
    </PropertyReference>

    <PropertyReference name="description" type="string">
      The description of the tool being executed.
    </PropertyReference>
  </div>
</PropertyReference>

// Before with useCopilotAction
useCopilotAction({
  render: ({ name, args, status, result }) => (
    <GenericToolCall name={name} args={args} status={status} result={result} />
  ),
});

// After with useDefaultTool
useDefaultTool({
  render: ({ name, args, status, result }) => (
    <GenericToolCall name={name} args={args} status={status} result={result} />
  ),
});