React AI Reasoning

Collapsible AI reasoning display with auto-streaming behavior. Build transparent AI interfaces with React, Next.js, and TypeScript, featuring automatic open/close and duration tracking for shadcn/ui applications.

AI Elements

Radix UI

Trying to implement AI Elements?

Join our Discord community for help from other developers.

Collapsible reasoning display for AI models that show their thinking process in conversational AI applications. This free open source React component automatically opens during reasoning, closes when complete, and tracks thinking duration in Next.js projects.

Auto-collapsing reasoning display

Thinking indicator with expandable content:

Loading component...

'use client';import {  Reasoning,  ReasoningContent,  ReasoningTrigger,} from '@/components/ui/shadcn-io/ai/reasoning';import { useCallback, useEffect, useState } from 'react';const reasoningSteps = [  'Let me think about this problem step by step.',  '\n\nFirst, I need to understand what the user is asking for.',  '\n\nThey want a reasoning component that opens automatically when streaming begins and closes when streaming finishes. The component should be composable and follow existing patterns in the codebase.',  '\n\nThis seems like a collapsible component with state management would be the right approach.',].join('');const Example = () => {  const [content, setContent] = useState('');  const [isStreaming, setIsStreaming] = useState(false);  const [currentTokenIndex, setCurrentTokenIndex] = useState(0);  const [tokens, setTokens] = useState<string[]>([]);  // Function to chunk text into fake tokens of 3-4 characters  const chunkIntoTokens = useCallback((text: string): string[] => {    const tokens: string[] = [];    let i = 0;    while (i < text.length) {      const chunkSize = Math.floor(Math.random() * 2) + 3; // Random size between 3-4      tokens.push(text.slice(i, i + chunkSize));      i += chunkSize;    }    return tokens;  }, []);  useEffect(() => {    const tokenizedSteps = chunkIntoTokens(reasoningSteps);    setTokens(tokenizedSteps);    setContent('');    setCurrentTokenIndex(0);    setIsStreaming(true);  }, [chunkIntoTokens]);  useEffect(() => {    if (!isStreaming || currentTokenIndex >= tokens.length) {      if (isStreaming) {        setIsStreaming(false);      }      return;    }    const timer = setTimeout(() => {      setContent((prev) => prev + tokens[currentTokenIndex]);      setCurrentTokenIndex((prev) => prev + 1);    }, 25); // Faster interval since we're streaming smaller chunks    return () => clearTimeout(timer);  }, [isStreaming, currentTokenIndex, tokens]);  return (    <div className="p-8 w-full">      <Reasoning className="w-full min-h-[250px]" isStreaming={isStreaming} defaultOpen={true}>        <ReasoningTrigger />        <ReasoningContent>{content}</ReasoningContent>      </Reasoning>    </div>  );};export default Example;

'use client';import { useControllableState } from '@radix-ui/react-use-controllable-state';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@/components/ui/collapsible';import { cn } from '@/lib/utils';import { BrainIcon, ChevronDownIcon } from 'lucide-react';import type { ComponentProps } from 'react';import { createContext, memo, useContext, useEffect, useState } from 'react';import { Response } from './response';type ReasoningContextValue = {  isStreaming: boolean;  isOpen: boolean;  setIsOpen: (open: boolean) => void;  duration: number;};const ReasoningContext = createContext<ReasoningContextValue | null>(null);const useReasoning = () => {  const context = useContext(ReasoningContext);  if (!context) {    throw new Error('Reasoning components must be used within Reasoning');  }  return context;};export type ReasoningProps = ComponentProps<typeof Collapsible> & {  isStreaming?: boolean;  open?: boolean;  defaultOpen?: boolean;  onOpenChange?: (open: boolean) => void;  duration?: number;};const AUTO_CLOSE_DELAY = 1000;export const Reasoning = memo(  ({    className,    isStreaming = false,    open,    defaultOpen = false,    onOpenChange,    duration: durationProp,    children,    ...props  }: ReasoningProps) => {    const [isOpen, setIsOpen] = useControllableState({      prop: open,      defaultProp: defaultOpen,      onChange: onOpenChange,    });    const [duration, setDuration] = useControllableState({      prop: durationProp,      defaultProp: 0,    });    const [hasAutoClosedRef, setHasAutoClosedRef] = useState(false);    const [startTime, setStartTime] = useState<number | null>(null);    // Track duration when streaming starts and ends    useEffect(() => {      if (isStreaming) {        if (startTime === null) {          setStartTime(Date.now());        }      } else if (startTime !== null) {        setDuration(Math.round((Date.now() - startTime) / 1000));        setStartTime(null);      }    }, [isStreaming, startTime, setDuration]);    // Auto-open when streaming starts, auto-close when streaming ends (once only)    useEffect(() => {      if (isStreaming && !isOpen) {        setIsOpen(true);      } else if (!isStreaming && isOpen && !defaultOpen && !hasAutoClosedRef) {        // Add a small delay before closing to allow user to see the content        const timer = setTimeout(() => {          setIsOpen(false);          setHasAutoClosedRef(true);        }, AUTO_CLOSE_DELAY);        return () => clearTimeout(timer);      }    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosedRef]);    const handleOpenChange = (newOpen: boolean) => {      setIsOpen(newOpen);    };    return (      <ReasoningContext.Provider        value={{ isStreaming, isOpen, setIsOpen, duration }}      >        <Collapsible          className={cn('not-prose mb-4', className)}          onOpenChange={handleOpenChange}          open={isOpen}          {...props}        >          {children}        </Collapsible>      </ReasoningContext.Provider>    );  });export type ReasoningTriggerProps = ComponentProps<  typeof CollapsibleTrigger> & {  title?: string;};export const ReasoningTrigger = memo(  ({    className,    title = 'Reasoning',    children,    ...props  }: ReasoningTriggerProps) => {    const { isStreaming, isOpen, duration } = useReasoning();    return (      <CollapsibleTrigger        className={cn(          'flex items-center gap-2 text-muted-foreground text-sm',          className        )}        {...props}      >        {children ?? (          <>            <BrainIcon className="size-4" />            {isStreaming || duration === 0 ? (              <p>Thinking...</p>            ) : (              <p>Thought for {duration} seconds</p>            )}            <ChevronDownIcon              className={cn(                'size-4 text-muted-foreground transition-transform',                isOpen ? 'rotate-180' : 'rotate-0'              )}            />          </>        )}      </CollapsibleTrigger>    );  });export type ReasoningContentProps = ComponentProps<  typeof CollapsibleContent> & {  children: string;};export const ReasoningContent = memo(  ({ className, children, ...props }: ReasoningContentProps) => (    <CollapsibleContent      className={cn(        'mt-4 text-sm',        'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',        className      )}      {...props}    >      <Response className="grid gap-2">{children}</Response>    </CollapsibleContent>  ));Reasoning.displayName = 'Reasoning';ReasoningTrigger.displayName = 'ReasoningTrigger';ReasoningContent.displayName = 'ReasoningContent';

Automatically opens during streaming in React applications, closes when complete in TypeScript components, tracks thinking duration, and provides smooth animations. Works with any reasoning-capable AI model in JavaScript frameworks.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import {
  Reasoning,
  ReasoningTrigger,
  ReasoningContent,
} from "@/components/ai/reasoning";

<Reasoning isStreaming={isThinking}>
  <ReasoningTrigger title="Thinking" />
  <ReasoningContent>Let me think about this step by step...</ReasoningContent>
</Reasoning>;

Why show AI reasoning?

Users don't trust black box responses for important decisions in React applications. Showing the thinking process builds confidence and lets users verify the logic in Next.js projects.

Duration tracking shows effort in TypeScript components. "Thought for 8 seconds" signals deliberate consideration, not instant pattern matching in JavaScript implementations.

Usage with Vercel AI SDK

Stream reasoning from models that support it using Vercel AI SDK in React applications:

"use client";

import {
  Reasoning,
  ReasoningTrigger,
  ReasoningContent,
} from "@/components/ai/reasoning";
import {
  Conversation,
  ConversationContent,
} from "@/components/ai/conversation";
import { Message, MessageContent } from "@/components/ai/message";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputSubmit,
} from "@/components/ai/prompt-input";
import { Response } from "@/components/ai/response";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";

