Implementation:Ucbepic Docetl PresidentialDebateDemo

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the interactive presidential debate analysis demo on the DocETL landing page.

Description

The PresidentialDebateDemo component provides a tabbed interface with three views: the pipeline YAML code, an interactive pipeline visualization, and a data exploration view. It displays the complete presidential debate analysis pipeline configuration, embeds the PipelineVisualization component for step-by-step walkthrough, and includes collapsible sections for viewing the pipeline code with copy-to-clipboard functionality. The component uses ReactMarkdown for rendering formatted content.

Usage

Embedded on the landing page (Home component) to showcase DocETL capabilities through a real-world example of analyzing presidential debate transcripts.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/PresidentialDebateDemo.tsx
• Lines: 1-505

Signature

export default function PresidentialDebateDemo(): JSX.Element

Import

import PresidentialDebateDemo from "@/components/PresidentialDebateDemo";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
No props -- self-contained demo component

Outputs

Name	Type	Description
rendered	JSX.Element	Tabbed demo with code view, pipeline visualization, and data explorer

Usage Examples

<PresidentialDebateDemo />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment