Display step-by-step reasoning and collapsible thought processes in AI interfaces.
The user asked about implementing a sorting algorithm
This appears to be a technical question requiring code
examples
Quick sort: O(n log n) average case, good for general
purpose
Merge sort: O(n log n) worst case, stable and predictable
Bubble sort: O(n²), simple but inefficient for large
datasets
Given the educational context, I'll demonstrate merge sort
for its clarity
It shows the divide-and-conquer principle effectively
Installation
Copy the Source Code
Copy and paste the following code into your project:
Examples
Demo
Build a multi-step reasoning trace with collapsible sections and inline detail items.
The problem involves optimizing database queries for a
high-traffic e-commerce platform
Current bottlenecks: slow product search (2-3 seconds),
category filtering delays
Database: PostgreSQL with 10M+ products, complex joins
across multiple tables
Missing indexes on frequently queried columns (product_name,
category_id, price_range)
N+1 query problem in product listing API - need eager
loading
Full table scans occurring due to non-optimized WHERE
clauses
Consider implementing database partitioning for better
performance
Props
ChainOfThought
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | One or more `ChainOfThoughtStep` blocks. |
class | string | - | Additional CSS classes for the wrapper. |
ChainOfThoughtStep
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Typically a trigger followed by matching content. |
class | string | - | Additional CSS classes for the step wrapper. |
ChainOfThoughtTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Trigger label content. |
leftIcon | Snippet | - | Optional icon shown before the label. |
swapIconOnHover | boolean | true | When a left icon is present, swap it with the chevron on hover. |
class | string | - | Additional CSS classes for the trigger. |
ChainOfThoughtContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Expanded detail rows for the current step. |
class | string | - | Additional CSS classes for the collapsible content. |
ChainOfThoughtItem
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Text or custom markup for a reasoning item. |
class | string | - | Additional CSS classes for the item. |