Components / Prompt Builders

Prompt Test Bench

A split-panel interface for testing AI prompts with real-time input and simulated output comparison.

Live Preview — prompt-test-bench-01

Prompt Test Bench

GPT-4o

Correct JSON format detected.

1.2s
PASSED

Llama-3

Minor hallucination in field 'date'.

0.8s
WARNING

Claude 3.5

Perfect alignment with system prompt.

1.5s
PASSED

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react lucide-react

Source Code

prompt-test-bench-01.tsx 
"use client";

import React, { useState } from "react";
import { Play, RotateCcw, CheckCircle, AlertTriangle, Clock } from "lucide-react";

export default function PromptTestBench() {
    const [isRunning, setIsRunning] = useState(false);

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-xl mx-auto">
            <div className="flex items-center justify-between mb-8">
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 uppercase tracking-widest flex items-center gap-2">
                    <Play className="h-4 w-4 text-blue-500 fill-current" />
                    Prompt Test Bench
                </h3>
                <div className="flex gap-2">
                    <button onClick={() => setIsRunning(true)} className="px-4 py-1.5 rounded-lg bg-blue-600 text-white text-[10px] font-bold hover:bg-blue-700 transition-all">
                        RUN TEST
                    </button>
                    <button className="p-1.5 rounded-lg border border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 transition-colors text-zinc-500">
                        <RotateCcw className="h-4 w-4" />
                    </button>
                </div>
            </div>

            <div className="space-y-4">
                {[
                    { model: "GPT-4o", status: "passed", time: "1.2s", result: "Correct JSON format detected." },
                    { model: "Llama-3", status: "warning", time: "0.8s", result: "Minor hallucination in field 'date'." },
                    { model: "Claude 3.5", status: "passed", time: "1.5s", result: "Perfect alignment with system prompt." },
                ].map((t) => (
                    <div key={t.model} className="p-4 rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50 flex items-start justify-between group">
                        <div className="flex gap-3">
                            <div className="mt-0.5">
                                {t.status === "passed" ? <CheckCircle className="h-4 w-4 text-emerald-500" /> : <AlertTriangle className="h-4 w-4 text-amber-500" />}
                            </div>
                            <div>
                                <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100">{t.model}</p>
                                <p className="text-[11px] text-zinc-500 mt-1">{t.result}</p>
                            </div>
                        </div>
                        <div className="text-right">
                            <div className="flex items-center gap-1.5 text-[10px] text-zinc-400 font-bold mb-1">
                                <Clock className="h-3 w-3" />
                                {t.time}
                            </div>
                            <span className={`text-[9px] font-black uppercase tracking-widest ${t.status === "passed" ? "text-emerald-500" : "text-amber-500"}`}>
                                {t.status.toUpperCase()}
                            </span>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
PromptTestBench() None

State Management

React state variables managed within this component.

Variable Initial Value
isRunning false

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<AlertTriangle> 1× Library lucide-react
<CheckCircle> 1× Library lucide-react
<Clock> 1× Library lucide-react
<Play> 1× Library lucide-react
<RotateCcw> 1× Library lucide-react
<button> 2× Native Native HTML
<div> 10× Native Native HTML
<h3> 1× Native Native HTML
<p> 2× Native Native HTML
<span> 1× Native Native HTML

Related Components

  • Prompt Template Editor — A rich text editor for creating and editing AI prompt templates with variable placeholders and syntax highlighting.
  • Prompt Variable Insert — An inline variable insertion widget that lets users define and insert dynamic placeholders into AI prompt templates.
  • Prompt Chain Builder — A visual chain builder for creating multi-step AI prompt workflows with drag-and-drop step reordering.
  • Prompt Expert Mode — A power-user interface for fine-tuning prompt parameters and direct model interaction.
  • Prompt Version Diff — A version comparison tool showing prompt iterations with visual diff highlighting and restore functionality.
  • Prompt Optimizer — An AI-powered prompt refinement tool that suggests improvements for better model performance.