KOMA UI
Components

Chain of Thought

A sleek, terminal-like accordion block that sits above the final answer. It shows the AI's internal steps like Searching database..., Reading 3 files..., Executing Python script....

No reasoning recorded.

Installation

bunx --bun shadcn@latest add https://komaui.iamkunal.in/r/chain-of-thought.json

Usages

"use client"

import { useState, useEffect } from "react"
import { ChainOfThought } from "@/components/ui/chain-of-thought"

const SAMPLE_REASONING = `Analyzing user request...\nIdentifying core requirements for the component...\nEvaluating state management approaches...\nImplementing simulated streaming with useEffect...\nFinalizing component architecture.`

export default function ChainOfThoughtDemo() {
	const [streamedText, setStreamedText] = useState("")
	const [isStreaming, setIsStreaming] = useState(true)

	useEffect(() => {
		let currentIndex = 0
		
		const interval = setInterval(() => {
			if (currentIndex <= SAMPLE_REASONING.length) {
				setStreamedText(SAMPLE_REASONING.slice(0, currentIndex))
				currentIndex++
			} else {
				setIsStreaming(false)
				clearInterval(interval)
			}
		}, 40)

		return () => clearInterval(interval)
	}, [])

	return (
		<div className="flex w-full max-w-2xl flex-col gap-4 p-4">
			<ChainOfThought 
				text={streamedText} 
				isLoading={isStreaming} 
				defaultOpen={true}
			/>
		</div>
	)
}

Props

PropertyTypeRequiredDescription
textstringYesThe streaming or completed reasoning text to display inside the component.
isLoadingbooleanNoIndicates whether the reasoning process is currently actively streaming. Swaps the checkmark for a loading spinner.
titlestringNoThe text displayed in the header. Defaults to 'Reasoning Process'.
defaultOpenbooleanNoDetermines if the reasoning container is expanded by default. Defaults to false.
classNamestringNoAdditional Tailwind CSS classes to apply to the outer wrapper container.

On this page

InstallationUsagesProps