Headless Generation
Headless generation allows you to generate Puck pages programmatically, integrating agentic behavior deeply into your application.
Generate a page
Use the generate() API tool to generate Puck Data based on a natural-language prompt and Puck config.
import { generate } from "@puckeditor/cloud-client";
const page = await generate({
prompt: "Create a page about dogs",
config: {
components: {
HeadingBlock: {
fields: {
title: { type: "text" },
},
render: ({ title }) => title,
},
},
},
});
// { root: { props: { title: "Pawesome Friends" } }, content: [ { type: "HeadingBlock", props: { id: "Heading-12345", title: "Discover Man's Best Friend" } } ] }The output data can be provided to <Puck> for human-modification, or rendered directly with <Render>.
Execution time will vary based on the complexity of your prompt.
Update an existing page
You can use generate() to update existing data by providing it to the pageData parameter.
import { generate } from "@puckeditor/cloud-client";
const page = await generate({
prompt: "Replace all mentions of Dog with Cat",
config: {
components: {
HeadingBlock: {
fields: {
title: { type: "text" },
},
render: ({ title }) => title,
},
},
},
pageData: {
root: { props: { title: "Dogs: Man's Best Friend" } },
content: [],
},
});
// { root: { props: { title: "Cats: Man's Best Friend" } }, content: [] }