PromptCraft AI 🚀

An Advanced Prompt Engineering Studio and Multi-Functional AI Assistant

PromptCraft AI is a premium, developer-aesthetic web application designed to demonstrate and teach advanced prompt engineering methodologies. Rather than acting as a standard, generic chatbot clone, the platform functions as an educational prompt IDE that highlights how structuring LLM inputs alters, controls, and improves response quality.

The system leverages the high-speed Groq Inference Engine mapping LLaMA 3.3 (70B parameters), executing completions and structured analyses in milliseconds.

---

📂 Repository Structure & Project Assets

Here is the structured overview of the PromptCraft AI repository and its associated technical resources:

PromptCraft-AI/
├── frontend/                     # React Vite client codebase
│   ├── src/                      # App components, pages, hooks, and context
│   ├── package.json              # Frontend dependency registry
│   └── README.md                 # Frontend instructions
│
├── backend/                      # Flask REST API server codebase
│   ├── app.py                    # Main app controller & routing endpoints
│   ├── requirements.txt          # Python dependencies
│   ├── prompts/                  # Prompt engineering template registry
│   └── services/                 # Groq LPU completion clients
│
├── docs/                         # Technical documentation & blueprints
│   ├── Architecture_Diagram.png  # Sequence flowchart of request execution
│   ├── Prompt_Design.pdf         # Technical breakdown of 5 core prompt designs
│   ├── Testing_Report.pdf        # Test logs, verification tables, & API latency data
│   └── User_Guide.pdf            # Practical operations manual for assistant functions
│
├── screenshots/                  # High-definition application interface captures
│   ├── 01_Landing_Page_Hero.png  # Hero view of the homepage & centerpiece
│   ├── 02_Prompt_Duel_Comparison.png # Side-by-side prompt battle console
│   ├── 03_AI_Assistant_Workspace.png # Multi-role playground with active recall guide
│   ├── 04_Prompt_Library.png     # Catalog card deck of prompt blueprints
│   ├── 05_Prompt_Playground_Analysis.png # 5-criteria grading metric score sheets
│   └── 06_Technical_Documentation.png # Embedded user guides & design handbook
│
├── PPT/                          # Presentation decks
│   └── PromptCraft_AI.pptx       # Slide deck explaining value props & architecture
│
├── PromptCraft_AI_Demo.mp4       # 2-minute high-definition silent demo video
└── README.md                     # Main repository workspace documentation

📄 Document Registry

• Architecture Diagram: Check the system sequence flow at docs/Architecture_Diagram.png showing client-server interaction and Groq Cloud completion layers.
• Prompt Design Document: Read docs/Prompt_Design.pdf for a complete deconstruction of persona rules, negative constraints, and schema injections.
• Testing Report: Inspect docs/Testing_Report.pdf for test validation parameters, STAR interview templates, and LLaMA latency logs.
• User Guide: Refer to docs/User_Guide.pdf for instructions on using the playground optimizer, collapsing panels, and logging telemetry.
• Pitch Slide Deck: Review the presentation slides at PPT/PromptCraft_AI.pptx.
• Demo Video: Play the 2-minute walkthrough at PromptCraft_AI_Demo.mp4.
• Screenshot Gallery: View the full suite of interface captures in screenshots/ (01_Landing_Page_Hero.png to 06_Technical_Documentation.png).

---

🏗️ System Architecture

                                +-----------------------------------+
                                |            React Web App          |
                                |     (Vite + TS + Tailwind + FM)   |
                                +-----------------------------------+
                                                  |
                                                  | CORS REST APIs
                                                  v
                                +-----------------------------------+
                                |             Flask API             |
                                |       (app.py + python-dotenv)    |
                                +-----------------------------------+
                                       |                     |
                      Invoke Groq LPU  |                     | Append telemetry
                      completions API  v                     v
                +----------------------------+        +----------------------+
                |          Groq Cloud        |        |    feedback.json     |
                | (llama-3.3-70b-versatile)  |        | (Local JSON database)|
                +----------------------------+        +----------------------+

---

✨ Key Features

1. 4 Specialized AI Modules:
   • Question Answering: Objective facts, interactive professor analogies, or strict markdown headings.
   • Text Summarization: Executive 100-word summaries, key takeaway extraction, or ELIF (Explain Like I'm Five) layouts.
   • Creative Content Drafting: Narrative storyteller, poetic meter composer, or structured academic essays.
   • Study Advisor: Customized day-by-day learning roadmaps, active-recall study tables, or mock interview prep sheets.
2. Prompt Engineering Inspector: below every assistant output, inspect the raw system prompts and user templates populated with parameters.
3. Prompt Battle Showcase: side-by-side comparison of lazy, generic prompts vs. structured engineered prompts.
4. Prompt Optimization Playground: analyze raw queries, calculate a detailed 100-point structure score (Clarity, Specificity, Context, Constraints, Formatting), and automatically rebuild them into premium instructions.
5. Telemetry Feedback System: log helpfulness votes and qualitative reviews locally into a JSON database.

---

🛠️ Tech Stack

• Frontend: React, TypeScript, Vite, Tailwind CSS, Framer Motion (page animations), Lucide React (outline icons), and React Markdown.
• Backend: Python, Flask, Flask-CORS (Cross-Origin Resource Sharing), Requests (HTTP Groq API client), python-dotenv.
• Inference: Groq API Endpoint (Model: llama-3.3-70b-versatile, configurable).

---

🚀 Installation and Setup

Prerequisites

• Node.js (v18+)
• Python (v3.9+)

1. Environment Configurations

Create a .env file in the backend/ directory:

PORT=5000
GROQ_API_KEY=your_groq_api_key_here
DEFAULT_MODEL=llama-3.3-70b-versatile
FLASK_ENV=development

2. Start the Backend API

# Navigate to backend
cd backend

# Create a virtual environment and activate
python -m venv venv
source venv/bin/activate  # On Windows use: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Start Flask server
python app.py

The server will boot on http://localhost:5000.

3. Start the React Frontend

# Navigate to frontend (from root)
cd frontend

# Install node modules
npm install

# Start Vite dev server
npm run dev

The frontend application will spin up on http://localhost:5173.

---

🧪 Running Automated Tests

To verify Flask API logic, safe placeholder formatting, and feedback telemetry:

cd backend
python -m unittest tests/test_api.py

---

📚 Prompt Engineering Methodologies Used

• Role Persona Adoption: Restricts token selection to matching semantic frameworks (e.g. You are an expert curriculum designer...).
• Hard Content Constraints: Directs LLM outputs to respect specific length boundaries (e.g. total response MUST be under 100 words).
• Strict Layout Schemas: Demands structured Markdown outlines or tables, reducing random formatting behaviors.
• Context Injections: Passes user parameters (timeline, study hours, genre, tone) directly to instructions.