CodePrompt Optimizer

CodePrompt Optimizer

🚀 This project is generated by Firebase Studio

A Next.js (App Router) and React application designed for optimizing and comparing AI-generated code prompts. It enables you to quickly refine your prompts, then test and compare their outputs side-by-side to identify the best-performing version and enhance your coding productivity.

Features

• Prompt Optimization: Employs an AI-driven workflow to refine your initial code prompts.
• Example Testing: Generates code outputs for both the original and the optimized versions of your prompts.
• Output Comparison: Allows side-by-side viewing of outputs and provides a summary of key differences.
• Multi-Language Support: Supports a range of common programming languages, including C#, Python, JavaScript, TypeScript, Java, C++, and Go.
• Real-Time Feedback: Provides real-time notifications during optimization, testing, and comparison operations.
• Convenient Source Access: Includes a GitHub link in the header for easy navigation to the source code.

Demo

• Live Demo: https://codeprompt.blazorserver.com/
• Source Repository: https://github.com/neozhu/codeprompts-optimizer

Installation

1. Clone the repository

   git clone https://github.com/neozhu/codeprompts-optimizer.git
   cd codeprompts-optimizer
   

2. Install dependencies

   npm install
   # or
   yarn install
   

3. Set up environment variables Create a .env.local file in the project root directory with the following content:

   NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key
   

   Replace your_openai_api_key with your actual OpenAI API key.

4. Launch in development mode

   npm run dev
   # or
   yarn dev
   

   The application will start and be accessible at http://localhost:3000/.

Usage Guide

1. Select your desired programming language from the dropdown menu (C# is selected by default).
2. Input your code prompt into the provided text area.
3. Click the Optimize Prompt button to generate an AI-enhanced version of your prompt.
4. Once the optimized prompt is available, click Test Prompts to view the code outputs generated by both the original and optimized prompts.
5. Utilize the Compare Outputs feature to obtain a concise summary of the differences between the two outputs.

Project Structure

├── app/                   # Next.js App Router directory for pages
│   └── page.tsx           # Main application/home page component
├── components/            # Directory for reusable UI components
│   ├── ui/                # Atomic UI components based on Tailwind CSS
│   └── ...                # Other custom components
├── ai/                    # Definitions for AI workflows (e.g., optimization, code generation, summarization)
├── hooks/                 # Custom React hooks (e.g., useToast for notifications)
├── public/                # Directory for static assets like icons and images
├── styles/                # Global styles and Tailwind CSS configuration
└── README.md              # Project README file (this document)

Contributing

Contributions are highly welcome! Please feel free to submit an issue or open a pull request:

1. Fork the repository.
2. Create a new branch for your feature: git checkout -b feature/YourAmazingFeature.
3. Commit your changes: git commit -m 'Add some AmazingFeature'.
4. Push to the branch: git push origin feature/YourAmazingFeature.
5. Open a Pull Request for review.

License

This project is licensed under the MIT License. Please see the LICENSE file for full details.