PromptPilot AI

PromptPilot AI is a React + Vite prompt engineering playground powered by the Gemini API. It lets users paste source text, choose a ready-made workflow, run the prompt through Gemini, inspect the generated system prompt, and save previous runs in local browser history.

Screenshots

Light Mode

Dark Mode

Complete Workflow Example

Features

• Gemini-powered prompt generation with gemini-2.5-flash and gemini-2.5-pro.
• Eight ready-to-use prompt workflows.
• Sample input loader for quick demos.
• Prompt Inspector for viewing system instructions, user input, model, and temperature.
• Markdown-style output rendering with copy and download actions.
• Local workspace history saved in browser localStorage.
• Light and dark theme toggle.
• API key support through either .env or the in-app key modal.

Workflows

Workflow	Purpose	Example Output
Summarize	Condenses long articles or notes into concise, actionable bullet points.	Executive summary and grouped takeaways.
Professional Rewrite	Rewrites rough text into polished business communication.	Standard professional and executive-style versions.
Generate Email	Converts rough context into a structured professional email.	Subject lines, body, CTA, and sign-off.
Create Quiz	Builds a 5-question multiple choice quiz from source content.	Questions, options, answer key, and explanations.
Blog Post Generator	Turns notes or keywords into an SEO-friendly blog draft.	Title, meta description, sections, conclusion, and keywords.
Explain Simply	Explains complex topics in simple language.	ELI5 explanation, beginner breakdown, and analogy table.
Interview Questions	Generates technical and behavioral interview questions.	Question kit with interviewer intent and answer outlines.
Social Media Post	Converts ideas into platform-ready social content.	LinkedIn post, X/Twitter copy, Threads/Instagram copy, and hashtags.

How To Use

Follow this process to generate an AI deliverable:

1. Configure your Gemini API key.

   Use the .env file or click the API key button in the navbar. If you enter a key in the UI, it is saved only in your browser local storage.

2. Choose the Gemini model.

   Use gemini-2.5-flash for fast everyday output, or gemini-2.5-pro for more complex reasoning.

3. Enter your input text.

   Paste your own source text into the input box, or click Sample to load demo text. In the example below, the user asks: Make a quiz for the HTML language with 10 questions.

   

4. Select a workflow.

   Pick one of the workflow cards. The selected card changes color so you can see the active workflow. In this example, Create Quiz is selected.

   

5. Run the workflow.

   Click Run Prompt Pilot Workflow. The app sends your input, selected workflow system prompt, selected model, and generation settings to Gemini.

6. Review the output.

   The generated result appears in the Pilot Deliverable panel. You can use typewriter mode, inspect the prompt, copy the output, or download the result as a file.

   

7. Reuse previous results.

   Successful generations are saved in browser history. Open the history drawer to restore or delete previous runs.

Tech Stack

• React 19
• Vite 8
• Tailwind CSS 4
• @google/generative-ai
• lucide-react
• Browser localStorage for custom API keys and run history

Project Structure

src/
  assets/              Static images and icons
  components/          Reusable UI components
    ActionCards.jsx    Workflow selection cards
    Footer.jsx         Footer area
    HeroSection.jsx    Hero and feature cards
    Loader.jsx         Loading state
    Navbar.jsx         Header, theme toggle, API key modal
    OutputPanel.jsx    Generated response UI
    PromptHistory.jsx  Local history drawer
    PromptInput.jsx    Source text editor
    PromptInspector.jsx Prompt debugging panel
  pages/
    Workspace.jsx      Main workflow state and layout
  prompts/
    templates.js       Workflow definitions and system prompts
  services/
    gemini.js          Gemini SDK adapter and model handling
  utils/
    helpers.js         Markdown, clipboard, and download helpers

Setup

Install dependencies:

npm install

Create a .env file:

cp .env.example .env

Add your Gemini API key:

VITE_GEMINI_API_KEY=AIzaSyYourActualAPIKeyHere

Start the development server:

npm run dev

Open the local URL shown by Vite, usually:

http://localhost:5173

Build for production:

npm run build

Preview the production build:

npm run preview

API Key Behavior

PromptPilot can use a Gemini key in two ways:

• Environment key: stored in .env as VITE_GEMINI_API_KEY.
• In-app key: entered through the navbar modal and saved in browser localStorage under prompt_pilot_custom_key.

The in-app key overrides the .env key for that browser only.

Gemini Models

The app currently supports:

• gemini-2.5-flash for fast default generation.
• gemini-2.5-pro for higher reasoning tasks.

Legacy gemini-1.5-* model names are normalized to the current gemini-2.5-* equivalents to avoid model-not-found errors.

Common Errors

Model not found

Use gemini-2.5-flash or gemini-2.5-pro. Older gemini-1.5-* model names may return a 404 from the Gemini API.

Rate limit or quota exceeded

Wait and retry, use a shorter prompt, switch to gemini-2.5-flash, or check your Google AI Studio / Google Cloud quota.

Missing API key

Add VITE_GEMINI_API_KEY to .env, or use the API key modal in the navbar.

Notes

• Run history and custom API keys are local to the browser.
• No backend database is required.
• Screenshots are stored in public/screenshots.