Explanation Panel

Transparency

Expandable panel showing AI reasoning, decision-making process, alternatives considered, assumptions made, and limitations. Provides transparency and explainability for AI-generated recommendations.

Basic Usage

Click the panel to expand and explore the AI's reasoning process.

import { ExplanationPanel } from '@/components/ui/explanation-panel'

const reasoning = [
  {
    step: 'Data Collection',
    key_findings: 'Analyzed 15,000 user interactions across 3 months',
    confidence: 0.95,
    data_sources: ['User Analytics', 'Session Data'],
  },
  // ... more steps
]

<ExplanationPanel
  title="Why AI recommended this approach"
  reasoning={reasoning}
  alternatives={alternatives}
  assumptions={assumptions}
  limitations={limitations}
  onReportIssue={() => console.log('Issue reported')}
/>

Default Expanded

Panel can be shown expanded by default for immediate visibility.

Data Collection

95% confident

Analyzed 15,000 user interactions across 3 months

Sources:User AnalyticsSession DataFeedback Forms

Pattern Recognition

88% confident

Identified correlation between feature usage and user retention

Sources:ML Model v2.3Historical Data

Generated 6:52:15 AM

import { ExplanationPanel } from '@/components/ui/explanation-panel'

<ExplanationPanel
  title="Product Recommendation Reasoning"
  reasoning={reasoning}
  defaultExpanded={true}
/>

Reasoning Steps Only

Show only the reasoning process without alternatives or details.

import { ExplanationPanel } from '@/components/ui/explanation-panel'

// Only reasoning steps, no alternatives or details
<ExplanationPanel
  title="Content Moderation Decision"
  reasoning={steps}
  exportable={false}
/>

Confidence Levels

Color-coded confidence indicators help users assess reliability of each step.

High Confidence Analysis

95% confident

Data quality is excellent with 99% accuracy

Medium Confidence Analysis

72% confident

Some data points require validation

Low Confidence Analysis

48% confident

Limited historical data available

Generated 6:52:15 AM

import { ExplanationPanel } from '@/components/ui/explanation-panel'

// Confidence levels determine badge color
// >= 0.8: Green (high confidence)
// >= 0.6: Amber (medium confidence)
// < 0.6: Red (low confidence)

const reasoning = [
  { step: 'Analysis', confidence: 0.95 }, // Green badge
  { step: 'Analysis', confidence: 0.72 }, // Amber badge
  { step: 'Analysis', confidence: 0.48 }, // Red badge
]

Complete Example

Full example with reasoning, alternatives, assumptions, limitations, and all actions.

AI Recommendation

Based on the analysis, we recommend implementing a mobile-first redesign approach for your platform. This will maximize user engagement and retention.

import { ExplanationPanel } from '@/components/ui/explanation-panel'

// Complete example with all features
<ExplanationPanel
  title="Why this recommendation?"
  reasoning={reasoningSteps}
  alternatives={alternativeOptions}
  assumptions={assumptionsList}
  limitations={limitationsList}
  onReportIssue={() => handleIssueReport()}
  exportable={true}
  defaultExpanded={false}
/>

Props

Complete API reference for the ExplanationPanel component.

Prop	Type	Default	Description
title	string	"Why AI recommended this"	Title shown in panel header
reasoning	ReasoningStep[]	[]	Array of reasoning steps
alternatives	Alternative[]	[]	Alternative options considered
assumptions	string[]	[]	Assumptions made by the AI
limitations	string[]	[]	Known limitations of the analysis
onReportIssue	() => void	-	Callback when user reports an issue
exportable	boolean	true	Show export button
defaultExpanded	boolean	false	Whether panel is expanded by default

ReasoningStep Type

Property	Type	Description
step	string	Title of the reasoning step
key_findings	string	Main findings from this step
confidence	number	Confidence level (0-1)
data_sources	string[]	Data sources used

Features

Transparent Reasoning

Step-by-step breakdown of AI decision-making process with confidence scores for each step.

Alternative Options

Shows alternatives considered by the AI, helping users understand the trade-offs.

Assumptions & Limitations

Clear disclosure of assumptions made and known limitations of the analysis.

Export & Reporting

Export reasoning as JSON for documentation or report issues directly from the panel.