Documentation: Prompt Engineering Studio

This document provides an overview and feature explanation for the prompt-engineering-studio project, a client-side tool for testing and designing prompts with Google Gemini.

The core features of this project are built by referencing principles from two Prompt Engineering documents:

Prompt Engineering (22365_3_Prompt-Engineering_v7-1.pdf) - by Lee Boonstra, Google
Prompt Engineering for LLMs - by John Berryman & Albert Ziegler, O'Reilly

Core Features

This application implements several Prompt Engineering techniques as practical features:

1. Prompt Editor & Role Prompting

The main UI (index.html) is designed to directly support the "Role Prompting" technique by separating input fields for System Prompt and User Prompt.

System Prompt: Used to define a role or persona for the AI, such as "Act as a..." (config.js includes PES_MODES for pre-built personas). This helps set the model's tone, style, and area of expertise.
User Prompt: The main instruction or question from the user, which can also include few-shot examples.

Reference: PDF 22365_3... (p. 18, 21-22) - Section: "Role prompting"

2. Gemini API Service & Configuration

The geminiService.js file acts as the app's "engine," featuring a callApi function that builds the payload for the Gemini API. It also includes a fetchWithRetry mechanism to retry requests upon network or API errors (e.g., 429, 5xx).

Configuration (config.js): Users can adjust the model's core generationConfig parameters, such as Temperature, Top-P, Top-K, and Max Tokens, which significantly impact the creativity and precision of the response.

Reference: PDF 22365_3... (p. 8-12) - Section: "LLM output configuration"

3. Prompt Analysis

This is a key feature of the Studio (analyzePrompt in geminiService.js) that uses an LLM to analyze the user's prompt. The prompt instructing the analysis AI (ANALYSIS_PROMPT_TEMPLATE) directly cites pages from the 22365_3... PDF to check the user's prompt against principles like:

Clarity/Specificity: Is the prompt clear and specific? (cite: 1774)
Instructions vs. Constraints: Does it use positive instructions (Do) instead of negative ones (Do Not)? (cite: 1783-1785)
Use of Examples (Few-Shot): Does it use examples? (cite: 1159, 1164)
Alignment: Checks if the prompt's intent aligns with the JSON Mode or Grounding (RAG) settings.

This feature uses the ANALYSIS_SCHEMA from config.js to force the AI to return its analysis in a clearly structured JSON format.

4. Prompt Templates (Few-Shot & JSON Mode)

The config.js file contains a PROMPT_TEMPLATES variable that helps users start quickly with different techniques.

Few-Shot Classification: Provides 2-3 examples (shots) to let the model learn the pattern before answering the real query.
JSON Output (Schema): A template that instructs the model to reply in JSON format. It also pre-fills the outputSchema in the UI, forcing the model to output JSON that strictly follows the defined structure.

Reference: PDF 22365_3... (p. 15-17) - "One-shot & few-shot" and (p. 60-62) - "Experiment with output formats (JSON)"

5. Security (Client-side & Encryption)

The project emphasizes privacy by running entirely in the user's browser (client-side), as stated in privacy.html. No API keys or prompts are sent to the app's server.

API Key Encryption: (CryptoHelper in app.js) Users must set a main "Encryption Password" to encrypt their API key using AES-GCM before it's stored in localStorage. When the app is reopened, the user must unlock the session with this password. The key is then temporarily stored in sessionStorage and is cleared when the tab is closed.

6. Advanced Prompting Techniques

The app supports advanced techniques described in both PDFs via the Configuration panel:

Grounding (RAG): (handleRagFile in app.js) Users can upload a .txt or .md file to be used as "Context." The file content is read and prepended to the System Prompt in the runPrompt function of geminiService.js, allowing the model to use this data in its answer (Retrieval-Augmented Generation). Reference: O'Reilly PDF (Chapter 5) - "Retrieval-Augmented Generation"
Self-Consistency: (handleRun in app.js) When selected, the app runs the same prompt 3 times (forcing Temperature >= 0.7 for diversity) and combines all 3 results for the user to see, allowing them to find the most consistent answer. Reference: PDF 22365_3... (p. 32) - "Self-consistency"
Step-Back Prompting: (handleStepBackRun in app.js) This technique works in two steps: Step 1: It generates a new "Meta-Prompt" to ask the AI to summarize the "general principles" from the original question. Step 2: It takes the answer (the principles) from Step 1 and uses it as additional context to run the user's original prompt again. Reference: PDF 22365_3... (p. 25) - "Step-back prompting"
Tool Usage (ReAct): (useTools in config.js) Users can define Tool Definitions as JSON (toolDefinitions). When enabled, geminiService.js sends these tools in the API payload. If the model decides to use a tool, it will respond with toolCalls, which the app then displays as a JSON object (simulating the "Act" part of ReAct). Reference: PDF 22365_3... (p. 37) - "ReAct (reason & act)"

7. History & Comparison

(app.js) Every run's result and full configuration is saved to the "Run History" tab (using localStorage). The most critical feature is "Compare," which allows a user to select two different runs to see a side-by-side comparison of the Prompt, Config, and Output. This is essential for the iterative development and tuning of prompts.