
# From CLI Tool to Next.js App with v0: My Prompt, What It Generated, and What I Had to Fix

I have a Node.js command-line tool, [shares-profit-loss-tax](https://github.com/e-tang/shares-profit-loss-tax) (the npm package is called `sprolosta`), that reads broker CSV exports and works out trading profit and loss for each Australian financial year. It works, but only in a terminal, so I wanted a web front end for people who don't use the command line. I called the web app **Sprolo**.

In May 2025 I used [v0](https://v0.app) by Vercel (on the free plan) to generate that front end from a written prompt, then used Claude Code to split the CLI into a reusable library. Both happened on the same evening.

**The short version:**

- **v0 was good at the shell.** From one structured prompt it produced a working Next.js app with a home page, an upload/paste page, a results view, a help page, and even the "optional" extras I'd asked for.
- **The logic it produced was placeholder.** Its profit/loss calculation and CSV parsing didn't match real broker exports. A real CommSec CSV would have produced zero trades.
- **Some generated settings need undoing** before you rely on the code: TypeScript and ESLint errors are ignored at build time, and the Next.js version it pinned has since had a critical security fix.
- **The UI was the quick part.** Wiring the real calculation engine into it took months of commits. The finished app went live in May 2026, which I wrote up in [AI Beyond the UI: From v0 Prototype to a Finished Product](/blog/2026/05/08-ai-beyond-the-ui-from-v0-prototype-to-a-finished-product/).

## The starting point: what the CLI does

The CLI takes CSV exports from a broker and:

- parses trades (symbol, date, quantity, price, buy/sell)
- sorts them by date, tracks the average cost of each holding, and works out the profit or loss on each sell
- adjusts holdings for share consolidations and splits
- flags holdings kept for more than 12 months as eligible for the capital gains discount
- reports profit and loss per Australian financial year, plus current holdings

It has parsers for CommSec and FP Markets, and a generic one where you map the columns yourself. All of that is plain CommonJS JavaScript with no UI.

What I wanted from the web version:

- upload a CSV file or paste CSV text
- show total profit, total loss and net P&L
- a trade-by-trade breakdown with winners and losers highlighted
- work on a phone as well as a desktop

## Why v0

I picked v0 because it's made by Vercel (the Next.js team), it works from a text prompt rather than a design file, and it generates React and Next.js, which is what I wanted to use. I didn't try the alternatives (Builder.io, Locofy, Uizard, Relume and so on), so I can't compare them.

![v0's start screen on the free plan, with a recent chat called "Next.js profit calculator"](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/05/jumpstarting-my-project-ui-with-v0dev-from-cli-tool-to-web-app/2025-05-07-15-02-33.png)

v0 used to live at v0.dev. It moved to v0.app in 2025 and the old address redirects there.

## The prompt I used

This is the prompt, written as a spec. It's long on purpose: the more you pin down the stack, the pages and the data flow, the less v0 has to guess. You can paste it as-is and change the domain-specific parts.

```text
1. Framework and Setup
- Use Next.js (App Router) with TypeScript
- Include Tailwind CSS for styling
- Use ShadCN/UI (or similar modern UI library) for:
  - Form inputs
  - Layout components

2. Core Functionality
- Allow users to:
  - Upload a CSV file
  OR
  - Paste CSV-style data into a textarea
- On submit:
  - Parse data
  - Send to backend API (/api/calculate) in JSON format
  - Display profit/loss calculations from backend response

3. CSV Handling
- Use PapaParse to:
  - Parse uploaded files
  - Parse pasted CSV strings
- Normalize data into consistent JSON format for backend

4. UI Pages
- Homepage ("/")
  - Introduction to the tool
  - Brief description
- Main Tool Page ("/calculate")
  - Upload or paste CSV
  - Submit and view results
- Optional Page:
  - "Help" or CSV Format Guidelines

5. Results Display
- Show key metrics:
  - Total Profit
  - Total Loss
  - Net PnL
- Display individual trades in a table or card layout:
  - Symbol
  - Buy/Sell
  - Quantity
  - Price
  - Profit/Loss per trade
- Use conditional formatting to highlight:
  - Profitable trades (e.g., green)
  - Losing trades (e.g., red)

6. Other Notes
- Add basic form validation:
  - No empty file or empty input allowed
- Include loading indicator while fetching results
- Ensure mobile-friendly and responsive design

Optional Enhancements
- Provide sample CSV data to auto-fill textarea
- Allow users to download results as CSV or JSON
- Save last result to localStorage for quick re-access
```

## What v0 actually generated

I committed v0's output as the first commit of the Sprolo repo. It was 77 files. Here's what was in it:

<Table data={{
  "headers": ["Part", "What v0 produced", "Usable as-is?"],
  "rows": [
    ["Stack", "Next.js 15.2.4 (App Router), React 19, TypeScript, Tailwind CSS 3, shadcn/ui, PapaParse", "Yes, but upgrade Next.js (see below)"],
    ["Pages", "/ (intro), /calculate (upload or paste), /help (CSV format guide)", "Yes"],
    ["Upload and paste", "Drag-and-drop file upload and a paste tab, both parsed with PapaParse", "Yes"],
    ["Results view", "Profit, loss and net P&L cards, a trade table with green/red highlighting, a per-symbol summary", "Yes"],
    ["Optional extras", "'Load Sample Data' button, CSV and JSON download, last result saved to localStorage, loading spinner", "Yes"],
    ["UI components", "50 shadcn/ui component files, of which the app used 5 (button, card, table, tabs, textarea)", "Works, but mostly dead code"],
    ["/api/calculate", "Its own simple profit/loss calculation", "No, placeholder logic"],
    ["CSV normalising", "Guesses column names like symbol, ticker, side, quantity, price, date", "No, doesn't match real broker exports"],
    ["next.config.mjs", "ignoreBuildErrors: true and ignoreDuringBuilds: true", "Turn these off"]
  ]
}} />

Everything I'd marked "optional" was built too, so the "next steps" in the first version of this post (export, localStorage, a help page) were already done by v0. An earlier version of this post listed them as to-do items.

Here's the generated home page running locally:

![Generated Sprolo home page: "Trading Profit/Loss Calculator" with Get Started and Learn More buttons and three feature cards](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/05/jumpstarting-my-project-ui-with-v0dev-from-cli-tool-to-web-app/2025-05-07-17-35-34.png)

And the calculate page. The "Any Broker" drop-down isn't from v0: I added it afterwards when I started wiring in the CLI's broker parsers.

![Calculate Profit/Loss page with Upload CSV and Paste Data tabs, a drag-and-drop area, and an Any Broker drop-down](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/05/jumpstarting-my-project-ui-with-v0dev-from-cli-tool-to-web-app/2025-05-07-17-37-50.png)

## Problems in the generated code, and how to fix them

None of these are unusual for generated code, but they're easy to miss because the app looks finished.

### 1. The API route does its own, much simpler calculation

I asked for the front end to send JSON to `/api/calculate` and display "calculations from backend response". v0 wrote that backend itself. It keeps a running average cost per symbol, but it has no idea of financial years, the 12-month CGT discount, splits and consolidations, or broker-specific formats, and it silently gives no profit/loss for a sell it can't match to an earlier buy.

That's fine as a demo, but the numbers would not match the CLI. **Treat any calculation v0 writes as a stub** and replace it with your real logic, which is what the next section is about.

### 2. The CSV normaliser won't read a real broker export

v0's `normalizeTradeData()` looks for lower-case keys such as `symbol`/`ticker`, `side`/`type`, `quantity` and `price`. A CommSec export has headers like `Code`, `Trade Date`, `Type`, `Quantity` and `Average Price`. PapaParse keeps header names exactly as they appear, so none of those match, every row fails the validation filter, and the API returns a 400 for an empty trade list. The page then shows only a generic "Failed to calculate results".

It also maps any side value that isn't `buy` or `b` to `sell`, so an unexpected value (for example a blank) silently becomes a sale.

The fix is to parse per broker rather than guess. In Sprolo that meant passing the raw rows and the chosen broker to the CLI's existing broker parsers instead of v0's normaliser. This is where most of the integration time went: commit messages from June and July 2025 include "it seems the data normalization didn't return the data" and "trying to submit the right data to the backend".

### 3. Build errors are switched off

The generated `next.config.mjs` contains:

```js
eslint: { ignoreDuringBuilds: true },
typescript: { ignoreBuildErrors: true },
```

That lets `next build` succeed even when the TypeScript doesn't type-check. It's handy while v0 iterates, but remove both lines once the code is yours so type errors fail the build instead of reaching production.

### 4. `npm install` fails on peer dependencies

When I first ran `npm install`, it failed on dependency conflicts. The first version of this post told you to use `npm install --force`. **Don't use `--force` as a habit.** It overrides conflict checks across the whole tree.

The cause is that v0 pinned React 19 alongside packages whose peer dependencies only allowed React 16 to 18 at the time (`react-day-picker` 8.10.1 and `vaul` 0.9.6). Better options, in order:

1. Upgrade the conflicting packages. `react-day-picker` 9 and `vaul` 1 accept React 19, and that's what the Sprolo repo uses now.
2. Remove components you don't use. Of the 50 generated shadcn/ui files, the app only needed 5.
3. If you just want to run it, use `npm install --legacy-peer-deps`, which skips the peer dependency check rather than forcing everything.

### 5. Update Next.js

v0 pinned `next` 15.2.4. Since then Next.js 15 App Router apps have been hit by React2Shell, a critical remote code execution flaw in React Server Components (CVE-2025-55182, tracked for Next.js as CVE-2025-66478), fixed in December 2025. If you start from an old v0 export, upgrade to a patched Next.js release (15.2.6 or later on the 15.2 line, or a current version) and run `npm audit`. I covered the flaw in [React2Shell: Critical RCE Flaw in Next.js](/blog/2025/12/08-react2shell-critical-rce-flaw-in-nextjs--how-to-fix-it/).

## Turning the CLI into a library with Claude Code

To reuse the real calculation in the web app without copying code, the CLI had to become a library that both the CLI and the Next.js API route could call.

I did this with [Claude Code](https://code.claude.com/docs/en/overview), Anthropic's agentic coding tool that edits files in your repo directly. I ran `/init` first, which writes a `CLAUDE.md` describing the project, then asked it to convert the CLI into a library. It took a few minutes. The resulting commit:

- moved the command-line argument handling into `cli.js`
- put the processing logic in `lib.js`, exporting `processTrades`, `processTradesWithRecords`, and the models, utils and broker parsers
- added `examples/library-usage.js`
- updated the README
- changed `package.json` so the package works both ways:

```json
"main": "lib.js",
"bin": {
  "sprolosta": "./cli.js"
},
"exports": {
  ".": "./lib.js"
}
```

The old `sprolosta.js` entry point became a symlink to `cli.js`, so the existing command still worked.

Usage from code then looks like this (from the generated example):

```js
const sprolosta = require('sprolosta');

const results = sprolosta.processTrades(['./data/example-trades.csv'], {
  broker: 'commsec',
  year: 2023,
  details: true
});

console.log(results.financial_years['2023-2024'].profit);
```

In Sprolo I added the CLI repo as a git submodule, and the API route imports `processTradesWithRecords` and the broker parsers from it.

The split itself was quick. Making the library behave when called from the web app took longer. Later commit messages in the CLI repo include "called as library fails because of the data type is not complete" (July 2025) and "found a serious bug which miscalculates the profit" (August 2025). So check the numbers against known results after any AI refactor of financial code; don't assume the output is right because it runs.

A correction: the first version of this post said Claude Code was "available for free" with an Anthropic account. It isn't included in the free Claude plan. You need a paid Claude subscription (Pro or Max, or a Team/Enterprise seat that includes it) or pay-as-you-go API credits.

## How it actually went: the timeline

All dates are from the git history of the two repos and the follow-up post.

<Table data={{
  "headers": ["When", "What happened"],
  "rows": [
    ["2 May 2025, evening", "Committed v0's generated app. Later that evening, added CLAUDE.md, added the CLI as a submodule, and committed Claude Code's CLI-to-library split"],
    ["Mid May to July 2025", "Wiring the real engine into the API route: broker selector, data normalisation, getting the right data to the backend"],
    ["August 2025", "Found and fixed a profit miscalculation in the engine"],
    ["April to May 2026", "UI redesign, portfolio management, financial year fixes, support form"],
    ["May 2026", "Sprolo live at sprolo.tyosis.com"]
  ]
}} />

The v0 part took an evening. Everything after it was the real work.

## Running Sprolo yourself

The code is at [github.com/tyolab/Sprolo](https://github.com/tyolab/Sprolo). Because the calculation engine is a git submodule, clone with `--recurse-submodules`, otherwise the API route can't find `shares-profit-loss-tax/lib` and the build fails:

```bash
git clone --recurse-submodules https://github.com/tyolab/Sprolo.git
cd Sprolo
npm install          # add --legacy-peer-deps only if you hit ERESOLVE
npm run dev
```

If you already cloned without the flag, run `git submodule update --init` inside the folder. Then open `http://localhost:3000`.

## Naming and the logo

**Sprolo** comes from **S**hares, **Pro**fit, **Lo**ss (and the CLI's **ta**x, in `sprolosta`), and it sounds a bit like "sparrow". I asked [ChatGPT](https://chatgpt.com/) for a minimal, origami-style sparrow logo, and this is what it gave me:

![Sprolo logo: a blue origami-style sparrow above the word Sprolo](https://storage.googleapis.com/www-tyolab-com-blog-assets/images/blog/2025/05/jumpstarting-my-project-ui-with-v0dev-from-cli-tool-to-web-app/logo-from-chatgpt3.png)

## Would I use v0 again for this?

For the first version of a tool's UI, yes. One detailed prompt gave me pages, layout, forms, a results table and the small extras I'd otherwise put off, and it all ran locally that evening.

What I'd do differently:

- **Tell v0 the backend already exists.** Ask for the API route to call a function you'll supply, instead of letting it write a calculation you then have to find and remove.
- **Give it a real sample of your input.** Paste the actual CSV header row from your broker export into the prompt so the parser matches real data.
- **Clean up straight away:** turn build errors back on, upgrade Next.js, and delete the unused components before you build on top.

## Credits

Banner image created by ChatGPT-4o with the following prompt:

>A dynamic illustration showing a command-line interface transforming into a modern, user-friendly web application interface. Use a bright, tech-forward color palette with a subtle gradient background. Include a stylized representation of the Sprolo logo subtly integrated into the design.


<ContactFooter />


3f775e68a5d1ca48ea17cdc7aca39267eeefea50758294febc637f20d2f1a098

The v0 prompt I used to build a Next.js front end for a CLI tool, what v0 generated, the bugs and npm errors in its output, and how I wired in the real logic.

I gave v0 a structured prompt to build a web front end for my trading profit/loss CLI. Here's the prompt, exactly what it generated, the problems in that code, and how I turned the CLI into a library with Claude Code.

From CLI Tool to Next.js App with v0: My Prompt, What It Generated, and What I Had to Fix


# Video Not Autoplaying in React or Next.js? Use autoPlay, Not autoplay

**Short answer:** in JSX the attribute is `autoPlay` with a capital P. If you copy plain HTML and write `autoplay`, React doesn't recognise it, drops it, and your video loads but just sits on the first frame. Write it like this:

```jsx
<video autoPlay muted loop playsInline>
  <source src="/videos/clip.mp4" type="video/mp4" />
</video>
```

`muted` and `playsInline` aren't optional extras. Browsers block autoplay with sound, and iPhones won't play a video inline without `playsinline`.

## What happened

I made a short clip with [Sora](https://sora.com/) and tried to use it in a Next.js page. The video loaded, but it never started playing. This is the code I had (with a public Wikimedia test clip instead of my Sora video):

```jsx
export default function Page() {
    return (
        <div>
            <h1>Video</h1>
            <video autoplay muted loop>
                {/* This is not the video I created with Sora */}
                <source src="https://upload.wikimedia.org/wikipedia/commons/0/09/Frozen_drop.webm" type="video/webm" />
                Your browser does not support the video tag.
            </video>
        </div>
    );
}
```

It looks right because it's valid HTML. In React it isn't, and the fix was changing `autoplay` to `autoPlay`.

## Why lowercase autoplay is ignored

React uses camelCase names for DOM attributes: `className`, `tabIndex`, `autoPlay`, `playsInline`. A lowercase `autoplay` is treated as an unknown attribute. Writing it with no value means `autoplay={true}`, and React won't put a boolean `true` on an attribute it doesn't know. So it's left out of the HTML.

You can see this in the browser console in development:

```
Invalid DOM property `autoplay`. Did you mean `autoPlay`?
```

Here is what React 19 actually renders for each spelling. It is the same from server rendering and in the browser:

<Table data={{
  "headers": ["What you write in JSX", "Rendered video tag", "Autoplays?"],
  "rows": [
    ["autoplay", "no autoplay attribute (plus a console warning)", "No"],
    ["autoPlay", "autoplay=\"\"", "Yes"],
    ["autoPlay=\"true\"", "autoplay=\"\" (plus a console warning)", "Yes"],
    ["autoPlay=\"false\"", "autoplay=\"\" (plus a console warning)", "Yes, which is probably not what you meant"],
    ["autoPlay=\"\"", "no autoplay attribute", "No"]
  ]
}} />

*An earlier version of this post suggested `autoPlay="true"`, `autoPlay="autoplay"` or `autoPlay=""`. The first two work but trigger a warning, and `autoPlay=""` doesn't work at all because React treats an empty string as false. Just write `autoPlay` on its own, or `autoPlay={true}`.*

The same applies to the other video attributes. Use `playsInline`, not `playsinline`. `muted`, `loop`, `controls` and `poster` are already single words, so they're fine as they are.

## The fixed component

```jsx
export default function Page() {
    return (
        <div>
            <h1>Video</h1>
            <video autoPlay muted loop playsInline>
                <source src="https://upload.wikimedia.org/wikipedia/commons/0/09/Frozen_drop.webm" type="video/webm" />
                Your browser does not support the video tag.
            </video>
        </div>
    );
}
```

This works as a Server Component in the Next.js App Router. It doesn't need `"use client"` because there's no state or effect.

## If it still won't autoplay

Getting the attribute name right is the usual cause. If the video still sits there, check these:

1. **Is it muted?** Chrome, Safari and Firefox all block autoplay with sound unless the user has already interacted with the site. `muted` is the reliable way through. If you need sound, start muted and add an unmute button.
2. **Is `playsInline` there?** On iPhone, a video without `playsinline` won't play inline on the page. Add `playsInline` for any background or hero video.
3. **Can the browser play the format?** `.webm` isn't supported everywhere, particularly on older Apple devices. H.264 MP4 is the safe default. You can list both and the browser picks the first one it supports:

   ```jsx
   <video autoPlay muted loop playsInline>
       <source src="/videos/clip.webm" type="video/webm" />
       <source src="/videos/clip.mp4" type="video/mp4" />
   </video>
   ```

   If you need to convert or shrink a clip, my [FFmpeg on Ubuntu commands](/blog/2025/02-24-handy-linux-ubuntu-commands-for-video-processing/) post has the commands.
4. **Is the device in a power-saving mode?** Some phones in low power or data-saver modes don't autoplay video at all. Your code can't override that, so set a `poster` image so the page still looks right.
5. **Is the file path right?** In Next.js, files in `public/` are served from the site root. `public/videos/clip.mp4` is `/videos/clip.mp4`, not `/public/videos/clip.mp4`. Check the Network tab for a 404.

## Fallback: start it with play() and catch the error

If you want to know when autoplay was blocked, or you swap the `src` after the first render, start the video from an effect. `play()` returns a promise that rejects (usually with `NotAllowedError`) when the browser refuses. In the App Router this has to be a Client Component:

```jsx
"use client";

import { useEffect, useRef } from "react";

export default function BackgroundVideo({ src, poster }) {
    const ref = useRef(null);

    useEffect(() => {
        const video = ref.current;
        if (!video) return;
        video.muted = true; // set the property as well, before calling play()
        video.play().catch((err) => {
            // Autoplay was blocked. The poster stays visible.
            console.warn("Autoplay blocked:", err.name);
        });
    }, [src]);

    return (
        <video ref={ref} src={src} poster={poster} autoPlay muted loop playsInline />
    );
}
```

Setting `video.muted = true` in code is belt and braces. React sets `muted` as a DOM property rather than an attribute when it renders in the browser, so you won't see `muted` when you inspect the element even though the video is muted.

## The video

Here's the Sora clip that started all this:

<YouTube id="q8b7NDJgDlo" title="Futuristic Cyberpunk Drive - An AI Generated Video by Sora"/>

If you're comparing AI video tools, see [Exploring AI video generation](/blog/2025/02-20-exploring-ai-video-generation/).

<ContactFooter />


db192de442d89443f3b3ab6b4be40658516e582202c2ccf7209459c08e663f7c

React video not autoplaying? JSX needs autoPlay (capital P); lowercase autoplay is dropped. Plus muted, playsInline and a play() fallback for Next.js.

Why a muted, looping video won't autoplay in React or Next.js when you write the HTML attribute autoplay, and the fix: autoPlay with a capital P, plus muted and playsInline for browser autoplay rules.

Tag: React

Tag: React

From CLI Tool to Next.js App with v0: My Prompt, What It Generated, and What I Had to Fix

Video Not Autoplaying in React or Next.js? Use autoPlay, Not autoplay