When writing React:
- Default export a React component.
- Use Tailwind for styling, no import needed.
- All NPM libraries are available to use.
- Use shadcn/ui for basic components (eg. `import { Card, CardContent } from
"@/components/ui/card"` or `import { Button } from "@/components/ui/button"`),
lucide-react for icons, and recharts for charts.
- Code should be production-ready with a minimal, clean aesthetic.
- Follow these style guides:
- Varied font sizes (eg., xl for headlines, base for text).
- Framer Motion for animations.
- Grid-based layouts to avoid clutter.
- 2xl rounded corners, soft shadows for cards/buttons.
- Adequate padding (at least p-2).
- Consider adding a filter/sort control, search input, or dropdown menu for >organization.
That's twelve lines and 182 tokens just for writing React. Lots for Python too. Why these two specifically? Is there some research that shows people want to write React apps with Python backends a lot? I would've assumed that it wouldn't need to be included in every system prompt and you'd just attach it depending on the user's request, perhaps using the smallest model so that it can attach a bunch of different coding guidelines for every language. Is it worth it because of caching?
> That's twelve lines and 182 tokens just for writing React. Lots for Python too. Why these two specifically?
Both answers are in the prompt itself: the python stuff is all in the section instructing the model on using its python interpreter tool, which it uses for a variety of tasks (a lot of it is defining tasks it should use that tool for and libraries and approaches it should use for those tasks, as well as some about how it should write python in general when using the tool.)
And the react stuff is because React is the preferred method of building live-previewable web UI (It can also use vanilla HTML for that, but React is explicitly, per the prompt, preferred.)
This isn't the system prompt for a general purpose coding tool that uses the model, its the system prompt for the consumer focused app, and the things you are asking about aren't instructions for writing code where code is the deliverable to the end user, but for writing code that is part of how it uses key built-in tools that are part of that app experience.
I was talking to a friend recently about how there seem to be less Vue positions available (relatively) than a few years ago. He speculated that there's a feedback loop of LLMs preferring React and startups using LLM code.
Obviously, the size of the community was always a factor when deciding on a technology (I would love to write gleam backends but I won't subject my colleagues to that), but it seems like LLM use proliferation widens and cements the gap between the most popular choice and the others.
And let's not forget that these LLMs are made by companies that could if they so choose insert instructions nudging the user toward services provided by themselves or other companies that give them some kind of kickback.
I would imagine that this is also for making little mini programs out of react like claude does whenever you want it to make a calculator or similar. In that context it is worth it because a lot of them will be made.
They can also embed a lot of this stuff as part of post training, but putting it in the sys prompt vs. others probably has it's reasons found in their testing.
Because those are the two that it can execute itself. It uses Python for its own work, such as calculations, charting, generating documents, and it uses React for any interactive web stuff that it displays in the preview panel (it can create vanilla HTML/CSS/JS, but it's told to default to React). It can create code for other languages and libraries, but it can't execute it itself.
That's interesting. I've ended up writing a React app using tailwind with python backend, partly because it's what LLMs seemed to choke a bit less on. When I've tried it with other languages I've given up.
It does keep chucking shadcn in when I haven't used it too. And different font sizes.
I wonder if we'll all end up converging on what the LLM tuners prefer.
Completely anecdotal but the combination of React FE + Python BE seems to be popular in startups and small-sized companies, especially for full-stack positions.
To avoid sounding like I'm claiming this because it's my stack of choice: I'm more partial to node.js /w TypeScript or even Golang, but that's because I want some amount of typing in my back-end.
I'll have to take another look but I always thought that the Python type experience was a bit more clunky than what TS achieved for JS. I guess there's also a critical mass of typing in packages involved.
Coding is one of the most profitable applications of LLMs. I'd guess that coding is single digit percentages of total ChatGPT use but perhaps even the majority of usage in the $200/month plan.
I can’t say about Python, but I am pretty sure react is being “configured” explicitly because the state of the frontend ecosystem is such a mess compared to other areas.
(Which, in my opinion has two reasons: 1. That you can fix and redeploy frontend code much faster than apps or cartridges, which led to a “meh will fix it later” attitude and 2. That JavaScript didn’t have a proper module system from the start)
