Puck AI 0.3: Headless page generation
Chris VillaPuck AI 0.3 introduces headless APIs for generating content with AI programmatically, without relying on the chat interface. This enables deep integration of Puck AI within your application.
In this post, we’ll go over everything new in Puck AI 0.3 and how you can start using it:
You can also find in-depth documentation in our AI docs.
What’s new in Puck AI 0.3
Headless page generation
Headless page generation lets you generate a page programmatically by providing a natural-language prompt and Puck config via the generate() API.
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" } } ] }You can also use it to update existing pages.
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: [] }How to upgrade
Upgrading Puck
Run the following command to install the latest version of the Puck canary required for AI functionality:
npm install --save-exact @measured/puck@0.21.0-canary.c0db75c1Installing Puck AI 0.3
Run the following command to install the latest version of Puck AI packages:
npm install --save-exact @puckeditor/cloud-client@0.3.0 @puckeditor/plugin-ai@0.3.0Try the Puck AI beta
We’re rolling out Puck AI to our existing community before opening a public beta.