vercel-labs / vercel-labs/json-render

`generateCatalogPrompt` isn't working properly

Open
#37 2 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
16.8k
Forks
901
Avg merge
3h 14m
Merged PRs (30d)
4

Description

Having the catalog copied from README

import { createCatalog } from '@json-render/core';
import { z } from 'zod';

export const catalog = createCatalog({
  components: {
    Card: {
      props: z.object({ title: z.string() }),
      hasChildren: true,
    },
    Metric: {
      props: z.object({
        label: z.string(),
        valuePath: z.string(),      // Binds to your data
        format: z.enum(['currency', 'percent', 'number']),
      }),
    },
    Button: {
      props: z.object({
        label: z.string(),
        // action: ActionSchema,        // AI declares intent, you handle it
      }),
    },
  },
  actions: {
    export_report: { description: 'Export dashboard to PDF' },
    refresh_data: { description: 'Refresh all metrics' },
  },
});

And running

const systemPrompt = generateCatalogPrompt(catalog);

console.log('systemPrompt:', systemPrompt);

I get the following prompt:

## Available Components

### Card

### Metric

### Button

## Available Actions

- `export_report`: Export dashboard to PDF
- `refresh_data`: Refresh all metrics

## Visibility Conditions

Components can have a `visible` property:
- `true` / `false` - Always visible/hidden
- `{ "path": "/data/path" }` - Visible when path is truthy
- `{ "auth": "signedIn" }` - Visible when user is signed in
- `{ "and": [...] }` - All conditions must be true
- `{ "or": [...] }` - Any condition must be true
- `{ "not": {...} }` - Negates a condition
- `{ "eq": [a, b] }` - Equality check

## Validation Functions

Built-in: `required`, `email`, `minLength`, `maxLength`, `pattern`, `min`, `max`, `url`

P. S. I've noticed that the dashboard example from this repository has hard-coded system prompt, the website documentation doesn't match the implementation and README details, examples aren't TypeScript ready, etc. What's the status of this project and what's the roadmap?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the TypeScript catalog shown in the README and call generateCatalogPrompt(catalog), then compare the output with the component schemas and the dashboard example. Confirm that component props appear in the generated prompt and determine whether the related documentation and examples match the implementation; done means the reported prompt output is corrected and the examples are consistent.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.