Component Zod Pull

Pull zod description of your components at compile time using a script

This feature allows you to get your component's description in the form of a type-safe "Zod" description, which provides TS-first schema validation and static type inference for your content.

https://zod.dev

To pull our Zod schema, we're going to load some dependencies and create a script that uses some utilities from our cms-renderer

Let's start with our project structure

apps/
 web/
 app/
   page.tsx
 scripts/
   generate-schemas.ts // this is where our script lives

Now we will edit this generated-schema.ts file

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // importing my config

async function main() {
  const { cmsUrl, websiteId, apiKey } = cmsConfig;

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL is not set. Set it in your environment or .env file.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID is not set. Set it in your environment or .env file.'
    );
  }
  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY is not set. Set it in your environment or .env file.'
    );
  }

  const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] No components returned from the API. Check that PROFOUND_API_KEY is valid and points at the right website.'
    );
  }

  await saveZodSchemaCode(schemas, './generated/cms-schemas.ts');

  console.log('[generate-schemas] Done.');
}

main().catch((err) => {
 console.error('[generate-schemas] Failed:', err);
  process.exit(1);
});

Your CmsConfig should look like

export const cmsConfig = {
  cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
  apiKey: process.env.CMS_API_KEY,
  websiteId: '...',
};

Inside our package.json, we define how to run the script and some dependencies

NOTE: If you don't have a tsconfig, then you can remove the --tsconfig flag and its value

{
  "name": "web",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "generate-schemas": "tsx --tsconfig tsconfig.json scripts/generate-schemas.ts",
    "...": "..."
  },
  "dependencies": {
    "cms-renderer": "0.3.1",
    "zod": "^4.3.6",
    "...": "..."
  },
  "devDependencies": {
    "tsx": "^4.21.0",
 "object-hash": "^3.0.0",
    "...": "..."
  }
}

Now, after we run

$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Done.

We should get a similar output, and we can see a new file in our project structure

apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // this is where our script lives
 generated/
   cms-schema.ts // generated zod schema

You can inspect inside and see what your schema looks like. To update this file, you have to run the bun run generate-schemas command again, which you can connect to your dev or build workflow.

We can then pull these zod objects into our page.tsx file like so

import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';

// call petFoodPostSchema.parse(obj) for type safe parsing of objects

You can update your component from the admin panel and pull the updated schema again for easy development

Previous‹Split Screen JSON Component Builder with LLM