Prompts & Playground

The prompts page is the central library for managing prompt templates across your organization. The playground provides an interactive environment for testing prompts against different models, comparing outputs, and tuning parameters.

Prompts

Route: /prompts

The prompts page serves as the single source of truth for all prompt templates, with versioning, categorization, and A/B test result tracking.

Prompt Library Table

A searchable, filterable table of all prompt templates:

• Search -- filter prompts by name, content, or tag
• Filters -- category (system, user, assistant), status (active, draft, archived), model compatibility
• Columns -- prompt name, category, model, version, last modified, usage count, avg quality score
• Row actions -- edit, duplicate, test in playground, view history, archive

import { PromptLibraryTable } from "@/components/prompts/prompt-library-table"

<PromptLibraryTable prompts={prompts} />

Template Cards

Grid view of prompt templates with preview cards showing:

• Template name and category badge
• Prompt preview -- first few lines of the prompt content
• Variables -- highlighted template variables (e.g., {{user_input}}, {{context}})
• Stats -- usage count, average response quality, last used date
• Quick actions -- copy, edit, test in playground

import { TemplateCard } from "@/components/prompts/template-card"

<TemplateCard template={template} />

Version History

Side-by-side diff view of prompt versions showing what changed between iterations:

• Diff highlighting -- additions in green, removals in red
• Version metadata -- author, timestamp, change description
• Rollback -- revert to any previous version
• Performance delta -- quality score and cost comparison between versions

import { VersionDiff } from "@/components/prompts/version-diff"

<VersionDiff current={currentVersion} previous={previousVersion} />

A/B Test Results

Performance comparison between prompt variants:

Metric	Variant A	Variant B
Quality Score	8.4/10	8.7/10
Avg Tokens	342	289
Cost per Call	$0.0048	$0.0041
Latency	1.2s	0.9s
Sample Size	1,200	1,200

import { AbTestResults } from "@/components/prompts/ab-test-results"

<AbTestResults testId={test.id} variants={test.variants} />

Playground

Route: /playground

The playground is an interactive environment for testing prompts against models in real time. It provides a split-pane interface with prompt input on the left and model output on the right.

Prompt Editor

A text editor for composing and editing prompts:

• System prompt -- define the system instruction
• User prompt -- compose the user message with template variable support
• Variable substitution -- fill in template variables before execution
• Syntax highlighting -- visual distinction between static text and variables

Model Selection

Choose one or more models to test against:

• Single model -- test prompt against one model
• Multi-model comparison -- run the same prompt against multiple models side by side
• Model presets -- saved configurations for common testing scenarios

Parameter Tuning

Adjust model parameters before sending a request:

Parameter	Control	Range
Temperature	Slider	0.0 -- 2.0
Max Tokens	Number input	1 -- 4096
Top P	Slider	0.0 -- 1.0
Frequency Penalty	Slider	-2.0 -- 2.0
Presence Penalty	Slider	-2.0 -- 2.0
Stop Sequences	Tag input	Custom strings

Output Panel

Displays the model response with metadata:

• Response text -- formatted model output with markdown rendering
• Token count -- input tokens, output tokens, total
• Latency -- time to first token (TTFT) and total response time
• Cost estimate -- calculated cost based on model pricing
• Quality rating -- manual thumbs up/down rating for tracking

Comparison View

When testing against multiple models, outputs are displayed side by side in a grid:

+----------------------------+----------------------------+
| GPT-4o                     | Claude 3.5 Sonnet          |
| Response text...           | Response text...           |
| 245 tokens | 1.1s | $0.003| 198 tokens | 0.8s | $0.002|
+----------------------------+----------------------------+

Data Sources

Data	Source	Location
Prompts	prompts	data/seed.ts
Prompt templates	promptTemplates	data/seed.ts
Prompt versions	promptVersions	data/seed.ts
A/B tests	abTests	data/seed.ts
Playground presets	playgroundPresets	data/seed.ts

Next Steps

• Usage & Logs -- token analytics and request/response logs
• Errors & Team -- error tracking and team management