structured-prompt-builder

structured-prompt-builder

A lightweight, browser‑first tool for designing well‑structured AI prompts with a clean UI, live previews, a local Prompt Library, and optional Gemini‑powered prompt optimization.

Stars: 105

Visit
 screenshot

A lightweight, browser-first tool for designing well-structured AI prompts with a clean UI, live previews, a local Prompt Library, and optional Gemini-powered prompt optimization. It supports structured fields like Role, Task, Audience, Style, Tone, Constraints, Steps, Inputs, and Few-shot examples. Users can copy/download prompts in Markdown, JSON, and YAML formats, and utilize model parameters like Temperature, Top-p, Max tokens, Presence & Frequency penalties. The tool also features a Local Prompt Library for saving, loading, duplicating, and deleting prompts, as well as a Gemini Optimizer for cleaning grammar/clarity without altering the schema. It offers dark/light friendly styles and a focused reading mode for long prompts.

README:

Structured Prompt Builder

A lightweight, browser‑first tool for designing well‑structured AI prompts with a clean UI, live previews, a local Prompt Library, and optional Gemini‑powered prompt optimization.

Support development
If this tool saves you time, consider sponsoring to help keep it free and add features like template sharing and cloud sync.
👉 Become a sponsor

Sponsor

Highlights

  • Structured fields: Role, Task, Audience, Style, Tone, Constraints, Steps, Inputs (name: value), Few‑shot examples
  • Live preview in Markdown, JSON, and YAML
  • Copy / Download each format in one click; Import from JSON
  • Model parameters: Temperature, Top‑p, Max tokens, Presence & Frequency penalties
  • Local Prompt Library (save, load, duplicate, delete) using localStorage
  • Gemini Optimizer (optional): cleans grammar/clarity without changing your schema
  • Built‑in dark/light friendly styles; focused reading mode for long prompts

Tech Stack

  • React 18 (UMD) for UI
  • Tailwind‑style utility classes (or your own CSS)
  • Babel Standalone (optional) for in‑browser JSX
  • Vercel for zero‑config deploys

Quick Start (no build step)

  1. Clone the repo

    git clone https://github.com/Siddhesh2377/structured-prompt-builder.git
    cd structured-prompt-builder
  2. Open index.html directly in the browser or serve the folder:

    npx serve .
  3. Start editing src/app.jsx (or the inlined script). Refresh to see changes.

Usage

  1. Fill out the Prompt Composition fields (Role, Task, etc.).
  2. Use Sections to add Constraints, Steps, Inputs, and Examples.
  3. Switch Preview tabs (MD/JSON/YAML). Click Copy or Download.
  4. Save to the local Prompt Library; later Load, Duplicate, or Delete.
  5. To Import, choose a JSON file that matches the app’s schema.

Gemini Prompt Optimizer (optional)

  1. Paste your Gemini API key (stored locally under gemini_api_key).
  2. Choose a model (e.g., gemini-1.5-flash) and an Output format (MD/JSON/YAML).
  3. Click Generate with Gemini.

What it does:

  • Fixes spelling/grammar and clarifies wording.
  • Preserves the original structure/keys and array order/length.
  • Returns only the selected format—no commentary or code fences.

Tip: For the strictest structure preservation, choose JSON as the output format.

Star History Chart

Project Structure

structured-prompt-builder/
├── public/
│   ├── favicon.ico
│   ├── image.png
│   ├── robots.txt
│   ├── sitemap.xml
│   └── site.webmanifest
├── src/
│   ├── app.jsx              # Main application logic (builder + library + Gemini)
│   ├── components/
│   │   └── Section.jsx      # Reusable list editor
│   └── utils/
│       └── jsonToYaml.js    # JSON → YAML helper (small, dependency‑free)
├── index.html               # Entry point (loads React UMD, app script, styles)
└── vercel.json              # Static deploy config

Deployment (Vercel)

vercel

Vercel will detect a static site and deploy automatically.

Privacy & Storage

  • No server: All data (library items, API key) lives in your browser (localStorage).
  • Keys are never sent anywhere except directly to Google’s Gemini endpoint when you click Generate.

Roadmap / Contributions

PRs and ideas are welcome. Potential improvements:

  • Prompt metadata (name, version, author, tags)
  • Template gallery & sharing
  • Cloud export/import providers (Drive, Dropbox, GitHub Gist)
  • Streaming + token usage stats

Fork → branch → PR. Please include a brief description and before/after screenshots for UI changes.

Structured Prompt Builder

Sponsor this project

License

MIT. See LICENSE.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for structured-prompt-builder

Similar Open Source Tools

For similar tasks

For similar jobs