Implementation:Ucbepic Docetl SystemPromptsExplorer

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

Overview

Concrete tool for the system prompts strategy explorer showcase component in the DocETL website.

Description

The SystemPromptsExplorer visualizes strategies extracted from a corpus of system prompts processed through a DocETL pipeline. It displays strategy cards with summaries, associated system/example pairs, and pre-reduce counts indicating how many raw prompts contributed to each strategy. The component features text search, system-type filtering, strategy selection for detail view, and uses markdown rendering for formatted content. Data is fetched from the /api/showcase/prompts/analyzed endpoint with loading and error states.

Usage

Rendered on the DocETL showcase page to demonstrate thematic analysis and reduction of a large corpus of system prompts into consolidated strategy categories.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/showcase/system-prompts-explorer.tsx
• Lines: 1-360

Signature

interface SystemExample {
  system: string;
  example: string;
}

interface StrategyData {
  strategy: string;
  summary: string;
  systems_and_examples: SystemExample[];
  _counts_prereduce_summarize_strategies: number;
}

export default function SystemPromptsExplorer(): JSX.Element

Import

import SystemPromptsExplorer from "@/components/showcase/system-prompts-explorer";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
No props -- fetches data from /api/showcase/prompts/analyzed

Outputs

Name	Type	Description
rendered	JSX.Element	Interactive strategy explorer with search and filtering

Usage Examples

<SystemPromptsExplorer />

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment