Skip to content

Latest commit

 

History

History
116 lines (89 loc) · 2.73 KB

README.md

File metadata and controls

116 lines (89 loc) · 2.73 KB

PromptLab ⚡

PromptLab is a powerful prompt engineering and management tool built with React and TypeScript. It allows you to create, test, and manage AI prompts using a pipeline-based approach.

Features

  • 🔄 Pipeline-based prompt processing
  • 📝 Rich template management
  • 🧩 Modular addon system
  • 💾 Real-time preview
  • 🎨 Modern UI with Tailwind CSS and shadcn/ui

Getting Started

  1. Clone the repository:
git clone https://github.com/yourusername/promptlab.git
cd promptlab
  1. Install dependencies:
bun install
  1. Start the development server:
bun run dev

Project Structure

  • src/ - Source code
    • lib/ - Core libraries and utilities
      • pltl/ - Prompt Lab Template Language implementation
        • templates/ - Template storage
          • prompts/ - Base prompt templates
          • assistants/ - Assistant templates
          • addons/ - Pipeline addon templates
        • interpreter.ts - PLTL interpreter
        • loader.ts - Template loader
        • types.ts - Type definitions
      • context.tsx - React context providers
      • utils.ts - Utility functions
    • components/ - React components
      • ui/ - Reusable UI components
      • app-sidebar.tsx - Sidebar component
      • copyarea.tsx - Copy text area
      • pipeline-processor.tsx - Pipeline processor
    • hooks/ - Custom React hooks
      • pltl.ts - Pipeline operation hooks
      • use-mobile.tsx - Mobile detection hook
    • App.tsx - Main application component
    • main.tsx - Application entry point
    • main.css - Global styles

The structure follows a modular approach where:

Usage

  1. Select a base prompt from the sidebar
  2. Configure any required arguments
  3. Add optional addons to modify the output
  4. Enter your input text
  5. View and copy the processed output

Pipeline System

The pipeline system allows you to:

  • Set a base prompt template
  • Add multiple addons
  • Configure arguments
  • Process input text through the entire pipeline

Example usage with the usePipelineOperations hook:

const { addAddon, removeAddon, replaceBasePLTL, updateArguments } = usePipelineOperations();

// Set base prompt
replaceBasePLTL(template);

// Add addon
addAddon(addon);

// Update arguments
updateArguments({ key: "value" });

Technologies

  • React 18
  • TypeScript
  • Vite
  • Tailwind CSS
  • Radix UI
  • Biome (Formatting)

License

MIT

Contributing

  1. Fork the repository
  2. Create your feature branch
  3. Commit your changes
  4. Push to the branch
  5. Open a Pull Request

Built with ⚡ by Torben Haack