export default function ReasoningChat() {
  const [input, setInput] = useState("");
  const { messages, append, status } = useChat();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      append({ role: "user", content: input });
      setInput("");
    }
  };

  return (
    <div className="flex flex-col h-full max-w-4xl mx-auto">
      <Conversation>
        <ConversationContent>
          {messages.map((message) => (
            <Message from={message.role} key={message.id}>
              <MessageContent>
                {message.parts?.map((part, i) => {
                  switch (part.type) {
                    case "text":
                      return (
                        <Response key={`${message.id}-${i}`}>
                          {part.text}
                        </Response>
                      );
                    case "reasoning":
                      return (
                        <Reasoning
                          key={`${message.id}-${i}`}
                          isStreaming={status === "streaming"}
                          defaultOpen={false}
                        >
                          <ReasoningTrigger />
                          <ReasoningContent>{part.text}</ReasoningContent>
                        </Reasoning>
                      );
                    default:
                      return null;
                  }
                })}
              </MessageContent>
            </Message>
          ))}
        </ConversationContent>
      </Conversation>

      <PromptInput onSubmit={handleSubmit}>
        <PromptInputTextarea
          value={input}
          onChange={(e) => setInput(e.currentTarget.value)}
          placeholder="Ask me to reason through something..."
        />
        <PromptInputSubmit disabled={!input.trim()} status={status} />
      </PromptInput>
    </div>
  );
}

