Welcome to Phase Flow 🌊

Hey there! 👋 Ever felt like you're drowning in a sea of project requirements, trying to figure out where to even start? Phase Flow is here to be your life raft.

It’s an intelligent project management tool that takes your high-level ideas and magically transforms them into a structured, actionable roadmap of development tasks. Just paste in your vision, and let the AI do the heavy lifting.

---

✨ What's Inside?

• AI-Powered Task Generation: Simply paste your Product Requirements Document (PRD), and watch as the app builds a complete project plan, neatly organized into phases, tasks, and sub-tasks.
• Customize Your Project: Tell the AI what you're building. Specify the Application Type (Web, Mobile, etc.) and your preferred Technology Stack (Next.js, React, etc.) to get more tailored results.
• Choose Your AI Brain: Switch between different Gemini models. Need it fast? Use Gemini 2.5 Flash. Need more power? Gemini 1.5 Pro has your back.
• Refine on the Fly: The first draft isn't the final word. After the initial plan is generated, you can give the AI more instructions to tweak, add, or completely change tasks.
• Clean, Structured View: All your tasks are presented in a clean, nested accordion layout, so you can see the big picture or dive into the details.
• Export and Go:
  • Copy the entire plan as a JSON object.
  • Export a checklist-ready Markdown file to drop right into your favorite project management tool.
• Bring Your Own Key (BYOK): The app uses your personal Gemini API key, ensuring all AI operations are private and secure. Your key is never stored.

🚀 How to Use It: A Visual Guide

Here’s a quick tour of how to get your first project plan generated.

Step 1: Write Down Your Vision

Paste your Product Requirements Document (PRD) into the main text area. The more detail you provide, the better the AI can structure your project.

Step 2: Configure Your Project

Select the type of application you're building and the technology stack you plan to use. This helps the AI tailor the tasks to your specific needs.

Step 3: Set Up Your API Key & Model

You'll need a Google AI API key to use the app.

1. If you don't have one, get a free key from Google AI Studio.
2. Expand the "API Keys" section and paste your key. Your key is never stored by the app.

You can also expand "Advanced Settings" to choose the Gemini model you'd like to use.

Step 4: Generate & Refine!

Hit the Generate Tasks button and watch the magic happen. Within moments, you'll have a complete project roadmap.

The output is a clean, interactive accordion. Each top-level item represents a phase of your project. You can expand a phase to see the individual tasks, and each task can be expanded further to view its technical description and a checklist of sub-tasks.

The first draft isn't the final word. You can use the Refine Tasks section to give the AI more instructions to tweak, add, or completely change the plan. For example, you could ask it to "add a mobile version" or "use a different database."

🛠️ The Tech Stack

This project is built with some modern and powerful tools:

• Framework: Next.js
• AI Integration: Google AI Genkit
• UI: React, Tailwind CSS, and shadcn/ui
• Language: TypeScript

💻 Get It Running Locally

Ready to try it out on your own machine?

Prerequisites

Make sure you have Node.js (v18 or newer) installed.

Step 1: Install Dependencies

Open your terminal, navigate to the project's root folder, and run:

npm install

Step 2: Start the Development Server

Once everything is installed, just run this command:

npm run dev

The app should now be running! Your terminal will show you the local address, usually http://localhost:3000.

Enjoy building your next big thing!