NEW PLUGIN: AI Page Builder, build pages with natural language based on user's prompt

[dogfrogfog]

The plugin should do multiple things:

1. The plugin should allow a user to create a specific page, meaning an item in the pages collection, based on available sections in the project using existing UI components and generating content based on text that the user provided.
2. The theme of the page. In the future, the plugin should be able to eat the context of the pages itself and know more about the brand, style, product, etc., but right now we want to focus on generating the first pages based on available sections and generating different types of pages, for example blog posts, maybe.

We should use the AI SDK from vercel and base everything on schemas, because schemas in this particular case will provide both type safety for payload collections, etc., as well as a schema for AI providers to generate data for.

[dogfrogfog]

Implemented in PR #17.

What shipped:

A new @focus-reactive/payload-plugin-ai-page-builder package (packages/payload-plugin-ai-page-builder/) with:

• Schema-first design — you pass Zod schemas for each block type; those same schemas are used as the generateObject structured-output constraint, so the AI can only produce content that matches your Payload block fields.
• POST /api/ai-page-builder/generate — takes a natural-language prompt and collection slug, calls the Vercel AI SDK generateObject, creates a draft document, and returns its id.
• Admin UI — a "✨ Generate with AI" panel is injected above the list table for every configured collection; the editor auto-navigates to the new draft on success.

Usage:

import { openai } from '@ai-sdk/openai'
import { aiPageBuilderPlugin } from '@focus-reactive/payload-plugin-ai-page-builder'
import { z } from 'zod'

export default buildConfig({
  plugins: [
    aiPageBuilderPlugin({
      model: openai('gpt-4o-mini'),
      collections: [{ slug: 'pages' }],
      blocks: [
        {
          slug: 'hero',
          description: 'above-the-fold section with headline',
          schema: z.object({
            title: z.string(),
            description: z.string().optional(),
          }),
        },
        {
          slug: 'copy',
          description: 'body text section',
          schema: z.object({ text: z.string() }),
        },
      ],
    }),
  ],
})

The theme-awareness work mentioned in the issue (feeding brand/style context) can be layered in later via the system prompt or additional block definitions.

---

Generated by Claude Code