withDynamicConfig

Augment a Puck config with component entries from design mode registrations persisted in page data. Call this when initializing <Puck> so that pages with designed components render correctly on load.

import { withDynamicConfig } from "@puckeditor/plugin-ai";
 
export function Editor({ data }) {
  return <Puck config={withDynamicConfig(config, data)} data={data} />;
}

This is also required for published or static pages that render designed components without the chat runtime.

Args

config

The base Puck Config. Designed component entries will be merged into config.components.

data

The current page Data. Designed component definitions are read from data.root.props._dynamicConfig.components.

Returns

A new Config object with:

• A hidden _dynamicConfig root field (excluded from the AI schema and the editor sidebar)
• Component entries for each designed component, with render functions, slot fields, inline editing, and resolveData / resolveFields handlers