Prompt Refiner Extension

A Chrome Extension designed to help users craft detailed, high-quality prompts through a sequential refinement process.

Features

• Interactive Questioning: Asks sequential clarifying questions to narrow down requirements.
• Skip/Edit: Users can skip questions or allow the AI to infer details.
• Modern UI: Clean, glassmorphism-inspired interface with smooth animations.
• Copy to Clipboard: One-click copy for the final refined prompt.

Technology Stack

Frontend (Chrome Extension)

• Manifest V3: Secure and modern extension architecture.
• Vanilla JavaScript: Lightweight, no-framework logic for the popup.
• CSS3: Custom variables, flexbox/grid layout, and animations (no heavy libraries).
• HTML5: Semantic structure.

Backend (Server)

• Node.js: Runtime environment.
• Express.js: Lightweight web server for API endpoints.
• Groq SDK Integration: Real-time AI calls using Llama 3 models via Groq for high-speed prompt refinement.

Project Structure

/
├── extension/          # Chrome Extension Source
│   ├── manifest.json   # Config
│   ├── popup.html      # UI Layout
│   ├── styles.css      # Styling
│   ├── popup.js        # Logic & State Management
│   └── icons/          # App Icons
│
└── server/             # Backend API
    ├── server.js       # Express Server Entry
    ├── mockAgent.js    # Logic handling Groq API calls
    └── package.json    # Dependencies

Setup & Installation

1. Configure Environment:

   • Create a .env file in the server directory.
   • Add your Groq API key:

     GROQ_API_KEY=your_groq_api_key_here

2. Start the Backend:

   cd server
   npm install
   node server.js

   The server will run on http://localhost:3000.

3. Load the Extension:

   • Open Chrome and navigate to chrome://extensions/.
   • Enable Developer mode (toggle in the top right).
   • Click Load unpacked.
   • Select the extension folder in this project.

Usage

1. Click the Refiner icon in your browser toolbar.
2. Enter your initial vague prompt concept.
3. Answer the guided questions to refine your idea (or skip).
4. Copy the generated high-quality prompt for use in ChatGPT, Claude, or Gemini.

How to get API key for Groq

1. Go to API Keys
2. create or login to your Groq account
3. Click on Create API Key
4. Copy the API key