Building a GenAI Product from Scratch: A PM's Guide

Introduction: AI is reshaping products, but building a GenAI-powered feature or tool requires careful planning. In this guide, we'll walk through launching a GenAI product from zero: defining the user problem, collecting data, iterating on model prompts, and rolling out. By combining traditional product steps with ML best practices, you'll see how to deliver real user value with AI (while avoiding common pitfalls like bias or scope creep).

1. Define the User Problem

Every successful AI feature starts by identifying a clear user need. Suppose you want to automate legal document review. First, talk to users (lawyers, paralegals) about their pain points. Perhaps they spend hours reading similar contracts – that's our job-to-be-done. Write a concise problem statement: "Enable a lawyer to review contracts 50% faster with AI assistance." This sets the goal and constraints (e.g. accuracy vs speed). Use a brief PRD excerpt to illustrate:

Problem: Manual contract review is slow and error-prone.
Goal: Reduce average review time by 50%.
Constraint: 95% accuracy must be maintained.

This aligns with the Amazon "customer obsession" principle – solve real problems first.

2. Collect Data and Choose a Model

With the problem in hand, gather data. For our contract example, compile a dataset of past contracts and lawyer edits (ensuring compliance and privacy). Labeling may involve highlighting relevant clauses. Then choose a model: perhaps start with an open-source LLM (e.g. LLaMA or GPT) that can be fine-tuned. Evaluate cost vs performance. Create a table of options:

Be sure to handle data privacy: if contracts have confidential info, consider on-premise hosting.

3. Prototype and Experiment

Build a minimum viable version to test feasibility. For example, write a simple prompt like "Extract key clauses from this contract" and test the model's output. Run small experiments with varied prompts and few-shot examples. Document results; maybe create a dashboard chart of "prompt version vs accuracy" as you iterate. Use feature flags to toggle new prompts. Each week, deploy an updated prompt and monitor if it improves results. Iterating quickly (e.g. weekly sprints) helps converge on a solution.

Iterating on GenAI prompts with A/B testing

User submits a question → Test Model v1 and Model v2 in parallel → Evaluate which performs better → If better, deploy update; if not, tweak the prompt and iterate again.

4. Define Success Metrics

From Day 1, decide how you'll measure impact. Metrics could include time saved, accuracy, and user trust. Set up a KPI dashboard: for instance, track "average review time (min)" before vs after. Maybe use a simple table:

Instrument these metrics with an analytics tool. Ensure you log model confidence and correctness (maybe via crowd-sourced review or user feedback).

5. Deploy and Roll Out

When the prototype meets criteria (e.g. 50% time reduction in tests), plan the rollout. Use a feature flag to gradually expose the GenAI assistant to users. For example, first enable for 10% of reviewers at select departments. Monitor system health (latency, error rate). If all goes well, scale to 100%. Consider also how to handle unknown inputs: include fallbacks (e.g. revert to manual).

Simplified data flow of a GenAI contract review feature

The flow includes: Lawyer → FrontEnd → GenAI API → FrontEnd returns analysis → Display highlights to user.

6. Learnings and Next Steps

After launch, analyze results. Perhaps you find the model makes errors on certain clause types; feed that back to retrain the model. Update the roadmap: maybe next quarter add a "question answering" feature. Share learnings in an internal demo. For example: "We automated 60% of review work. Next, we will improve robustness on edge cases." This communicates a growth mindset and data-driven iteration.

Conclusion & CTA: By following these steps—user research, data collection, iterative experimentation, and controlled rollout—you can successfully launch a GenAI product. As a PM, always tie AI features back to user value and metrics. Try it out: pick a simple process at your company and prototype a GenAI assistant. Share your experience or questions in the comments below!

Meta description: A step-by-step guide to defining, prototyping, and launching a GenAI product. Learn how to use user research and metrics to build AI features. () => ({ theme, toggle: () => setTheme(t => t === 'dark' ? 'light' : 'dark') }), [theme] ); return ( <ThemeContext.Provider value={value}> </ThemeContext.Provider> ); }

## Virtualise Long Lists

If you're rendering more than ~100 items, virtualisation is non-negotiable:

```tsx
import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }: { items: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 48,
  });

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map(virtualItem => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: virtualItem.start,
              height: virtualItem.size,
              width: '100%',
            }}
          >
            {items[virtualItem.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

Code Splitting Done Right

Dynamic imports with React.lazy are great, but the real wins come from route-based splitting combined with prefetching:

// Next.js does this automatically with the App Router
// For manual control, use dynamic imports:
import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <ChartSkeleton />,
  ssr: false, // Skip SSR for client-only components
});

Image Optimisation

Images are often the heaviest assets on a page. Use next/image and follow these rules:

1. Always specify width and height to prevent layout shift
2. Use priority for above-the-fold images to preload them
3. Use loading="lazy" for everything else (this is the default)
4. Serve modern formats — Next.js handles WebP/AVIF automatically

Measuring What Matters

Don't optimise blindly. Use these tools:

• React DevTools Profiler — find components that re-render too often
• Lighthouse — automated performance audits
• Web Vitals — track LCP, FID, CLS in production
• Bundle Analyzer — find what's bloating your bundle

Key Takeaways

1. Memoize context values and expensive computations
2. Virtualise any list longer than 100 items
3. Split code at route boundaries and prefetch
4. Optimise images with next/image
5. Measure before and after every optimisation

Performance work is never done, but these patterns will get you 80% of the way there. The rest is profiling, measuring, and iterating.