React App with Claude

a complete dumbass uses AI to create something that actually works!

I had a problem to solve in my professional life involving tax law and instead of using a spreadsheet to think my way through the problem, I went right to the Oracle: Claude.AI, specifically Claude 3.5 Sonnet, the best-in-class offering from Anthropic that gets solid reviews. I was listening to the founders of Cursor discuss their product on the Lex Fridman podcast earlier and at one point he asks them what the best AI model is for coding. Their response was somewhat surprising, as I’d expected to hear that the DeepSeek Coder was leading the pack or even ChatGPT-4o. But no. They said Claude consistently returns the best code

.

My process was fairly simple. I started with a text file on my laptop and started describing what I wanted. A React app, with a table at the top using data pulled from a screen shot of my client’s existing portfolio tracker. To simplify, I only used the first four publicly traded equities, but the table shows purchase price and current value, from that it can calculate the cost basis. The problem is, how do we transfer those holdings to the limited partners without saddling either the remaining funds or the withdrawing limited partners with a disproportionate share of the capital gains, and hence a greater tax liability?

It’s not super hard to do as math, basically just a weighted average but it then gets tricky from a “what if” perspective. What if Bob wants to pull out $800,000 but Jane wants to withdraw $2.4 million. How many shares of each stock do we transfer? But then what if Bob changes his mind and says No, let’s only pull $650,000 and leave the rest in the fund?

I figured a React app would be best as an interactive dashboard. Why? I have no idea. I think I saw someone tweet about it and the AI created a React web app with a slider. So I thought, Ooh, yeah let’s have a slider.

I wrote a plain text document describing the problem, setting out the limitations, and describing how to present the information. I wanted one table at the top called “Before” restating the current portfolio, then another table at the bottom called “After,” with a subtable or “card” for each LP with a slider and then rows underneath calculating the specific mix of stocks to withdraw and a total withdrawn. So an LP can go to the dashboard, move the slider to get the right percentage withdrawal or just total dollars pulled out of the fund, and it automatically in real time recalculates what the composition of the fund will look like after.

Then I copy-pasted each chunk of instructions into Claude and asked it to present it to me as an Artifact, a side window with the code (Javascript I think? Maybe Typescript? I literally have no idea) and it has a toggle so you can preview what it looks like.

I iterated on that for a while — make the cards narrower, no wider; give me a shadow behind each card, ok now in color, no not that color — and tried to make sure that my text file with the prompts was up to date so I could reproduce it if needed.

Here’s an example of a few of the prompts:

Each card should have the LP's name and a slider for each limited partner showing a value of between 0 and 90 to represent the total value of the withdrawal. Please show that value selected next to the slider.

Below the slider, for each limited partner make four lines showing the number of shares of each stock that would be hypothetically withdrawn to create that total. Please note that a fractional share may not be withdrawn. Only whole shares. Please indent the row slightly from the left margin under each limited partner's name. Each row should have the Name of the stock, number of shares, and the total value of those shares using the current value price from the Before table.

Add a fifth row showing the dollar value of the hypothetical withdrawal, calculated by summing the dollar value of each row. 

Add a sixth row showing  the tax burden of that limited partner's hypothetical withdrawal, calculated by using the relevant values from the Before table. Please display the dollar values in the right hand column of these rows for the limited partner hypothetical withdrawals using commas for thousands and millions -- just like you did in the Before table

Not every paragraph was a new prompt. I think I put two or three, or maybe all four of these, into one prompt. (Can’t give you the full prompt sequence since it contains client information and is privileged, but it’s not important to the story anyway.)

And as it went, it would retype the code in the Artifact window. Candidly, it wasn’t fast. I think it would redo the entire project from the beginning and not cache anything, so it was pretty slow. I sort of expected some of the changes to just jump into the code and fix it, like the background color. I’m not sure how many tokens I used up or how close I came to hitting my daily limit, but I’m on the $20 per month pro plan so I figured they’d give me some slack.

Here’s the best part: when I was satisfied, I discovered a button down in the lower corner of the Artifact window labeled “Publish.” Anthropic automatically turns the React code into a web app, and publishes it to the web with an obscure URL (you can keep it private if you want, but I needed to send it to the client for approval). Amazing feature!

The feedback I got was along the lines of “Why is my card pink? I want a rainbow gradient background!” which is to say, the best kind of feedback for a lawyer; all style, no substance. Yes, this is not exactly what you hire a lawyer for, but it was a question we needed answered and I got a little curious.

Total time spent, start to finish even with aesthetic tinkering: Forty-five minutes. Amazing.

I have in mind to try it in Cursor to see how that goes. Maybe that’s another blog post.