API ReferenceAIConfigurationComponents

Component AI Config

Configure AI behavior for a component. Extends the Puck ComponentConfig.

const config = {
  components: {
    HeadingBlock: {
      ai: {
        instructions: "Always place this first",
      },
      fields: {
        title: {
          type: "text",
        },
      },
      render: ({ title }) => <h1>{title}</h1>,
    },
  },
};

Params

Param	Example	Type	Status
`instructions`	`"Always place this first"`	String	-
`schema`	`{}`	JSONSchema	-

Optional params

`instructions`

Instructions that must be taken into account when considering this component.

const config = {
  components: {
    HeadingBlock: {
      ai: {
        instructions: "Always place this first",
      },
      fields: {
        title: {
          type: "text",
        },
      },
      render: ({ title }) => <h1>{title}</h1>,
    },
  },
};

`schema`

A custom JSON Schema for this component. By default, Puck AI will generate a schema based on your Puck config.

Useful when using custom, external, or user fields that Puck can’t infer.

const config = {
  components: {
    HeadingBlock: {
      ai: {
        schema: {
          type: "object",
          parameters: { title: { type: "text" } },
          required: ["title"],
        },
      },
      fields: {
        title: {
          type: "custom",
          render: () => <input />,
        },
      },
      render: ({ title }) => <h1>{title}</h1>,
    },
  },
};

tool

Fields