Backend route with reasoning support:

// app/api/chat/route.ts
import { streamText, convertToModelMessages } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: "deepseek/deepseek-r1", // or other reasoning-capable model
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse({
    sendReasoning: true, // Enable reasoning part streaming
  });
}

Features

Automatic open/close behavior during reasoning streams (opens when reasoning starts, closes when done) in React applications
Manual toggle control with smooth animations in TypeScript components
Duration tracking with "Thought for X seconds" display for JavaScript frameworks
Controllable state for custom behavior in Next.js projects
Accessible keyboard navigation and screen reader support
Works with any Vercel AI SDK setup and AI chat applications
Free open source component designed for reasoning-capable AI models (DeepSeek R1, o1, etc.) in conversational AI interfaces

API Reference

Reasoning

Container component managing reasoning state and auto-behavior.

Prop	Type	Default	Description
`isStreaming`	`boolean`	`false`	Auto-opens when true, auto-closes when false
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`duration`	`number`	`0`	Controlled duration in seconds
`className`	`string`	-	Additional CSS classes
`...props`	`ComponentProps<typeof Collapsible>`	-	Collapsible component props

ReasoningTrigger

Clickable trigger showing reasoning status and duration.

Prop	Type	Default	Description
`title`	`string`	`"Reasoning"`	Custom title for thinking state
`className`	`string`	-	Additional CSS classes
`...props`	`ComponentProps<typeof CollapsibleTrigger>`	-	Collapsible trigger props

ReasoningContent

Content container for reasoning text with animations.

Prop	Type	Description
`children`	`string`	Required - Reasoning content text
`className`	`string`	Additional CSS classes
`...props`	`ComponentProps<typeof CollapsibleContent>`	Collapsible content props

Keyboard interactions

Key	Description
`Space` / `Enter`	Toggle reasoning visibility on trigger
`Tab`	Focus reasoning trigger
`Escape`	Close reasoning panel when focused

Reasoning display gotchas

Auto-close timing can feel abrupt: The React component auto-closes 1 second after streaming ends. Adjust AUTO_CLOSE_DELAY if users complain in TypeScript implementations.

Long reasoning breaks mobile: DeepSeek R1 reasoning can be 2000+ words in JavaScript applications. Set max-height and scroll, or mobile users scroll forever in Next.js projects.

Streaming performance issues: Large reasoning content updates rapidly in React components. Consider throttling updates for smoother animations.

Default open state matters: Most users want reasoning closed by default in TypeScript applications. They'll expand it if interested.

Empty reasoning handling: Not all models provide reasoning for every response in JavaScript frameworks. Handle undefined reasoning gracefully in React implementations.

Integration with other components

Works great with Response for formatted reasoning content in React applications. Drop into Message for chat-based reasoning display in Next.js projects. Combine with Conversation for scrolling reasoning streams. This free open source component integrates seamlessly with modern JavaScript frameworks.

React AI Reasoning

Auto-collapsing reasoning display

Installation

Usage

Why show AI reasoning?

Usage with Vercel AI SDK

Features

API Reference

Reasoning

ReasoningTrigger

ReasoningContent

Keyboard interactions

Reasoning display gotchas

Integration with other components

Questions developers actually ask

On this page

React AI Reasoning

Reactai/reasoning

How does the auto open/close behavior work?

How is thinking duration calculated?

Can I control the open state manually?

Which AI models support reasoning parts?

Can I customize the trigger appearance?

On this page