feat: add @focus-reactive/payload-plugin-ai-page-builder

apps/dev/package.json

@@ -16,11 +16,14 @@
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
+    "@ai-sdk/openai": "3.0.25",
     "@focus-reactive/payload-plugin-ab": "workspace:*",
+    "@focus-reactive/payload-plugin-ai-page-builder": "workspace:*",
     "@focus-reactive/payload-plugin-comments": "workspace:*",
     "@focus-reactive/payload-plugin-presets": "workspace:*",
     "@focus-reactive/payload-plugin-scheduling": "workspace:*",
     "@focus-reactive/payload-plugin-translator": "workspace:*",
+    "ai": "6.0.68",
     "@payloadcms/db-sqlite": "3.79.0",
     "@payloadcms/live-preview-react": "3.79.0",
     "@payloadcms/next": "3.79.0",

apps/dev/src/payload.config.ts

@@ -1,11 +1,15 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
+import { openai } from "@ai-sdk/openai";
 import { abTestingPlugin } from "@focus-reactive/payload-plugin-ab";
+import { aiPageBuilderPlugin } from "@focus-reactive/payload-plugin-ai-page-builder";
+import type { AiBlockDefinition } from "@focus-reactive/payload-plugin-ai-page-builder";
 import { commentsPlugin } from "@focus-reactive/payload-plugin-comments";
 import { presetsPlugin } from "@focus-reactive/payload-plugin-presets";
 import { schedulePublicationPlugin } from "@focus-reactive/payload-plugin-scheduling";
 import { translatorPlugin, createOpenAIProvider, createPayloadJobsRunner } from "@focus-reactive/payload-plugin-translator";
+import { z } from "zod";
 import { sqliteAdapter } from "@payloadcms/db-sqlite";
 import { lexicalEditor } from "@payloadcms/richtext-lexical";
 import { buildConfig } from "payload";
@@ -19,6 +23,24 @@ import { abAdapter } from "./lib/ab-testing/dbAdapter";
 
 const baseDir = path.dirname(fileURLToPath(import.meta.url));
 
+const pageBlocks: AiBlockDefinition[] = [
+  {
+    slug: "hero",
+    description: "above-the-fold section with headline and optional subtitle",
+    schema: z.object({
+      title: z.string().describe("The main headline"),
+      description: z.string().optional().describe("Optional supporting subtitle"),
+    }),
+  },
+  {
+    slug: "copy",
+    description: "body text section",
+    schema: z.object({
+      text: z.string().describe("The body copy"),
+    }),
+  },
+];
+
 export default buildConfig({
   admin: {
     importMap: {
@@ -87,6 +109,15 @@ export default buildConfig({
         dryRun: !process.env.OPENAI_API_KEY,
       }),
     }),
+    ...(process.env.OPENAI_API_KEY
+      ? [
+          aiPageBuilderPlugin({
+            model: openai("gpt-4o-mini"),
+            collections: [{ slug: "pages" }],
+            blocks: pageBlocks,
+          }),
+        ]
+      : []),
   ],
   secret: process.env.PAYLOAD_SECRET || "",
   sharp,

packages/payload-plugin-ai-page-builder/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@focus-reactive/payload-plugin-ai-page-builder",
+  "version": "0.0.0",
+  "description": "AI-powered page builder plugin for Payload CMS — generate pages from natural language prompts using the Vercel AI SDK",
+  "keywords": [
+    "payload-cms",
+    "payload-plugin",
+    "ai",
+    "page-builder",
+    "vercel-ai-sdk",
+    "generative-ai",
+    "cms"
+  ],
+  "license": "MIT",
+  "author": "FocusReactive <ship@focusreactive.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/focusreactive/payload-plugins",
+    "directory": "packages/payload-plugin-ai-page-builder"
+  },
+  "bugs": {
+    "url": "https://github.com/focusreactive/payload-plugins/issues"
+  },
+  "homepage": "https://github.com/focusreactive/payload-plugins/tree/main/packages/payload-plugin-ai-page-builder",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "ultracite check",
+    "lint:fix": "ultracite fix",
+    "check-types": "tsgo --noEmit"
+  },
+  "peerDependencies": {
+    "@payloadcms/ui": "^3.0.0",
+    "ai": ">=4.0.0",
+    "payload": "^3.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "zod": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@payloadcms/ui": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@payloadcms/ui": "3.84.1",
+    "@types/node": "22.19.9",
+    "@types/react": "19.2.9",
+    "ai": "6.0.68",
+    "payload": "3.84.1",
+    "react": "19.2.1",
+    "tsup": "8.0.0",
+    "typescript": "5.9.2",
+    "zod": "3.24.1"
+  }
+}

packages/payload-plugin-ai-page-builder/src/admin/components/AiPageBuilderButton.export.ts

@@ -0,0 +1,13 @@
+import type { RawPayloadComponent } from "payload";
+
+import { adminComponentPath } from "../../shared/componentPath";
+
+export class AiPageBuilderButtonExport implements RawPayloadComponent {
+  path: string;
+  serverProps?: { basePath: string };
+
+  constructor(basePath: string) {
+    this.path = adminComponentPath("AiPageBuilderButton.server");
+    this.serverProps = { basePath };
+  }
+}

packages/payload-plugin-ai-page-builder/src/admin/components/AiPageBuilderButton.server.tsx

@@ -0,0 +1,17 @@
+import type { BeforeListTableServerProps } from "payload";
+
+import AiPageBuilderButton from "./AiPageBuilderButton";
+
+type AiPageBuilderServerProps = BeforeListTableServerProps & {
+  basePath: string;
+};
+
+async function AiPageBuilderButtonServer(props: AiPageBuilderServerProps) {
+  const { collectionSlug, basePath } = props;
+
+  if (!collectionSlug) return null;
+
+  return <AiPageBuilderButton collectionSlug={collectionSlug} basePath={basePath} />;
+}
+
+export default AiPageBuilderButtonServer;