Visual prompt engineering for AI coding assistants. Design your app architecture with drag-and-drop components, then generate optimized prompts tailored to your stack and experience level.

cd backend
pip3 install -r requirements.txt
python3 main.py

The backend will run on http://localhost:8000

cd frontend
npm install
npm run dev

The frontend will run on http://localhost:5173

• Component Palette: Drag 5 different component types onto the canvas:

  • User Input (blue)
  • Logic Block (purple)
  • Context/API (orange)
  • Database (green)
  • Output (yellow)

• Visual Canvas: Connect components by dragging between handles to define data flow

• Smart Analysis: Click "Generate Prompt" to answer clarifying questions about your project

• RAG-Enhanced Prompts: Retrieves relevant best practices from a knowledge base to enhance your prompt

MainFrame uses RAG to enhance generated prompts with relevant best practices:

1. Knowledge Base: A curated collection of documents about tech stacks, best practices, and architectural patterns (backend/knowledge_base.py)

2. Retrieval: When you generate a prompt, the system:

   • Extracts node types from your architecture (userInput, database, etc.)
   • Analyzes your component descriptions for keywords
   • Scores each knowledge document based on relevance
   • Returns the top 3 most relevant documents

3. Augmentation: The retrieved documents are:

   • Displayed in the UI with relevance scores
   • Injected into the generated prompt as "Best Practices" section

• React Frontend Best Practices
• API Integration Patterns
• Database Design Principles
• Input Validation & Security
• Authentication & Authorization
• Data Display & Visualization
• Scalability Considerations
• Error Handling Patterns

MainFrame includes a custom neural network built entirely from scratch using only NumPy - no PyTorch, TensorFlow, or any ML framework.

Rates the quality of component descriptions (0-100%):

Input Layer (208 neurons)
      ↓ weights + bias
Hidden Layer 1 (64 neurons, ReLU)
      ↓ weights + bias
Hidden Layer 2 (32 neurons, ReLU)
      ↓ weights + bias
Output Layer (1 neuron, Sigmoid) → Score 0-1

All neural network components are manually implemented in backend/neural_network.py:

# Forward Pass
Z1 = np.dot(X, W1) + b1      # Matrix multiplication
A1 = np.maximum(0, Z1)        # ReLU activation
output = 1 / (1 + np.exp(-Z3)) # Sigmoid activation

# Backpropagation
dW = (1/m) * np.dot(A.T, dZ)  # Gradient calculation
W -= learning_rate * dW       # Weight update

• Dataset: 40 labeled examples (description → quality score)
• Epochs: 2000 iterations
• Learning Rate: 0.05
• Total Parameters: ~15,000 weights

Demonstrates understanding of fundamental AI/ML concepts:

• How neural networks learn through backpropagation
• Matrix mathematics behind deep learning
• Gradient descent optimization
• No black-box dependencies

• Frontend: React + Vite + TypeScript + ReactFlow + Tailwind CSS
• Backend: FastAPI (Python) with RAG pipeline
• AI: Google Gemini + OpenAI GPT-4o-mini
• Neural Network: Custom implementation (NumPy only)