Thinking Process

A component for visualizing AI reasoning, decision-making steps, and workflow progress with collapsible sections and status indicators.

Installation

hax init
hax add artifact thinking-process

Component Setup

import { HAXThinkingProcess, useThinkingProcessAction } from "@/hax/artifacts/thinking-process";

export function AnalysisPage() {
  const [artifacts, setArtifacts] = useState([]);

  useThinkingProcessAction({
    addOrUpdateArtifact: (type, data) => {
      setArtifacts(prev => [...prev, { type, data, id: Date.now() }]);
    }
  });

  return (
    <HAXThinkingProcess
      title="AI Reasoning"
      steps={reasoningSteps}
      metrics={metrics}
    />
  );
}