# Initialize HAX in your project
hax init

# Add the component
hax add artifact thinking-process

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

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

  // Register thinking process actions for AI agents
  useThinkingProcessAction({
    addOrUpdateArtifact: (type, data) => {
      setArtifacts(prev => [...prev, { type, data, id: Date.now() }]);
    }
  });

  return (
    <HAXThinkingProcess
      title="AI Reasoning"
      badge="HAX 04"
      steps={[
        { id: "1", title: "Analyzing input data", description: "Processing user query", status: "completed" },
        { id: "2", title: "Searching knowledge base", status: "in-progress" },
        { id: "3", title: "Generating response", status: "pending" }
      ]}
      metrics={[
        { label: "Steps Completed", value: "1/3" },
        { label: "Confidence", value: "85%" }
      ]}
    />
  );
}