Using the AI Playground and the Prompt Library programmatically.

• AI Playground (Browser)
• Setting Up API Keys
• Supported Providers
• Token Usage Tracking
• Programmatic Usage (JavaScript)
• API Functions Reference

The AI Playground is available in the Prompt Workshop (browser/desktop only — not in the CLI). It lets you send prompts directly to AI models and get responses, all within the browser.

1. Open the Prompt Workshop (viewer.html or prompt-lib viewer)
2. Click tab 6 (Playground) or press the 6 key

• Provider selector — choose between OpenAI, Anthropic, or Google
• Model override — use a specific model instead of the default
• System prompt — optional system prompt for context setting
• Prompt input — write, paste, or load a prompt from the library
• Send — sends the prompt to the selected provider's API
• Response display — formatted AI response with markdown rendering
• Token tracking — shows input/output token usage per request
• One-click copy — copy the AI response to clipboard

1. Configure your API key in Settings (⚙ button) — one-time setup
2. Select a provider (OpenAI, Anthropic, or Google)
3. Optionally enter a system prompt
4. Write or paste your prompt
5. Click "Send"
6. View the AI response, token usage, and model info
7. Copy the response or iterate

Click the ⚙ (gear) button in the Prompt Workshop to open API Settings.

• Keys are stored in localStorage — they never leave your browser
• Keys are sent directly from your browser to the provider's API (no intermediate server)
• Keys are stored under the api_settings localStorage key
• To clear your keys: Settings → delete the key fields, or clear browser localStorage

Message format:

{
  "model": "gpt-4o-mini",
  "messages": [
    {"role": "system", "content": "System prompt here"},
    {"role": "user", "content": "User prompt here"}
  ]
}

Message format:

{
  "model": "claude-sonnet-4-20250514",
  "system": "System prompt here",
  "messages": [
    {"role": "user", "content": "User prompt here"}
  ]
}

Message format:

{
  "contents": [
    {"parts": [{"text": "System prompt + user prompt"}]}
  ],
  "generationConfig": {
    "temperature": 0.7,
    "maxOutputTokens": 4000
  }
}

Note: Google's API combines system and user prompts into a single content block.

The Playground tracks token usage for each request:

Token counts are displayed after each response, helping you monitor costs and optimize prompt length.

Send the same prompt to all configured providers simultaneously and compare responses side-by-side.

How to use:

1. Configure 2+ API keys via ⚙ Settings
2. Write your prompt in the Playground
3. Click "⚖ Compare (N models)"
4. Results appear in a grid: response text, timing, token usage, copy button

Technical details:

• Uses Promise.allSettled() — one provider failing doesn't block others
• Each request has a 30-second timeout via AbortController
• Send button is disabled during comparison

• All API calls enforce a 30-second timeout via AbortController
• API Settings modal shows a security warning about plaintext localStorage storage
• API keys are never sent anywhere except the selected provider's endpoint

The Prompt Library can be imported and used programmatically in your own JavaScript/Node.js projects.

npm install @dishine/prompt-library

import {
  loadPrompts,
  findPlaceholders,
  extractTemplate,
  saveCustomPrompt,
  loadSavedCompositions,
  saveComposition,
  loadCustomPrompts
} from '@dishine/prompt-library';

// Load all 82+ prompts
const prompts = loadPrompts();
console.log(`Loaded ${prompts.length} prompts`);

// Find placeholders in a template
const template = '{{role}} should {{task}} for {{audience}}';
const placeholders = findPlaceholders(template);
// → ['{{role}}', '{{task}}', '{{audience}}']

// Extract the template section from a prompt's content
const prompt = prompts.find(p => p.slug === 'code-review');
const tmpl = extractTemplate(prompt.content);

import { searchPrompts } from '@dishine/prompt-library/src/search.js';

const prompts = loadPrompts();
const results = searchPrompts(prompts, 'chain of thought');

for (const r of results) {
  console.log(`${r.slug} (score: ${r.score})`);
}

import {
  generatePrompt,
  getFrameworks,
  getFramework
} from '@dishine/prompt-library/src/generator.js';

// List available frameworks
const frameworks = getFrameworks();
frameworks.forEach(fw => {
  console.log(`${fw.key}: ${fw.name} — ${fw.description}`);
});

// Generate a prompt from a framework
const result = generatePrompt('expert-role', {
  role: 'senior data analyst',
  experience: '10+ years',
  domain: 'financial services',
  task: 'Analyze quarterly revenue trends and identify anomalies',
  audience: 'executive team',
  tone: 'professional',
  constraints: 'Use only provided data, cite specific numbers',
  output_format: 'structured markdown with tables'
});

console.log(result);

import { lintPrompt, formatLintResult } from '@dishine/prompt-library/src/linter.js';

const result = lintPrompt('Write me something good about dogs');
console.log(`Score: ${result.score}/100 (Grade: ${result.grade})`);
console.log(`Passed: ${result.passedCount}/${result.totalRules}`);

// Human-readable output
console.log(formatLintResult(result));

import { optimizePrompt } from '@dishine/prompt-library/src/optimizer.js';

const result = optimizePrompt('Can you help me write a blog post about AI?');
console.log(`Score: ${result.scoreBefore} → ${result.scoreAfter}`);
console.log(`Domain: ${result.domain}`);
console.log('Changes:', result.changes);
console.log('Optimized:', result.optimized);

import { buildRecommendation } from '@dishine/prompt-library/src/recommender.js';

const prompts = loadPrompts();
const rec = buildRecommendation(prompts, 'I need to build a REST API');

console.log('Suggested combo:');
if (rec.suggestedCombo.systemPrompt) {
  console.log(`  System: ${rec.suggestedCombo.systemPrompt.title}`);
}
if (rec.suggestedCombo.framework) {
  console.log(`  Framework: ${rec.suggestedCombo.framework.title}`);
}
if (rec.suggestedCombo.template) {
  console.log(`  Template: ${rec.suggestedCombo.template.title}`);
}

Sends a prompt to an AI model and returns the response. Used by the Playground.

Parameters:

Returns:

{
  text: "AI response text",
  model: "model-name",
  usage: { prompt_tokens: 50, completion_tokens: 200, total_tokens: 250 }
  // usage is null for Google provider
}

Sends a prompt to an AI model for professional rewriting. Returns only the optimized prompt text.

Parameters:

Returns: string — the optimized prompt text.

The AI-powered optimizer uses a carefully crafted system prompt that instructs the model to:

1. Keep the original intent and meaning
2. Add structure with clear sections
3. Make instructions more specific
4. Add constraints and quality verification
5. Remove vague language
6. Return only the optimized prompt (no commentary)

Navigation: ← Tools: Linter, Optimizer, Recommender  |  Architecture →