So, You Want to Run This App? A PM's Guide to Local Glory

Well, hello there, magnificent Product Manager! Heard you wanted to get your hands dirty and see the magic happen locally. Smart move. It's like being your own wizard, but with fewer pointy hats and more terminal commands.

This guide will take you from "What is this folder?" to "Wow, I'm basically a developer now" in just a few easy steps. Let's get this show on the road!

Step 1: The Pre-Game Show (Prerequisites)

Before we can party, we need to make sure the venue is set up. Here's what you'll need on your machine:

• Node.js: This is the engine that makes all the JavaScript go vroom. If you don't have it, you can grab it from the official Node.js website. We recommend the LTS version – it's the responsible choice.
• pnpm: We use pnpm to manage our packages. It's like npm or yarn, but faster and more efficient. It's the sports car of package managers. Install it with a single command after you have Node.js:

  npm install -g pnpm

Got those? Excellent. You're already a star.

Step 2: Get The Code! (Cloning the Repo)

If you're reading this, you've probably already done this. But just in case you're reading a printout (retro!), you need to get the code from our repository.

Open your favorite terminal (it's that cool black window that makes you look like a hacker) and run this command:

git clone https://github.com/JustinWhittecar/v0-prd-pilot-app
cd v0-prd-pilot-app

You're now in the project. Feels powerful, right?

Step 3: The "Install All The Things" Button (Installing Dependencies)

Now for the real magic. You have the code, but you need all the little helper libraries and frameworks that it depends on. Think of it as assembling your superhero team.

In your terminal, inside the project folder, run:

pnpm install

This might take a minute. Go grab a coffee. Or a tea. Or just stare intently at the screen like you understand everything that's happening. We won't judge.

Step 3.5: The Secret Ingredient (OpenAI API Key)

Here's the thing: this app uses AI to generate your documents. And to talk to the AI, you need a special key. Think of it like a backstage pass to the OpenAI concert. Without it, the app will load but won't actually do anything when you try to generate a document.

Don't worry – getting this key is easier than explaining why your last sprint took an extra week.

Getting Your OpenAI API Key

1. Head to OpenAI: Go to platform.openai.com/api-keys
2. Sign up or log in: If you don't have an account, you'll need to create one. It's free to start!
3. Create a new key: Click the "+ Create new secret key" button
4. Give it a name: Something like "PRD Pilot Local Dev" so you remember what it's for
5. Copy that key: You'll see a long string of letters and numbers. Click the copy button. IMPORTANT: You can only see this once! If you lose it, you'll need to create a new one.

Setting Up Your Environment File

Now you need to tell the app about your shiny new API key. Good news: we've made this super easy! The project comes with a template file that you just need to copy and fill in.

1. Copy the template file: In your project folder, you'll see a file called .env.example. We need to make a copy of it called .env.local. Here's how:

   Using the terminal (easiest):

   cp .env.example .env.local

   Using your file manager (if you prefer clicking):

   • Find the .env.example file in your project folder
   • Copy it (Ctrl+C or Cmd+C)
   • Paste it in the same folder (Ctrl+V or Cmd+V)
   • Rename the copy to .env.local
   • Pro tip: Files starting with a dot are hidden by default on Mac/Linux. That's normal! It's a security feature. You might need to show hidden files (Cmd+Shift+. on Mac).

2. Open your new .env.local file: Use any text editor (VS Code, Notepad, TextEdit, whatever you have)

3. Replace the placeholder with your real API key: You'll see this line:

   OPENAI_API_KEY=your-api-key-here
   

   Replace your-api-key-here with the actual key you copied from OpenAI. It should look like this:

   OPENAI_API_KEY=sk-proj-abc123xyz456EXAMPLE789
   

4. Save the file: That's it! Make sure there are no extra spaces or quotes around the key.

Important Notes (Read This!)

• Never commit this file to git: The .env.local file should stay on your machine. Good news: Next.js automatically ignores it, so you won't accidentally share your key.
• Cost: OpenAI charges for API usage, but it's cheap for testing (usually a few cents per document). You can set spending limits in your OpenAI account settings.
• Multiple keys: If you're working in a team, each person needs their own API key. Don't share keys!

How to Know It's Working

When you run the app (next step!), if everything is set up correctly, you'll be able to generate documents. If you see an error like "Failed to generate PRD" or "API key missing," double-check:

1. Is your file named exactly .env.local?
2. Is the line exactly OPENAI_API_KEY=your-key with no spaces around the =?
3. Did you save the file?
4. Is the file in the root folder of the project (same level as package.json)?

Step 4: Let There Be Light! (Running the App)

The moment of truth has arrived. All your hard work (and our coding) is about to pay off. To start the local development server, run this command:

pnpm dev

Your terminal will spring to life with a bunch of text, and somewhere in there, it will say something like:

✓ Ready in 1.2s ➜ Local: http://localhost:3000

That http://localhost:3000 is your golden ticket. Open that URL in your web browser.

Step 5: You Did It! (Using the App)

Behold! The application, running right there on your very own machine. Click around. Break things. See what happens. This is your personal playground.

You now have the power to see changes live as our brilliant developers (ahem) push them. You're not just a PM anymore; you're a PM with a local dev environment. Put that on your LinkedIn profile.

Bonus Level: Tweaking the Prompts (Your New Superpower)

Now that you've conquered running the app locally, let's talk about the really fun part: making it your own. This app uses AI prompts to generate different types of documents, and guess what? You can customize those prompts without writing a single line of complicated code.

Where the Magic Lives

All the prompt templates live in the lib/templates/ folder. Think of this folder as your prompt wardrobe – different outfits for different occasions:

• prdpilot.ts – The classic PRD (Product Requirements Document)
• lean-canvas.ts – Lean Canvas format for startup-style planning
• pr-faq.ts – Amazon-style Press Release / FAQ
• jira-epic.ts – Jira Epic format
• one-pager.ts – Quick one-page summaries

How to Open and Edit a Prompt

1. Find the file: Navigate to lib/templates/ in your project folder
2. Open it: Use any text editor you like (VS Code, Sublime, even Notepad if you're feeling nostalgic)
3. Find the template function: Each file has a function that returns a big text string – that's your prompt!

For example, in prdpilot.ts, you'll see something like this around line 9:

return `You are an experienced product manager. Draft a crisp, opinionated Product Requirements Document (PRD) in Markdown format.

What You Can Tweak (And What It Does)

Here are the fun knobs you can turn:

1. The Personality & Tone

• What it is: Lines like "You are an experienced product manager" or "Tone: clear, testable, and specific"
• What it does: Changes how the AI "thinks" and writes. Want it more casual? More technical? This is where you set the vibe.
• Example tweak: Change "experienced product manager" to "startup founder" or "enterprise architect"

2. The Document Structure

• What it is: The numbered sections list (like "1) Problem & Context, 2) Users & Jobs-To-Be-Done")
• What it does: Defines what sections appear in your output document
• Example tweak: Add "10) Timeline & Milestones" or remove "7) Risks & Open Questions" if you don't need them

3. The Instructions

• What it is: Lines that start with "Instructions:" or specific guidance like "Avoid vague goals"
• What it does: Tells the AI how to write each section
• Example tweak: Add "Keep each section under 200 words" or "Include specific examples for each point"

4. The Metrics Framework

• What it is: The metricsInstruction variable (around line 4-7 in prdpilot.ts)
• What it does: Determines which success metrics framework to use (HEART, AARRR, OKRs)
• Example tweak: Hard-code your favorite framework by changing the instruction text

5. The Input Variables

• What it is: Things like ${answers.problem} or ${answers.usersContext}
• What it does: These are placeholders that get filled with what the user types into the app
• Heads up: Don't change the ${} variable names or things will break! But you can add text around them.

Testing Your Changes

The best part? You can see your changes instantly:

1. Save your edited file (that's it, really)
2. Restart the app if it's running: Stop it (Ctrl+C in terminal) and run pnpm dev again
3. Go through the wizard in your browser and see your customized prompt in action!

If something breaks, don't panic. Just undo your changes (Ctrl+Z is your friend) and try again. The worst that happens is you get a weird output – no servers will explode, we promise.

Pro Tips for Prompt Tweaking

• Start small: Change one thing at a time so you know what works
• Be specific: The more specific your instructions, the better the output
• Test with real inputs: Use actual project ideas to see if your changes help
• Keep a backup: Copy the original prompt text somewhere safe before you start experimenting

You're now officially dangerous (in a good way). You can shape how this app thinks and writes, all without touching the scary parts of the codebase. Go wild!

---

And that's it! If you run into trouble, the first step is to tell a developer, "It's not working." The second step is to send them a screenshot. You've got this. Now go forth and manage projects with the confidence of someone who has stared into the localhost abyss and tweaked some prompts like a boss.