vercel-labs / vercel-labs/json-render
Chat example: catalog-only Tailwind classes (e.g. `grid-cols-4`) have no CSS
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 901
- Avg merge
- 3h 14m
- Merged PRs (30d)
- 4
Description
Description
In the chat example, model-generated components can render with correct class names but no styling. This happens for any class that only occurs inside @json-render/shadcn and nowhere in the example's own source.
Tailwind v4 auto source detection skips node_modules and gitignored dist output, so utilities that live only in the built catalog are never generated. Other examples handle this with @source "../../../packages/shadcn/src/**/*.tsx" (no-ai, next-website-builder, mcp). chat is missing that line.
The streamdown directive in chat and harness-chat is also broken. @source "../../../node_modules/streamdown/dist/*.js" resolves to the repo root node_modules, which is empty under pnpm, so the glob matches nothing. apps/web uses the correct ../node_modules form.
Reproduction
pnpm install,pnpm build, run the chat example- Prompt: "create a 4x4 grid of metric cards"
- Grid renders as a single column. Devtools shows
grid grid-cols-4on the element but no.grid-cols-4rule in the CSS.
Same cause, other prompts: Stack justify="around" (missing justify-around), Card maxWidth="sm" (missing sm:min-w-[280px]).
Fix
Add the @source line used by the other examples and correct the streamdown paths. PR incoming.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in the Tailwind directives for the chat and harness-chat examples, comparing their source paths with no-ai, next-website-builder, mcp, and apps/web. Run pnpm install and pnpm build, then reproduce the 4x4 metric-card prompt. Done means catalog-only utilities such as grid-cols-4 and the streamdown styles are present in the generated CSS.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100